Integrating Stripe on the Web

    Set up Stripe.js to accept payments on the web.

    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.

    <script src="https://js.stripe.com/v3/"></script>

    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

    1. To create an instance of Elements, add the following code to the JavaScript on your checkout page:
    var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
    var elements = stripe.elements();
    
    const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
    const elements = stripe.elements();
    
    1. Replace the sample API key with your test mode publishable key. This allows you to test the code through your Stripe account.

    1. 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.

    HTTPS requirements

    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.

    Next steps

    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?

    Thank you for helping improve Stripe's documentation. If you need help or have any questions, please consider contacting support.

    On this page