Notoriously Punctual Manatee
    Have ideas to improve npm?Join in the discussion! »

    @stripe/stripe-js
    TypeScript icon, indicating that this package has built-in type declarations

    1.13.2 • Public • Published

    Stripe.js ES Module

    Use Stripe.js as an 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.

    npm version

    Installation

    Use npm to install the Stripe.js module:

    npm install @stripe/stripe-js

    Usage

    loadStripe

    This 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.

    TypeScript support

    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.

    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 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 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 inserted immediately upon page load.

    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 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>

    Importing loadStripe without side effects

    If 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 path:

    import {loadStripe} from '@stripe/stripe-js/pure';
    
    // Stripe.js will not be loaded until `loadStripe` is called
    const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

    Disabling advanced fraud detection signals

    If you would like to disable advanced fraud detection altogether, use loadStripe.setLoadParameters:

    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.

    Stripe.js Documentation

    Install

    npm i @stripe/stripe-js

    DownloadsWeekly Downloads

    483,122

    Version

    1.13.2

    License

    MIT

    Unpacked Size

    270 kB

    Total Files

    53

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar