Checkout

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

Demo

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

Integration

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.

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.
SimpleCustom

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">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-image="/square-image.png"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-amount="2000">
  </script>
</form>

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.

Option 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.
stripeBillingName
stripeBillingAddressLine1
stripeBillingAddressZip
stripeBillingAddressState
stripeBillingAddressCity
stripeBillingAddressCountry
Billing address details (if enabled).
stripeShippingName
stripeShippingAddressLine1
stripeShippingAddressZip
stripeShippingAddressState
stripeShippingAddressCity
stripeShippingAddressCountry
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. The key parameter, and all callback parameters (e.g. token), should be passed to configure(). Any other options can be passed to either configure() or open().

<script src="https://checkout.stripe.com/checkout.js"></script>

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

<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: '/square-image.png',
    token: function(token, args) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });

  document.getElementById('customButton').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'Demo Site',
      description: '2 widgets ($20.00)',
      amount: 2000
    });
    e.preventDefault();
  });
</script>

Configuration Options

Required

Option Description
data-key Your publishable key (test or live).
tokenOnly available with the custom integration Event called when the Checkout process is done.
function(token, args)
token is the token object created. Use this token to create charges server-side. More information about what a token is.
args is an object containing billing and/or shipping addresses if enabled. Show args 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.
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 Stripe API.

Optional

Option Description
data-currency Use a particular currency (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.). {{amount}} will be replaced by the provided amount.
data-billing-addressbillingAddress Specify whether the form should collect the customer's billing address (true or false).
data-shipping-addressshippingAddress Specify whether the form should collect the customer's shipping address (true or false).
data-email If you already know the email address of your customer, you can provide it to Checkout to be pre-filled.
data-labelOnly available with the simple integration Specify the text to be shown on the default blue button.
data-allow-remember-meallowRememberMe Specify whether to include the option to "Remember Me" for future purchases (true or false). The default is true.
openedOnly available with the custom integration function()
Event called when Checkout is opened (not supported in IE6 and IE7).
closedOnly available with the custom integration function()
Event called when Checkout is closed (not supported in IE6 and IE7).

More Information

Is Checkout verifying if credit cards are valid?

If you pass the amount parameter, Checkout will verify the card details with the credit-card networks. For additional protection, you can opt to have Checkout collect billing address details, 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 handler.open 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() {
  handler.open({
    image: '/square-image.png',
    name: 'Demo Site',
    description: '2 widgets ($20.00)',
    amount: 2000
  });
});

// This will not work
$("#failbutton").on("click", function() {
  $.ajax({
    url: "/",
  }).done(function() {
    handler.open({
      image: '/square-image.png',
      name: 'Demo Site',
      description: '2 widgets ($20.00)',
      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.