From talking to our users, it’s clear to us that building great payments forms is hard, and that small details can have a big impact on the user experience. Even minor tweaks regularly drive substantial swings in conversion rates. Creating a great payment flow is a design problem faced by almost everyone running an online business.

And so we started trying to figure out how we can help. We see millions of transactions, and have access to a lot of data about what works well and what doesn’t. We wondered whether we could create something that looks great, makes Stripe easier to integrate, improves with time, and results in a better payment experience for users.

We’ve been experimenting over the past few months, and we’re ready to release our first version today.

It’s unfortunate that everyone has to reinvent the wheel when the time comes to implement a payments UI. We decided to build something that you can just drop in as a single tag:

  

    ~
  

  

        
        
        
        
          
        

Rather than show the payment form directly on the page, we decided to have it appear as an overlay. This, combined with the dimmed background, helps to provide a little separation from the enclosing page while still making it clear to users that they haven’t left the site. We’ve worked hard to make sure that it fits well with almost any design.

Though you’re welcome to use the button we show here, you can trigger the Checkout’s overlay with any HTML element or JavaScript event—the blue button is just a default. There’s a full JavaScript API and a bunch of configuration options. We do all the validation, input formatting, and error handling for you, as well as taking care of securely transferring your customer’s payment information to Stripe.

Built-in mobile support

Despite the explosion of smartphones and tablets, a web site’s mobile payment flows are often neglected. Developers are confronted with a plethora of devices, screen sizes, and browser-specific challenges. We wanted the form to automatically adapt to mobile devices, and it includes a dedicated mobile flow, optimized for iOS and Android.

Of course, it’s not just about supporting recent devices. This also works on all major browsers, including IE 7 and above.

Optimized, tested, and always improving

Over the last few months, we’ve been field-testing on a variety of sites, collecting data and incorporating feedback. The early results are promising—for example, App.net increased their conversion rate by 10%—but we don’t yet have enough data to make any conclusive claims.

Ultimately, we think the structural shift is most important. Normally, you build a payment form and move on. Maybe you eventually get time to revisit it a year later. By integrating Stripe’s payment form, your checkout is continually improving. As we refine and iterate over time, we’ll be able to immediately pass enhancements on to anyone who uses it. We’re looking forward to seeing what you build, and to doing our part to help improve commerce on the web.