Integrating Checkout

This tutorial helps you accept your first payment with Stripe. If you need help, check out our answers to common questions or chat live with our developers in #stripe on freenode.

An easy way to integrate Stripe is via the Checkout, which will take care of building forms, validating input, and securing your customers' card data.

The Checkout is fairly high level, so remember that you can still use Stripe with your own forms via Stripe.js if it doesn't fit your use-case.

Try clicking on the example below, filling in the form with one of Stripe's test card numbers, 4242 4242 4242 4242, any three digit CVC code, and a valid expiry date.

Here's an overview of what you'll accomplish in this tutorial:

  1. Collect credit card information with the Checkout
  2. Convert those details to what we call a single-use token
  3. Send that token, with the rest of your form, to your server to create the actual charge

Step 1: Embed the Checkout

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

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
  </script>
</form>

The key thing to notice is the data-key attribute we added on the script tag which identifies your website when communicating with Stripe. Note that we've pre-filled the example with your test publishable API key. Remember to replace the test key with your live key in production. You can get all your keys from your account page, or find out about livemode and testing.

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

Read more about Checkout's reference.

Step 2: Sending tokens to your server

Your life becomes easier if sensitive cardholder data does not hit your servers. You can let us take care of the hardest parts of PCI compliance, like redacting logs and encrypting cardholder details. You should still support https on your website.

With Checkout, you never have to handle sensitive card data. It's automatically converted to a token which you can safely send to your servers and use to charge your customers. In other words, the card isn't charged on the client-side; we send a token representing the card data to your server, which you can then charge.

By placing the script tag inside a <form>, a hidden input called stripeToken will be appended to the form when a token is created. When a customer of yours enters their card information, the hidden field containing the token will be appended to the form, and then the form will be automatically submitted to your server. The enclosing form can, of course, contain other inputs.

The next step is using the stripeToken parameter on the server side to charge the card.