From e520476637d1c6a30d29b72166f7c09f8b9cbdb4 Mon Sep 17 00:00:00 2001 From: David Weedon Date: Thu, 23 Jan 2020 09:56:47 -0600 Subject: [PATCH 1/3] remove sync Stripe wrapper --- README.md | 31 +++++++------------------------ src/index.js | 41 ++--------------------------------------- src/index.test.js | 42 ------------------------------------------ 3 files changed, 9 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index ed2742dd..f8f795d0 100644 --- a/README.md +++ b/README.md @@ -10,39 +10,22 @@ function provided by the Stripe.js script as an ES module. [![npm version](https://img.shields.io/npm/v/@stripe/stripe-js.svg?style=flat-square)](https://www.npmjs.com/package/@stripe/stripe-js) -## Usage - -### `Stripe` - -To use the exported `Stripe` function, first include the Stripe.js script on -each page of your site. - -```html - -``` +## Installation -Then import and use Stripe.js as you would any other module. - -```js -import {Stripe} from '@stripe/stripe-js'; +Use `npm` to install the Stripe.js module: -const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); +```sh +npm install @stripe/stripe-js ``` -We’ve placed a random API key in this example. Replace it with your -[actual publishable API keys](https://dashboard.stripe.com/account/apikeys) 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](https://stripe.com/docs/js) or learn to -[accept a payment](https://stripe.com/docs/payments/accept-a-payment) with -Stripe. +## Usage ### `loadStripe` This function returns a `Promise` that resolves with a newly created `Stripe` object once Stripe.js has loaded. If necessary, it will load Stripe.js for you -by inserting the Stripe.js script tag. +by inserting the Stripe.js script tag. If you call `loadStripe` in a server +environment it will resolve to `null`. ```js import {loadStripe} from '@stripe/stripe-js'; diff --git a/src/index.js b/src/index.js index 99820aca..88ebbaf5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,5 @@ const V3_URL = 'https://js.stripe.com/v3'; -let hasInjectedScript = false; - // Execute our own script injection after a tick to give users time to // do their own script injection. const stripePromise = Promise.resolve().then(() => { @@ -18,7 +16,6 @@ const stripePromise = Promise.resolve().then(() => { let script = document.querySelector(`script[src="${V3_URL}"]`); if (!script) { - hasInjectedScript = true; script = document.createElement('script'); script.src = V3_URL; @@ -48,41 +45,7 @@ const stripePromise = Promise.resolve().then(() => { }); }); -let hasCalledLoadStripe = false; -export const loadStripe = (...args) => { - hasCalledLoadStripe = true; - return stripePromise.then((maybeStripe) => +export const loadStripe = (...args) => + stripePromise.then((maybeStripe) => maybeStripe ? maybeStripe(...args) : null ); -}; - -const STRIPE_NOT_LOADED_ERROR_TEXT = `Stripe.js has not yet loaded. Instead of calling \`Stripe\` directly, try using the \`loadStripe\` utility from this package. - -See https://stripe.com/docs/js/including for more information. -`; - -const STRIPE_UNAVAILABLE_ERROR_TEXT = `window.Stripe is not defined. Did you include Stripe.js on your page? - -For compliance reasons, Stripe.js must be loaded directly from https://js.stripe.com, and cannot be included in a bundle or hosted yourself. This npm module exists as a convenience, but delegates to window.Stripe. - -You can load Stripe.js by using the \`loadStripe\` utility from this package, or by including the following - -See https://stripe.com/docs/js/including for more information. -`; - -const hasUserIncludedScript = () => - document.querySelector(`script[src="${V3_URL}"]`) && !hasInjectedScript; - -export const Stripe = (...args) => { - if (window && window.Stripe) { - return window.Stripe(...args); - } - - if (hasCalledLoadStripe || hasUserIncludedScript()) { - throw new Error(STRIPE_NOT_LOADED_ERROR_TEXT); - } - - throw new Error(STRIPE_UNAVAILABLE_ERROR_TEXT); -}; diff --git a/src/index.test.js b/src/index.test.js index 244e39b8..50dc51ba 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -96,46 +96,4 @@ describe('Stripe module loader', () => { }); }); }); - - describe('Stripe proxy', () => { - it('proxies to window.Stripe when present', () => { - const {Stripe} = require('./index'); - window.Stripe = jest.fn((key) => ({key})); - - expect(Stripe('pk_test_foo')).toEqual({key: 'pk_test_foo'}); - }); - - it('throws when Stripe.js has not yet loaded from a user injected script', () => { - const {Stripe} = require('./index'); - const script = document.createElement('script'); - script.src = 'https://js.stripe.com/v3'; - document.body.appendChild(script); - - expect(() => Stripe('pk_test_foo')).toThrow( - 'Stripe.js has not yet loaded.' - ); - }); - - it('throws when Stripe.js has not yet loaded after calling loadStripe', () => { - const {loadStripe, Stripe} = require('./index'); - - loadStripe(); - - expect(() => Stripe('pk_test_foo')).toThrow( - 'Stripe.js has not yet loaded.' - ); - }); - - it('throws when Stripe.js has not been included', () => { - const {Stripe} = require('./index'); - - return Promise.resolve(() => { - // Wait for next tick to validate this error is thrown - // even after our own script has been added. - expect(() => Stripe('pk_test_foo')).toThrow( - 'window.Stripe.js is not defined.' - ); - }); - }); - }); }); From 7182d6c2f516be0e946406b523b1f14ed03dc9c5 Mon Sep 17 00:00:00 2001 From: David Weedon Date: Thu, 23 Jan 2020 13:45:18 -0600 Subject: [PATCH 2/3] requested changed --- README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index f8f795d0..50c90dfa 100644 --- a/README.md +++ b/README.md @@ -49,11 +49,12 @@ loaded on every page, not just your 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 `