Collecting payments on the web takes four steps:
- Set up Stripe Elements
- Create your payment form
- Create a token to securely transmit card information
- Submit the token and the rest of your form to your server
- Create a charge with that token
In this guide, learn how to include Stripe.js on your checkout pages and set up Elements.
All submissions of payment info using Elements are made via a secure HTTPS connection. However, to protect yourself from certain forms of man-in-the-middle attacks, and to prevent your customers from seeing Mixed Content warnings in modern browsers, you must serve the page containing the payment form over HTTPS as well.
In short, the address of the page containing Elements must 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, check out our security documentation for more information.
Set up Stripe Elements
Elements is available as part of Stripe.js. To get started, include the following script on your pages. This script must always load directly from js.stripe.com in order to remain PCI compliant—you can’t include it in a bundle or host a copy of it yourself.
To best leverage Stripe’s advanced fraud functionality, include this script on every page on your site, not just the checkout page. Including the script on every page allows Stripe to detect anomalous behavior that may be indicative of fraud as users browse your website.
Next, create an instance of Elements:
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); var elements = stripe.elements();
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); const elements = stripe.elements();
We’ve placed a random API key in the code. Replace it with your actual publishable API key to test this code through your Stripe account.
When you’re ready to accept live card payments, replace the test key with your live key for production uses. Learn more about how the keys play into test and live modes.
Congrats! Next, learn to collect card details in a custom payment form. Once you’ve sent your form to your server, you can use the token to create a charge or to save the details to a customer.
Was this page helpful?