1
- # ES Module for Stripe.js
1
+ # Stripe.js ES Module
2
2
3
- Import and use [ Stripe.js] ( https://stripe.com/docs/stripe-js ) as an ES module.
4
- [ ![ npm version] ( https://img.shields.io/npm/v/@stripe/stripe-js.svg?style=flat-square )] ( https://www.npmjs.com/package/@stripe/stripe-js )
3
+ Use [ Stripe.js] ( https://stripe.com/docs/stripe-js ) as an ES module.
4
+
5
+ ** Note** : For compliance reasons, Stripe.js must be loaded directly from
6
+ ` https://js.stripe.com ` , and cannot be included in a bundle or hosted yourself.
7
+ This package wraps the global ` Stripe ` function provided by the Stripe.js
8
+ script as an ES module.
5
9
6
- Stripe.js cannot be bundled with your code; it must be served from
7
- ** https//js</span >.<span >stripe</span >.<span >com/v3** . This module wraps the
8
- global ` Stripe ` function provided by the Stripe.js script. If needed, it will
9
- inject the script for you and provide a loading wrapper.
10
+ [ ![ npm version] ( https://img.shields.io/npm/v/@stripe/stripe-js.svg?style=flat-square )] ( https://www.npmjs.com/package/@stripe/stripe-js )
10
11
11
12
## Usage
12
13
13
- ### ` Stripe() `
14
+ ### ` Stripe `
14
15
15
- To use the exported ` Stripe() ` function, first include the Stripe.js script on
16
+ To use the exported ` Stripe ` function, first include the Stripe.js script on
16
17
each page of your site.
17
18
18
19
``` html
19
20
<script src =" https://js.stripe.com/v3/" ></script >
20
21
```
21
22
22
- Then import and use Stripe.js as you would any other module. For more
23
- information on how to use Stripe.js, please refer to the
24
- [ Stripe.js API reference] ( https://stripe.com/docs/js ) or learn to
25
- [ accept a payment] ( https://stripe.com/docs/payments/accept-a-payment ) with
26
- Stripe.
23
+ Then import and use Stripe.js as you would any other module.
27
24
28
25
``` js
29
26
import {Stripe } from ' @stripe/stripe-js' ;
30
27
31
28
const stripe = Stripe (' pk_test_TYooMQauvdEDq54NiTphI7jx' );
32
29
```
33
30
34
- We‘ ve placed a random API key in the code . Replace it with your
35
- [ actual publishable API keys] ( https://dashboard.stripe.com/account/apikeys ) to
36
- test this code through your Stripe account.
31
+ We’ ve placed a random API key in this example . Replace it with your [ actual
32
+ publishable API keys] ( https://dashboard.stripe.com/account/apikeys ) to test
33
+ this code through your Stripe account.
37
34
38
- <br />
35
+ For more information on how to use Stripe.js, please refer to the [ Stripe.js
36
+ API reference] ( https://stripe.com/docs/js ) or learn to [ accept
37
+ a payment] ( https://stripe.com/docs/payments/accept-a-payment ) with Stripe.
39
38
40
- ### ` loadStripe() `
39
+ ### ` loadStripe `
41
40
42
- Use this function if you do not want to mess around with adding ` <script> ` tags,
43
- or want to speed up the initial load time on your site. It will inject the
44
- Stripe.js script tag for you and wait for it to load. For more information on
45
- how to use Stripe.js once it loads, please refer to the
46
- [ Stripe.js API reference] ( https://stripe.com/docs/js ) or learn to
47
- [ accept a payment] ( https://stripe.com/docs/payments/accept-a-payment ) with
48
- Stripe.
41
+ This function returns a ` Promise ` that resolves with a newly created ` Stripe `
42
+ object once Stripe.js has loaded. If necessary, it will load Stripe.js for you
43
+ by inserting the Stripe.js script tag.
49
44
50
45
``` js
51
46
import {loadStripe } from ' @stripe/stripe-js' ;
52
47
53
48
const stripe = await loadStripe (' pk_test_TYooMQauvdEDq54NiTphI7jx' );
54
49
```
55
50
56
- We‘ ve placed a random API key in the code . Replace it with your
57
- [ actual publishable API keys] ( https://dashboard.stripe.com/account/apikeys ) to
58
- test this code through your Stripe account.
51
+ We’ ve placed a random API key in this example . Replace it with your [ actual
52
+ publishable API keys] ( https://dashboard.stripe.com/account/apikeys ) to test
53
+ this code through your Stripe account.
59
54
60
- <br />
55
+ For more information on how to use Stripe.js once it loads, please refer to the
56
+ [ Stripe.js API reference] ( https://stripe.com/docs/js ) or learn to [ accept
57
+ a payment] ( https://stripe.com/docs/payments/accept-a-payment ) with Stripe.
61
58
62
59
## Ensuring Stripe.js is available everywhere
63
60
64
- To best leverage Stripe’s advanced fraud functionality, ensure that Stripe.js is
65
- loaded on every page, not just the checkout page. This allows Stripe to detect
66
- anomalous behavior that may be indicative of fraud as customers browse your
67
- website.
61
+ To best leverage Stripe’s advanced fraud functionality, ensure that Stripe.js
62
+ is loaded on every page, not just your checkout page. This allows Stripe to
63
+ detect anomalous behavior that may be indicative of fraud as customers browse
64
+ your website.
68
65
69
66
If you are adding the ` <script> ` tag manually, make sure you do so on every
70
- page. If you are relying on the script injection that this module provides, and
67
+ page. If you are relying on the script insertion that this module provides, and
71
68
you utilize code splitting or only include your JavaScript app on your checkout
72
69
page, you will need to take extra steps to ensure Stripe.js is available
73
70
everywhere.
@@ -76,25 +73,23 @@ everywhere.
76
73
77
74
Import ` @stripe/stripe-js ` as a side effect in code that will be included
78
75
throughout your site (e.g. your root module). This will make sure the Stripe.js
79
- script tag is injected right away .
76
+ script tag is inserted immediately upon page load .
80
77
81
78
``` js
82
79
import ' @stripe/stripe-js' ;
83
80
```
84
81
85
82
### Manually include the script tag
86
83
87
- 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 tha injecting a new
89
- one.
84
+ Manually add the Stripe.js script tag to the ` <head> ` of each page on your
85
+ site. If you use ` loadStripe ` , it will use this script tag rather than
86
+ inserting a new one.
90
87
91
88
``` html
92
89
<!-- Somewhere in your site's <head> -->
93
90
<script src =" https://js.stripe.com/v3" async ></script >
94
91
```
95
92
96
- <br />
97
-
98
93
## Stripe.js Documentation
99
94
100
95
- [ Stripe.js Docs] ( https://stripe.com/docs/stripe-js )
103
98
104
99
### Contributing
105
100
106
- If you would like to contribute to React Stripe.js, please make sure to read our
107
- [ contributor guidelines] ( CONTRIBUTING.md ) .
101
+ If you would like to contribute to React Stripe.js, please make sure to read
102
+ our [ contributor guidelines] ( CONTRIBUTING.md ) .
0 commit comments