An easy way to integrate Stripe is via Checkout, which will take care of building forms, validating input, and securing your customers' card data.
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:
- Collect credit card information with Checkout
- Convert those details to what we call a single-use token
- Send that token, with the rest of your form, to your server to create the actual charge
Step 1: Embed 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
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 live mode and testing.
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.
Once you've sent your form to your server, you're going to want to do something with the payment details you just collected. This is usually one of two things: