diff --git a/README.md b/README.md index ed2742dd..0eca102c 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'; @@ -66,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 ` - -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.' - ); - }); - }); - }); });