@stripe/stripe-js

What is @stripe/stripe-js?

The @stripe/stripe-js package is a JavaScript library that allows developers to integrate Stripe's payment processing capabilities into their web applications. It provides a set of tools to create and manage payment elements, handle payment intents, and securely collect payment information.

What are @stripe/stripe-js's main functionalities?

Loading Stripe.js

This code sample demonstrates how to asynchronously load the Stripe.js library using the provided publishable key. The `loadStripe` function returns a Promise that resolves with the Stripe object.

import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

Creating a Payment Element

This code sample shows how to use the `Elements` provider to inject the Stripe object into the React component tree and create a `CardElement` that collects the user's card details.

import { Elements } from '@stripe/react-stripe-js';
import { CardElement } from '@stripe/react-stripe-js';

const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

const CheckoutForm = () => {
  return (
    <Elements stripe={stripePromise}>
      <CardElement />
    </Elements>
  );
};

Handling Payment Intents

This code sample illustrates how to confirm a card payment using a PaymentIntent's client secret. It uses the `confirmCardPayment` method to handle the payment process.

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

const {error, paymentIntent} = await stripe.confirmCardPayment('{CLIENT_SECRET}', {
  payment_method: {
    card: cardElement,
    billing_details: {
      name: 'Jenny Rosen'
    }
  }
});

Other packages similar to @stripe/stripe-js

react-stripe-elements

This package provides React components for building forms with Stripe Elements. It is similar to @stripe/stripe-js but is designed specifically for React applications. It has been deprecated in favor of @stripe/react-stripe-js, which works with the newer Stripe.js.

braintree-web

Braintree's JavaScript SDK for integrating payment processing. It offers similar functionality to @stripe/stripe-js but is tailored for Braintree's payment platform, which is a different service owned by PayPal.

square-web-sdk

Square's Web Payments SDK is an alternative to @stripe/stripe-js for integrating Square's payment processing services. It provides a different set of APIs and is designed to work with Square's ecosystem.

README

ES Module for Stripe.js

Import and use Stripe.js as an ES module.

Stripe.js cannot be bundled with your code; it must be served from https//js.stripe.com/v3. This module wraps the global Stripe function provided by the Stripe.js script. If needed, it will inject the script for you and provide a loading wrapper.

Usage

Stripe()

To use the exported Stripe() function, first include the Stripe.js script on each page of your site.

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

Then import and use Stripe.js as you would any other module. For more information on how to use Stripe.js, please refer to the Stripe.js API reference or learn to accept a payment with Stripe.

import {Stripe} from '@stripe/stripe-js';

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

We‘ve placed a random API key in the code. Replace it with your actual publishable API keys to test this code through your Stripe account.

loadStripe()

Use this function if you do not want to mess around with adding <script> tags, or want to speed up the initial load time on your site. It will inject the Stripe.js script tag for you and wait for it to load. For more information on how to use Stripe.js once it loads, please refer to the Stripe.js API reference or learn to accept a payment with Stripe.

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

We‘ve placed a random API key in the code. Replace it with your actual publishable API keys to test this code through your Stripe account.

Ensuring Stripe.js is available everywhere

To best leverage Stripe’s advanced fraud functionality, ensure that Stripe.js is loaded on every page, not just the checkout page. This allows Stripe to detect anomalous behavior that may be indicative of fraud as customers browse your website.

If you are adding the <script> tag manually, make sure you do so on every page. If you are relying on the script injection that this module provides, and you utilize code splitting or only include your JavaScript app on your checkout page, you will need to take extra steps to ensure Stripe.js is available everywhere.

Import as a side effect

Import @stripe/stripe-js as a side effect in code that will be included throughout your site (e.g. your root module). This will make sure the Stripe.js script tag is injected right away.

import '@stripe/stripe-js';

Manually include the script tag

Manually add the Stripe.js script tag to the <head> of each page on your site. If you use loadStripe, it will use this script tag rather tha injecting a new one.

<!-- Somewhere in your site's <head> -->
<script src="https://js.stripe.com/v3" async></script>

Stripe.js Documentation

• Stripe.js Docs
• Stripe.js Reference
• React Stripe.js Docs

Contributing

If you would like to contribute to React Stripe.js, please make sure to read our contributor guidelines.