Stripe.js Client Side Import

Question

Trying to follow Step 2 here, from within a React app: https://stripe.com/docs/connect/creating-a-payments-page?cancel=true#web-accept-payment

// Initialize Stripe.js with the same connected account ID used when creating
// the Checkout Session.
const stripe = Stripe('pk_test_s3JwCARtUtLnQGm4xlDx70Wt002kwkyJ8P', {
  stripeAccount: '{{CONNECTED_STRIPE_ACCOUNT_ID}}'
});

I’ve ran npm install @stripe/stripe-js already, but does anybody know how to import Stripe?

I’ve already tried:

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

but both fail with

Attempted import error: 'Stripe' is not exported from '@stripe/stripe-js'.

in the npm docs they suggest (https://www.npmjs.com/package/@stripe/stripe-js):

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

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

but this is clearly different to what they gave in the Stripe docs.

Also this fails for me with Uncaught (in promise) IntegrationError: Invalid value for Stripe(): apiKey should be a string. You specified: undefined. even though I’ve verified the value I supply is not undefined.

I’m not sure why they can’t include a proper import statement in their docs...but anyway, does anyone know how to fix this?

There is a doc for React App: stripe.com/docs/stripe-js/react that might help you — Adrien LAMOTTE

Nicholas Tower Nicholas Tower · Accepted Answer · 2021-03-27T13:54:21

in the npm docs they suggest (https://www.npmjs.com/package/@stripe/stripe-js):
import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
but this is clearly different to what they gave in the Stripe docs.

It's not different. It's just a helper function to do the same thing. The stripe docs would have you add a script tag to your document, like this:

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

That script tag will download stripe and add it to the global variable window.Stripe.

Calling loadStripe will create a <script> tag with the right properties, append it to the document, wait for it to load, call init passing in your api key, and then resolve the promise to the value in window.Stripe.

Stripe.js Client Side Import

1 Answers