ES Module Stripe.js SDK
Set up the ES Module Stripe.js client-side SDK in your web application.
This introductory guide shows you how to install the ES Module Stripe.js client-side SDK with a script tag or package manager. The SDK wraps the global Stripe function provided by the Stripe.js script as an ES module. It allows you to use Elements, our pre-built UI components, to create a payment form that lets you securely collect a customer’s card details without handling the sensitive data.
Before you begin
Enable the payment methods you want to support on the payment methods settings page.
Manually load the Stripe.js script
Installation
To install by script, add the Stripe.js ES Module as a script to the <head> element of your HTML. This allows any newly created Stripe objects to be globally accessible in your code.
<head> <title>Checkout</title> <script src="https://js.stripe.com/v3/" async></script> </head>
Stripe.js constructor
Next, set the API publishable key to allow Stripe to tokenise customer information and collect sensitive payment details. For example:
var stripe = Stripe();'pk_test_TYooMQauvdEDq54NiTphI7jx'
Load Stripe.js as an ES Module
Installation
To install by package manager, install the Stripe.js ES Module from the npm public registry.
npm install @stripe/stripe-js
Stripe.js constructor
Next, import the module into a JavaScript file. The following function returns a Promise that resolves with a newly created Stripe object after Stripe.js loads.
import {loadStripe} from '@stripe/stripe-js'; const stripe = await loadStripe();'pk_test_TYooMQauvdEDq54NiTphI7jx'
See also
This wraps up the introductory guide to setting up the ES Module Stripe.js SDK. See the links below to get started with your integration.