@stripe/stripe-js
Advanced tools
Package description
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.
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'
}
}
});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'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'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
This package allows Stripe.js to be imported as a CommonJS module or ES module.
Note: To be
PCI compliant,
you must load Stripe.js directly from https://js.stripe.com. You cannot
include it in a bundle or host it yourself. This package wraps the global
Stripe function provided by the Stripe.js script as an ES module.
Calling loadStripe always loads the latest version of Stripe.js, regardless of
which version of @stripe/stripe-js you use. Updates for this package only
impact tooling around the loadStripe helper itself and the TypeScript type
definitions provided for Stripe.js. Updates do not affect runtime availability
of features of Stripe.js.
Use npm to install the Stripe.js module:
npm install @stripe/stripe-js
loadStripeThis function returns a Promise that resolves with a newly created Stripe
object once Stripe.js has loaded. It takes the same parameters passed when
directly
initializing a Stripe instance. If
necessary, it will load Stripe.js for you by inserting the Stripe.js script tag.
If you call loadStripe in a server environment it will resolve to null.
import {loadStripe} from '@stripe/stripe-js';
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
We’ve placed a random API key in this example. Replace it with your actual publishable API keys to test this code through your Stripe account.
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.
If you have deployed a Content Security Policy, make sure to include Stripe.js in your directives.
This package includes TypeScript declarations for Stripe.js. We support projects using TypeScript versions >= 3.1.
Some methods in Stripe.js accept and return objects from the
Stripe API. The type declarations in
@stripe/stripe-js for these objects in will always track the
latest version of the Stripe API. If
you would like to use these types but are using an older version of the Stripe
API, we recommend
updating to the latest version,
or ignoring and overriding the type definitions as necessary.
Note that we may release new minor and patch versions of
@stripe/stripe-js with small but backwards-incompatible fixes to the type
declarations. These changes will not affect Stripe.js itself.
To best leverage Stripe’s advanced fraud functionality, ensure that Stripe.js is loaded on every page, not just your checkout page. This allows Stripe to detect suspicious behavior that may be indicative of fraud as customers browse your website.
By default, this module will insert a <script> tag that loads Stripe.js from
https://js.stripe.com. This happens as a side effect immediately upon
importing this module. If you utilize code splitting or only include your
JavaScript app on your checkout page, the Stripe.js script will only be
available in parts of your site. To ensure Stripe.js is available everywhere,
you can perform either of the following steps:
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 inserted immediately upon page load.
import '@stripe/stripe-js';
Manually add the Stripe.js script tag to the <head> of each page on your site.
If an existing script tag is already present, this module will not insert a new
one. When you call loadStripe, it will use the existing script tag.
<!-- Somewhere in your site's <head> -->
<script src="https://js.stripe.com/v3" async></script>
loadStripe without side effectsIf you would like to use loadStripe in your application, but defer loading the
Stripe.js script until loadStripe is first called, use the alternative
@stripe/stripe-js/pure import module:
// CommonJS module import
const {loadStripe} = require('@stripe/stripe-js/pure');
// ES module import
import {loadStripe} from '@stripe/stripe-js/pure';
// Stripe.js will not be loaded until `loadStripe` is called
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
If you would like to
disable advanced fraud detection
altogether, use loadStripe.setLoadParameters:
// CommonJS module import
const {loadStripe} = require('@stripe/stripe-js/pure');
// ES module import
import {loadStripe} from '@stripe/stripe-js/pure';
loadStripe.setLoadParameters({advancedFraudSignals: false});
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
The loadStripe.setLoadParameters function is only available when importing
loadStripe from @stripe/stripe-js/pure.
FAQs
Stripe.js loading utility
The npm package @stripe/stripe-js receives a total of 1,320,969 weekly downloads. As such, @stripe/stripe-js popularity was classified as popular.
We found that @stripe/stripe-js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 18 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.