diff --git a/README.md b/README.md index 86a2b72..df0c6c5 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ STRIPE_PK= ### Step 2 -Register the new env in your `nuxt.config.js` under the `env` object. +Register the new env in your `nuxt.config.js` under the `env` or `runtime config` object. *nuxt.config.js* ```javascript @@ -53,6 +53,19 @@ export default { }; ``` +or + +*nuxt.config.js* +```javascript +export default { + // ... other config + publicRuntimeConfig: { + stripePK: process.env.STRIPE_PK, + }, + // ... other config +}; +``` + ### Step 3 Create a `vue-stripe.js` plugin in `plugins/` folder. @@ -62,9 +75,7 @@ Create a `vue-stripe.js` plugin in `plugins/` folder. import Vue from 'vue'; import { StripeCheckout } from '@vue-stripe/vue-stripe'; -export default () => { - Vue.component('StripeCheckout', StripeCheckout); -}; +Vue.component('StripeCheckout', StripeCheckout); ``` So basically when this plugin is called, it just registers the `StripeCheckout` component globally. @@ -92,6 +103,7 @@ The most important part here is the `ssr` property. This will tell nuxt that thi After successfully setting up the env, and the plugin, you can now use `StripeCheckout` like a normal Vue component. Like so: +Using SKU API (to be replaced by Price API, see https://github.com/stripe/stripe-payments-demo/issues/155) ```html