From 6d02bc2e1511c4cfe260d4ad54a70a4cfa3fb8fc Mon Sep 17 00:00:00 2001 From: Charles Fries Date: Tue, 24 Sep 2024 14:07:07 -0700 Subject: [PATCH 1/3] Install @stripe/stripe-js --- README.md | 4 ++-- index.js | 11 ----------- package.json | 1 + yarn.lock | 5 +++++ 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 5f61a5f..c5d26ba 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ If you can spare some time in helping maintain this addon, please let us know in Features ------------------------------------------------------------------------------ -- Inject `` into your application's `` +- 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()` @@ -90,7 +90,7 @@ ENV.stripe = { ### 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 = { diff --git a/index.js b/index.js index a8430fc..eaed618 100644 --- a/index.js +++ b/index.js @@ -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 ''; - } - }, }; diff --git a/package.json b/package.json index eaeb5e6..d42b84f 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/yarn.lock b/yarn.lock index cd1a2ed..63558c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" From ed687e675a6d1f1a35bddae5c7fd17997b2f0ad4 Mon Sep 17 00:00:00 2001 From: Charles Fries Date: Tue, 24 Sep 2024 14:25:44 -0700 Subject: [PATCH 2/3] Rm lazyLoad --- README.md | 68 ++++++++++++++----------------- addon/services/stripev3.js | 4 -- tests/dummy/config/environment.js | 1 - 3 files changed, 30 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index c5d26ba..76b8e33 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,36 @@ 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 `@stripe/stripe-js`. This is useful for testing. @@ -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 ------------------------------------------------------------------------------ diff --git a/addon/services/stripev3.js b/addon/services/stripev3.js index bee4755..4c38ebf 100644 --- a/addon/services/stripev3.js +++ b/addon/services/stripev3.js @@ -23,10 +23,6 @@ export default class StripeService extends Service { } } - get lazyLoad() { - return Boolean(this._config.lazyLoad); - } - get mock() { return Boolean(this._config.mock); } diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js index f7d67d8..a7498df 100644 --- a/tests/dummy/config/environment.js +++ b/tests/dummy/config/environment.js @@ -25,7 +25,6 @@ module.exports = function (environment) { }; ENV.stripe = { - lazyLoad: true, publishableKey: process.env.STRIPE_PUBLISHABLE_KEY || 'pk_thisIsATestKey', stripeOptions: { locale: 'en', From 44a8e2eff7cccc2c4ef678443664e241da45f765 Mon Sep 17 00:00:00 2001 From: Charles Fries Date: Tue, 24 Sep 2024 14:30:19 -0700 Subject: [PATCH 3/3] Rm configure method --- addon/services/stripev3.js | 28 +++++----------------------- 1 file changed, 5 insertions(+), 23 deletions(-) diff --git a/addon/services/stripev3.js b/addon/services/stripev3.js index 4c38ebf..16ca136 100644 --- a/addon/services/stripev3.js +++ b/addon/services/stripev3.js @@ -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; @@ -17,10 +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 mock() { @@ -48,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; } @@ -57,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) { @@ -79,7 +60,8 @@ export default class StripeService extends Service { ); } - this._stripe = new Stripe(publishableKey, stripeOptions); + this._stripe = await loadStripe(publishableKey, stripeOptions); + this._didLoad = true; } }