Checkout is the best payment flow, on web and mobile. Checkout builds on top of Stripe.js to provide your users with a streamlined, mobile-ready payment experience that is constantly improving. Learn more about Checkout


Try the demo below with this test card number:
4242 4242 4242 4242


You can integrate Checkout in as little as a single line of client-side code. As we release new Stripe features, we'll automatically roll them out to your existing Checkout integration, so that you will always be using our latest technology without needing to change a thing.

Note: Checkout must be loaded from Using a local copy of Checkout is unsupported, and may result in user-visible errors.

Checkout supports two different integrations:

  • Simple: The simple integration provides a blue "Pay with card" button and submits your payment form with a Stripe token in a hidden input field.
  • Custom: The custom integration lets you create a custom button and passes a Stripe token to a JavaScript callback.

The simple integration uses a <script> tag inside your payment <form> to render the blue Checkout button. When a user clicks the button and completes payment, we will submit your form with a stripeToken along with any other <input>s in your form.

<form action="/charge" method="POST">
    src="" class="stripe-button"
    data-description="2 widgets"

It's worth noting that Checkout doesn't actually create charges—it only creates tokens. You can use those tokens to create the actual charge on your server. Alternatively you can save the card for charging later, or sign the user up for recurring charges.

Received Parameters

These parameters will be submitted to your form's action endpoint, along with any other <input> fields in the form, once the checkout is complete.

Parameter Description
stripeToken The ID of the token you need to create a charge or a customer.
stripeEmail The email address the user entered during the Checkout process.
Billing address details (if enabled).
Shipping address details (if enabled).

The custom integration allow you to use your own custom button with our JavaScript API. This permits any HTML element or JavaScript event to start a Checkout payment.

When your page loads, you should create a handler object using StripeCheckout.configure(). You can call open() on the handler in response to any event. If you need to abort the Checkout process—for example, when navigation occurs in a single-page application—you can call close() on the handler. The key parameter must be passed to configure(). Any other options can be passed to either configure() or open().

Here is an example of a custom Checkout integration using jQuery.

<script src=""></script>

<button id="customButton">Purchase</button>

  var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: '/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(token) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with ``

  $('#customButton').on('click', function(e) {
    // Open Checkout with further options{
      name: '',
      description: '2 widgets',
      amount: 2000

  // Close Checkout on page navigation
  $(window).on('popstate', function() {

Configuration Options


Option Description
data-key Your publishable key (test or live).
tokenOnly available with the custom integration The callback to invoke when the Checkout process is complete.
token is the token object created. can be used to create a charge or customer. contains the email address entered by the user.
args is an object containing billing and shipping addresses if enabled. Show example.
  // Billing name and address
  "billing_name": "Stripe",
  "billing_address_country": "United States",
  "billing_address_zip": "94110",
  "billing_address_state": "CA",
  "billing_address_line1": "18th Street, 3180",
  "billing_address_city": "San Francisco",

  // Shipping name and address
  "shipping_name": "Stripe",
  "shipping_address_country": "United States",
  "shipping_address_zip": "94110",
  "shipping_address_state": "CA",
  "shipping_address_line1": "18th Street, 3180",
  "shipping_address_city": "San Francisco"

Highly recommended

Option Description
data-image A relative URL pointing to a square image of your brand or product. The recommended minimum size is 128x128px. The recommended image types are .gif, .jpeg, and .png.
data-name The name of your company or website.
data-description A description of the product or service being purchased.
data-amount The amount (in cents) that's shown to the user. Note that you will still have to explicitly include it when you create a charge using the API.
data-locale Specify auto to display Checkout in the user's preferred language, if available. English will be used by default.


Option Description
data-currency The currency of the amount (3-letter ISO code). The default is USD.
data-panel-labelpanelLabel The label of the payment button in the Checkout form (e.g. “Subscribe”, “Pay {{amount}}”, etc.). If you include {{amount}}, it will be replaced by the provided amount. Otherwise, the amount will be appended to the end of your label. Checkout does not translate custom labels to the user's preferred language.
data-zip-codezipCode Specify whether Checkout should validate the billing ZIP code (true or false). The default is false.
data-billing-addressbillingAddress Specify whether Checkout should collect the user's billing address (true or false). The default is false.
data-shipping-addressshippingAddress Specify whether Checkout should collect the user's shipping address (true or false). The default is false.
data-email If you already know the email address of your user, you can provide it to Checkout to be pre-filled.
data-labelOnly available with the simple integration The text to be shown on the default blue button. Checkout does not translate custom labels to the user's preferred language.
data-allow-remember-meallowRememberMe Specify whether to include the option to "Remember Me" for future purchases (true or false). The default is true.
data-bitcoin Specify whether to accept Bitcoin (true or false). The default is false.
data-alipay Specify whether to accept Alipay ('auto', true, or false). The default is false.
data-alipay-reusablealipayReusable Specify if you need reusable access to the customer's Alipay account (true or false). The default is false.
openedOnly available with the custom integration function()
The callback to invoke when Checkout is opened (not supported in IE6 and IE7).
closedOnly available with the custom integration function()
The callback to invoke when Checkout is closed (not supported in IE6 and IE7).

More Information

Is Checkout verifying if credit cards are valid?

Yes, Checkout verifies card details with the credit card networks to ensure they are valid. For additional protection, you can opt to have Checkout collect the billing ZIP code, and make sure that ZIP code validation is turned on for your account.

What browsers does Checkout support?

Checkout strives to support all known browsers. If you have an issue with Checkout on a specific browser, please contact us so we can improve its support.

How do I prevent the Checkout popup from being blocked?

You need to call when the user clicks on an element on the page and not in a callback. This indicates to the browser that the user is explicitly requested the popup. Otherwise, mobile devices and some versions of Internet Explorer will block the popup and prevent users from checking out.

// This will work
$("#button").on("click", function() {{
    image: '/square-image.png',
    name: 'Demo Site',
    description: '2 widgets',
    amount: 2000

// This will not work
$("#failbutton").on("click", function() {
    url: "/",
  }).done(function() {{
      image: '/square-image.png',
      name: 'Demo Site',
      description: '2 widgets',
      amount: 2000

HTTPS For Your Site

All submissions of payment info using Checkout are made via a secure HTTPS connection. However, in order to protect yourself from certain forms of man-in-the-middle attacks, we suggest that you also serve the page containing the payment form with HTTPS as well. This means that any page that a Checkout form may exist on should start with https:// rather than just http://.

If you are not familiar with the process of buying SSL certificates and integrating them with your server to enable a secure HTTPS connection, please visit our Help Page for SSL.


We have Checkout integration guides for several platforms and languages to get you up and running as quickly as possible: Sinatra, Rails, Flask, and PHP