Skip to content

Commit 36c5e67

Browse files
dweedon-stripedweedon-stripe
authored
Merge pull request stripe#1 from stripe/remove-sync-stripe-wrapper
Remove sync Stripe wrapper
2 parents a6f8ce3 + 423926b commit 36c5e67

File tree

3 files changed

+17
-112
lines changed

3 files changed

+17
-112
lines changed

‎README.md

+15-31
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,22 @@ provided by the Stripe.js script as an ES module.
1010

1111
[![npm version](https://img.shields.io/npm/v/@stripe/stripe-js.svg?style=flat-square)](https://www.npmjs.com/package/@stripe/stripe-js)
1212

13-
## Usage
14-
15-
### `Stripe`
16-
17-
To use the exported `Stripe` function, first include the Stripe.js script on
18-
each page of your site.
19-
20-
```html
21-
<script src="https://js.stripe.com/v3/"></script>
22-
```
13+
## Installation
2314

24-
Then import and use Stripe.js as you would any other module.
25-
26-
```js
27-
import {Stripe} from '@stripe/stripe-js';
15+
Use `npm` to install the Stripe.js module:
2816

29-
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
17+
```sh
18+
npm install @stripe/stripe-js
3019
```
3120

32-
We’ve placed a random API key in this example. Replace it with your
33-
[actual publishable API keys](https://dashboard.stripe.com/account/apikeys) to
34-
test this code through your Stripe account.
35-
36-
For more information on how to use Stripe.js, please refer to the
37-
[Stripe.js API reference](https://stripe.com/docs/js) or learn to
38-
[accept a payment](https://stripe.com/docs/payments/accept-a-payment) with
39-
Stripe.
21+
## Usage
4022

4123
### `loadStripe`
4224

4325
This function returns a `Promise` that resolves with a newly created `Stripe`
4426
object once Stripe.js has loaded. If necessary, it will load Stripe.js for you
45-
by inserting the Stripe.js script tag.
27+
by inserting the Stripe.js script tag. If you call `loadStripe` in a server
28+
environment it will resolve to `null`.
4629

4730
```js
4831
import {loadStripe} from '@stripe/stripe-js';
@@ -66,11 +49,12 @@ loaded on every page, not just your checkout page. This allows Stripe to detect
6649
anomalous behavior that may be indicative of fraud as customers browse your
6750
website.
6851

69-
If you are adding the `<script>` tag manually, make sure you do so on every
70-
page. If you are relying on the script insertion that this module provides, and
71-
you utilize code splitting or only include your JavaScript app on your checkout
72-
page, you will need to take extra steps to ensure Stripe.js is available
73-
everywhere.
52+
By default, this module will insert a `<script>` tag that loads Stripe.js from
53+
`https://js.stripe.com`. This happens as a side effect immediately upon
54+
importing this module. If you utilize code splitting or only include your
55+
JavaScript app on your checkout page, the Stripe.js script will only be
56+
available in parts of your site. To ensure Stripe.js is available everywhere,
57+
you can perform either of the following steps:
7458

7559
### Import as a side effect
7660

@@ -85,8 +69,8 @@ import '@stripe/stripe-js';
8569
### Manually include the script tag
8670

8771
Manually add the Stripe.js script tag to the `<head>` of each page on your site.
88-
If you use `loadStripe`, it will use this script tag rather than inserting a new
89-
one.
72+
If an existing script tag is already present, this module will not insert a new
73+
one. When you call `loadStripe`, it will use the existing script tag.
9074

9175
```html
9276
<!-- Somewhere in your site's <head> -->

‎src/index.js

+2-39
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
const V3_URL = 'https://js.stripe.com/v3';
22

3-
let hasInjectedScript = false;
4-
53
// Execute our own script injection after a tick to give users time to
64
// do their own script injection.
75
const stripePromise = Promise.resolve().then(() => {
@@ -18,7 +16,6 @@ const stripePromise = Promise.resolve().then(() => {
1816
let script = document.querySelector(`script[src="${V3_URL}"]`);
1917

2018
if (!script) {
21-
hasInjectedScript = true;
2219
script = document.createElement('script');
2320
script.src = V3_URL;
2421

@@ -48,41 +45,7 @@ const stripePromise = Promise.resolve().then(() => {
4845
});
4946
});
5047

51-
let hasCalledLoadStripe = false;
52-
export const loadStripe = (...args) => {
53-
hasCalledLoadStripe = true;
54-
return stripePromise.then((maybeStripe) =>
48+
export const loadStripe = (...args) =>
49+
stripePromise.then((maybeStripe) =>
5550
maybeStripe ? maybeStripe(...args) : null
5651
);
57-
};
58-
59-
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.
60-
61-
See https://stripe.com/docs/js/including for more information.
62-
`;
63-
64-
const STRIPE_UNAVAILABLE_ERROR_TEXT = `window.Stripe is not defined. Did you include Stripe.js on your page?
65-
66-
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.
67-
68-
You can load Stripe.js by using the \`loadStripe\` utility from this package, or by including the following <script> tag on your page:
69-
70-
<script src="${V3_URL}"></script>
71-
72-
See https://stripe.com/docs/js/including for more information.
73-
`;
74-
75-
const hasUserIncludedScript = () =>
76-
document.querySelector(`script[src="${V3_URL}"]`) && !hasInjectedScript;
77-
78-
export const Stripe = (...args) => {
79-
if (window && window.Stripe) {
80-
return window.Stripe(...args);
81-
}
82-
83-
if (hasCalledLoadStripe || hasUserIncludedScript()) {
84-
throw new Error(STRIPE_NOT_LOADED_ERROR_TEXT);
85-
}
86-
87-
throw new Error(STRIPE_UNAVAILABLE_ERROR_TEXT);
88-
};

‎src/index.test.js

-42
Original file line numberDiff line numberDiff line change
@@ -96,46 +96,4 @@ describe('Stripe module loader', () => {
9696
});
9797
});
9898
});
99-
100-
describe('Stripe proxy', () => {
101-
it('proxies to window.Stripe when present', () => {
102-
const {Stripe} = require('./index');
103-
window.Stripe = jest.fn((key) => ({key}));
104-
105-
expect(Stripe('pk_test_foo')).toEqual({key: 'pk_test_foo'});
106-
});
107-
108-
it('throws when Stripe.js has not yet loaded from a user injected script', () => {
109-
const {Stripe} = require('./index');
110-
const script = document.createElement('script');
111-
script.src = 'https://js.stripe.com/v3';
112-
document.body.appendChild(script);
113-
114-
expect(() => Stripe('pk_test_foo')).toThrow(
115-
'Stripe.js has not yet loaded.'
116-
);
117-
});
118-
119-
it('throws when Stripe.js has not yet loaded after calling loadStripe', () => {
120-
const {loadStripe, Stripe} = require('./index');
121-
122-
loadStripe();
123-
124-
expect(() => Stripe('pk_test_foo')).toThrow(
125-
'Stripe.js has not yet loaded.'
126-
);
127-
});
128-
129-
it('throws when Stripe.js has not been included', () => {
130-
const {Stripe} = require('./index');
131-
132-
return Promise.resolve(() => {
133-
// Wait for next tick to validate this error is thrown
134-
// even after our own script has been added.
135-
expect(() => Stripe('pk_test_foo')).toThrow(
136-
'window.Stripe.js is not defined.'
137-
);
138-
});
139-
});
140-
});
14199
});

0 commit comments

Comments
 (0)