diff --git a/.eslintrc.yml b/.eslintrc.yml index d3ed039e..6151faf4 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -23,3 +23,4 @@ rules: - ignoreRestSiblings: true jest/no-disabled-tests: 2 jest/no-focused-tests: 2 + import/prefer-default-export: 0 diff --git a/README.md b/README.md index f12e9d6b..9427c5ed 100644 --- a/README.md +++ b/README.md @@ -4,15 +4,15 @@ Import and use [Stripe.js](https://stripe.com/docs/stripe-js) as an ES module. [![build status](https://img.shields.io/travis/stripe/stripe-js/master.svg?style=flat-square)](https://travis-ci.org/stripe/stripe-js) [![npm version](https://img.shields.io/npm/v/@stripe/stripe-js.svg?style=flat-square)](https://www.npmjs.com/package/@stripe/stripe-js) -This project is a thin loading wraper around Stripe.js. Stripe.js cannot be -bundled with your code; it must be served from `https://js.stripe.com/v3`. This -module works by injecting the script for you. +Stripe.js cannot be bundled with your code; it must be served from +`https://js.stripe.com/v3`. This module injects the script for you and provides +a thin loading wraper around Stripe.js. ## Basic Usage -`Stripe` cannot be imported directly because the injected Stripe.js script loads -asynchronously. Use `loadStripe`, which will resolve once the Stripe.js script -is loaded. +`Stripe` cannot be imported directly because the injected Stripe.js script will +load asynchronously. Use `loadStripe`, which will resolve once the Stripe.js +script is loaded. ```js import {loadStripe} from '@stripe/stripe-js'; @@ -27,38 +27,34 @@ test this code through your Stripe account. ## Ensuring Stripe.js is available everywhere -When imported, the Stripe.js module will asynchronously inject a script tag as a -side effect. To reduce fraud and costly chargebacks, make sure this script tag -is injected on every page. If you are utilizing code splitting, or if you do not +When imported, the Stripe.js module will inject an async script tag as a side +effect. To reduce fraud and costly chargebacks, make sure this script tag is +present on every page. If you are utilizing code splitting, or if you do not include the code that imports `@stripe/stripe-js` on every page of your site, then you will need to take extra steps to ensure Stripe.js is avaiable everwhere. -### Code Splitting +### Import as a side effect -When using code splitting, import `@stripe/stripe-js` in your root module even -if you do not need to use Stripe.js there. This will make sure the Stripe.js +Import `@stripe/stripe-js` as a side effect in code that will be included +throughout your site (e.g. your root module). This will make sure the Stripe.js script tag is injected right away. ```js -// Somewhere near the top of your root module import '@stripe/stripe-js'; ``` -### Server rendered and static sites +### Manually include the script tag -If the code that imports `@stripe/stripe-js` is only included on part of your -site, ensure that Stripe.js loads on all pages by manually adding the Stripe.js -script tag to the `` of your site. +Ensure that Stripe.js loads on all pages by manually adding the Stripe.js script +tag to the `` of your site. When `loadStripe()` is called it will use the +existing script tag rather than injecting a new one. ```html ``` -The part of your site that calls `loadStripe()` will use the existing script tag -rather than injecting a new one. - ## Stripe.js Documentation - [Stripe.js Docs](https://stripe.com/docs/stripe-js) diff --git a/examples/parcel/src/index.js b/examples/parcel/src/index.js index 180d16c4..32689c9b 100644 --- a/examples/parcel/src/index.js +++ b/examples/parcel/src/index.js @@ -1,5 +1,5 @@ import './styles.css'; -import loadStripe from '../../../src'; +import {loadStripe} from '../../../src'; (async () => { // setup DOM diff --git a/examples/rollup/src/index.js b/examples/rollup/src/index.js index 205abecd..339931f7 100644 --- a/examples/rollup/src/index.js +++ b/examples/rollup/src/index.js @@ -1,4 +1,4 @@ -import loadStripe from '../../../src'; +import {loadStripe} from '../../../src'; (async () => { // setup DOM diff --git a/examples/webpack/src/index.js b/examples/webpack/src/index.js index 180d16c4..32689c9b 100644 --- a/examples/webpack/src/index.js +++ b/examples/webpack/src/index.js @@ -1,5 +1,5 @@ import './styles.css'; -import loadStripe from '../../../src'; +import {loadStripe} from '../../../src'; (async () => { // setup DOM diff --git a/src/index.js b/src/index.js index 7d6fee0c..8d858319 100644 --- a/src/index.js +++ b/src/index.js @@ -46,6 +46,4 @@ const stripePromise = new Promise((resolve, reject) => { }); }); -const loadStripe = () => stripePromise; - -export default loadStripe; +export const loadStripe = () => stripePromise;