Collecting payments on the web consists of creating a payment form, tokenizing sensitive card information to transmit it securely to your server, and using that token to create a charge.
This guide shows you how to include Stripe.js on your checkout pages and set up Stripe Elements, which you use to build a payment form and collect payment information.
Set up Stripe.js
Include the following script in the head section on every page on your site. This script must always load directly from js.stripe.com to remain PCI compliant. You can’t include the script in a bundle or host a copy of it yourself.
To best leverage Stripe’s advanced fraud functionality and ability to detect anomalous browsing behavior, include the script in the head section on every page on your site, not just the checkout page.
Set up Stripe Elements
Elements is available as part of Stripe.js and provides drop-in UI components that you can use to collect payment information from customers.
To set up Elements and collect payment information
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); var elements = stripe.elements();
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); const elements = stripe.elements();
Replace the sample API key with your test mode publishable key. This allows you to test the code through your Stripe account.
- When you’re ready to accept live card payments, replace the test mode publishable key with your live mode publishable key for production uses. Learn more about how the keys play into test and live modes.
When you use Elements, all payment information is submitted over a secure HTTPS connection. 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 that contains the payment form over HTTPS as well.
In short, the address of the page that contains Elements must start with https:// rather than http://. For more information about getting SSL certificates and integrating them with your server to enable a secure HTTPS connection, see our security documentation.
Congrats! Next, learn to collect payment information 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?