Integrating Checkout

Stripe's embedded payment form, Checkout, simplifies and secures online payment processing. If you need help after reading this, check out our answers to common questions or chat live with other developers in #stripe on freenode.

An easy way to integrate Stripe is via Checkout, an embedded tool that takes care of building an HTML form, validating input, and securing your customers' card data. Using Checkout, sensitive credit card information is sent directly to Stripe, and does not touch on your server. Stripe returns a token to your site, representing the card, and this token can then be used in a charge request.

Checkout is a fairly high-level solution. If you need a more custom approach, you can instead use Stripe with your own form via Stripe.js.

To see Checkout in action, click the button below, filling in the resulting form with:

  • Any random, syntactically valid email address (the more random, the better)
  • One of Stripe's test card numbers, such as 4242 4242 4242 4242
  • Any three digit CVC code
  • Any expiration date in the future

Embedding Checkout in your site

To get started, add the following code to your page.

<form action="" method="POST">
    src="" class="stripe-button"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"

The most important thing to notice is the data-key attribute added to the SCRIPT tag. This key identifies your account when communicating with Stripe. As a convenience, if you're logged in while reading this page, we've pre-filled the example with your test publishable API key. Only you can see this value.

You will need to replace the test key with your live key for production uses. You can get all your keys from your account page, or learn more about live mode and testing.

An alternative to the blue button demonstrated above is to use your own custom button with Checkout. The custom approach allows you to use any HTML element or JavaScript event to open the payment overlay, as well as be able to specify dynamic arguments, such as custom amounts.

Learn more about custom Checkout integrations in the Checkout reference.

Generating and using tokens

With Stripe, sensitive cardholder data does not hit your server, greatly minimizing your PCI compliance burden. Stripe takes care of the hardest parts of PCI compliance, like redacting logs and encrypting card details. Just enable HTTPS on your checkout page, and we'll take over from there.

Here's the whole workflow:

  1. The customer arrives at your payment page, loaded over HTTPs, that includes the Checkout code.
  2. The customer clicks the payment button (e.g., "Pay with Card"), completes the payment form, and clicks "Pay $20.00" within the Checkout window.
  3. Checkout sends the credit card details directly to Stripe from the customer's browser, assuming the details pass basic validation.
  4. Stripe returns a token to Checkout, or an error message if real validation fails.
  5. Checkout takes the returned token and stores it in the page's primary form—the one surrounding the SCRIPT tag above, in a hidden element named stripeToken.
  6. Checkout submits the form to your server.
  7. Your server uses the posted token to charge the card.

To be absolutely clear on the process, the client-side code—Checkout—securely accepts the card information but does not initiate a payment attempt. The actual charge request is triggered from your server.

Next up

Once the form, with the stored payment token, is submitted to your server, you'll want to use the payment details just collected. Usually this means one of three actions:

For a more advanced Checkout integration, learn how to dynamically display a user-supplied charge amount.