Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: replace script tag with Stripe.js package, default to lazy load #50

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat!: replace script tag with Stripe.js package, default to lazy load #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d02bc2
Install @stripe/stripe-js
charlesfries Sep 24, 2024
ed687e6
Rm lazyLoad
charlesfries Sep 24, 2024
44a8e2e
Rm configure method
charlesfries Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 32 additions & 40 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ If you can spare some time in helping maintain this addon, please let us know in
Features
------------------------------------------------------------------------------

- Inject `<script src="https://js.stripe.com/v3/"></script>` into your application's `<body>`
- Install `@stripe/stripe-js`
- Initialize `Stripe` with your publishable key
- Inject a `stripev3` service into your controllers so you can use the functions usually available on the `stripe` object (see https://stripe.com/docs/stripe-js/reference#the-stripe-object):
- `stripe.elements()`
Expand Down Expand Up @@ -88,9 +88,39 @@ ENV.stripe = {
};
```

### Loading Stripe

Stripe.js will not be loaded until you call the `load()` function on the service. It's best to call this function in a route's `beforeModel` hook.

```js
// subscription page route

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class SubscriptionRoute extends Route {
@service('stripev3') stripe;

beforeModel() {
return this.stripe.load();
}
}
```

Note that the `load` function returns a `Promise`. By returning this promise you ensure that Stripe is fully loaded before the route procedes to the next `model` hook.

You can also pass `publishableKey` and optional `stripeOptions` to the `load` function.

```js
this.stripe.load('pk_thisIsATestKey', {
locale: 'en',
stripeAccount: 'acct_24BFMpJ1svR5A89k',
});
```

### Mocking the Stripe API

You can configure the Stripe API to be mocked instead of loaded from `https://js.stripe.com/v3/`. This is useful for testing.
You can configure the Stripe API to be mocked instead of loaded from `@stripe/stripe-js`. This is useful for testing.

```js
ENV.stripe = {
Expand Down Expand Up @@ -151,44 +181,6 @@ module('...', function (hooks) {
});
```

### Lazy loading

You can configure Stripe.js to lazy load when you need it.

```js
ENV.stripe = {
lazyLoad: true,
};
```

When enabled, Stripe.js will not be loaded until you call the `load()` function on the service. It's best to call this function in a route's `beforeModel` hook.

```js
// subscription page route

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class SubscriptionRoute extends Route {
@service('stripev3') stripe;

beforeModel() {
return this.stripe.load();
}
}
```

Note that the `load` function returns a `Promise`. By returning this promise you ensure that Stripe is fully loaded before the route procedes to the next `model` hook.

You can also pass `publishableKey` and optional `stripeOptions` to the `load` function.

```js
this.stripe.load('pk_thisIsATestKey', {
locale: 'en',
stripeAccount: 'acct_24BFMpJ1svR5A89k',
});
```


Components
------------------------------------------------------------------------------
Expand Down
32 changes: 5 additions & 27 deletions addon/services/stripev3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
/* global Stripe */
import Service from '@ember/service';
import { getOwner } from '@ember/application';
import { resolve } from 'rsvp';
import loadScript from '@adopted-ember-addons/ember-stripe-elements/utils/load-script';
import { A } from '@ember/array';
import { assert } from '@ember/debug';
import { loadStripe } from '@stripe/stripe-js';

export default class StripeService extends Service {
_config = null;
Expand All @@ -17,14 +15,6 @@ export default class StripeService extends Service {
const config =
getOwner(this).resolveRegistration('config:environment') || {};
this._config = config.stripe || {};

if (!this.lazyLoad) {
this.configure();
}
}

get lazyLoad() {
return Boolean(this._config.lazyLoad);
}

get mock() {
Expand Down Expand Up @@ -52,7 +42,7 @@ export default class StripeService extends Service {
return this._stripe;
}

load(publishableKey = null, stripeOptions = null) {
async load(publishableKey = null, stripeOptions = null) {
if (publishableKey) {
this.publishableKey = publishableKey;
}
Expand All @@ -61,20 +51,7 @@ export default class StripeService extends Service {
this.stripeOptions = stripeOptions;
}

let { lazyLoad, mock } = this;
let shouldLoad = lazyLoad && !mock;
let doLoad = shouldLoad
? loadScript('https://js.stripe.com/v3/')
: resolve();

return doLoad.then(() => {
this.configure();
this._didLoad = true;
});
}

configure() {
if (!this._stripe) {
if (!this.mock && !this._stripe) {
let { publishableKey, stripeOptions } = this;

if (!publishableKey) {
Expand All @@ -83,7 +60,8 @@ export default class StripeService extends Service {
);
}

this._stripe = new Stripe(publishableKey, stripeOptions);
this._stripe = await loadStripe(publishableKey, stripeOptions);
this._didLoad = true;
}
}

Expand Down
11 changes: 0 additions & 11 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,4 @@

module.exports = {
name: '@adopted-ember-addons/ember-stripe-elements',

contentFor(type, config) {
let stripeConfig = config.stripe || {};

var lazyLoad = stripeConfig.lazyLoad;
var mock = stripeConfig.mock;

if (type === 'body' && !lazyLoad && !mock) {
return '<script type="text/javascript" src="https://js.stripe.com/v3/"></script>';
}
},
};
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"test:ember-compatibility": "ember try:each"
},
"dependencies": {
"@stripe/stripe-js": "^4.5.0",
"ember-cli-babel": "^7.26.11",
"ember-cli-htmlbars": "^6.0.1"
},
Expand Down
1 change: 0 additions & 1 deletion tests/dummy/config/environment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ module.exports = function (environment) {
};

ENV.stripe = {
lazyLoad: true,
publishableKey: process.env.STRIPE_PUBLISHABLE_KEY || 'pk_thisIsATestKey',
stripeOptions: {
locale: 'en',
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1670,6 +1670,11 @@
resolved "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz"
integrity sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==

"@stripe/stripe-js@^4.5.0":
version "4.5.0"
resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-4.5.0.tgz#0beda9beefc05143ef6955d7bb7960064aecc53c"
integrity sha512-dMOzc58AOlsF20nYM/avzV8RFhO/vgYTY7ajLMH6mjlnZysnOHZxsECQvjEmL8Q/ukPwHkOnxSPW/QGCCnp7XA==

"@szmarczak/http-timer@^1.1.2":
version "1.1.2"
resolved "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz"
Expand Down
Loading