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 prebuilt UI components, to create a payment form that lets you securely collect a customer’s card details without handling the sensitive data.

Antes de comenzar

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/basil/stripe.js" async></script>
</head>

Stripe.js constructor

Next, set the API publishable key to allow Stripe to tokenize 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'
);

Consulta también

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.