Integrating on the Web

    Get set up with Stripe.js to start accepting payments on the web.

    Collecting payments on the web takes four steps:

    1. Set up Stripe Elements
    2. Create your payment form
    3. Create a token to securely transmit card information
    4. Submit the token and the rest of your form to your server
    5. Create a charge with that token

    In this guide, learn how to include Stripe.js on your checkout pages and set up Elements.

    HTTPS requirements

    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.

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

    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.

    Next steps

    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? Yes No

    Send

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

    Questions?

    We're always happy to help with code or other questions you might have. Search our documentation, contact support, or connect with our sales team. You can also chat live with other developers in #stripe on freenode.

    On this page