React-stripe-elements: How to load https://js.stripe.com/v3/ only on pages that require it?

Created on 23 Sep 2017 · 7Comments · Source: stripe/react-stripe-elements

What is the best practice of loading the Stripe.js script only on those React routes (components) that actually need it? For example, I don't want to load it on the login screen of my application.

Source

parrker

👍4

Most helpful comment

I created a NPM module which handles it nicely Like this:

import React from 'react'
import StripeScriptLoader from 'react-stripe-script-loader'
import {
  StripeProvider,
  Elements,
  CardNumberElement,
} from 'react-stripe-elements'

const PageWithStripeElements = () => (
    <StripeScriptLoader
      uniqueId="myUniqueId"
      script="https://js.stripe.com/v3/"
      loader="Loading..."
    >
      <StripeProvider apiKey="stripeApiKey">
        <Elements>
          <CardNumberElement />
        </Elements>
      </StripeProvider>
    </StripeScriptLoader>
)

export default PageWithStripeElements

Github Repo

ozluy on 7 May 2019

👍11 ❤8 🎉8 🚀7

All 7 comments

In fact, the best practice is to load stripe.js on every page:

From https://stripe.com/docs/stripe.js#including-stripejs:

To best leverage Stripe’s advanced fraud functionality, include this script on every page on your site, not just the checkout page. This allows Stripe to detect anomalous behavior that may be indicative of fraud as users browse your website.

Stripe.js is architected to make this workflow as lightweight as possible. On page load, only a small outer shim script is loaded. Eventually (i.e., when you try to create an element and mount it), the outer shim will take care of loading the rest of the script. For reference, the outer shim is currently only ~20 KB (and we monitor that this size stays relatively constant).

Hope this helps!

jez on 25 Sep 2017

👎10 👍5 😕1

Late to the party, but though Jez is correct, if you still want to conditionally load the script, you can use this @parrker: https://github.com/nfl/react-helmet.

gregbrunk on 31 Jan 2018

I created a NPM module which handles it nicely Like this:

import React from 'react'
import StripeScriptLoader from 'react-stripe-script-loader'
import {
  StripeProvider,
  Elements,
  CardNumberElement,
} from 'react-stripe-elements'

const PageWithStripeElements = () => (
    <StripeScriptLoader
      uniqueId="myUniqueId"
      script="https://js.stripe.com/v3/"
      loader="Loading..."
    >
      <StripeProvider apiKey="stripeApiKey">
        <Elements>
          <CardNumberElement />
        </Elements>
      </StripeProvider>
    </StripeScriptLoader>
)

export default PageWithStripeElements

Github Repo

ozluy on 7 May 2019

👍11 ❤8 🎉8 🚀7

@ozluy That was a real life-saver! I spent almost 3-4 hours trying to get it work on my own. Your module just made it work out of the box. Thanks!

yasirlateef on 19 Sep 2019

In case you missed it, stripe released an alternative way to loading the js library
more details in here -> https://stripe.com/docs/stripe-js/react

KhaledMohamedP on 1 Oct 2020

👍2

The problem with async script loading technique, is that is not really testable (without brutally mocking the whole script loader module).

cloud-walker on 2 Nov 2020

In case you missed it, stripe released an alternative way to loading the js library
more details in here -> https://stripe.com/docs/stripe-js/react

Just wanted to say that this is the correct way to do it for anyone looking now. You no longer need to include the script, and can simply do something like:

import {loadStripe} from '@stripe/stripe-js';
const stripePromise = loadStripe('pk_test_JJ1eMdKN0Hp4UFJ6kWXWO4ix00jtXzq5XG');

const App = () => {
  return (
      <MyCheckoutForm />
  );
};