NuxtJS module for Stripe.js with multi-account support
- Support multiple Stripe accounts
- Load Stripe.js only when required (once
$stripe()is called) - Reuse the same instance across all components
- Retry mechanism to bypass temporary network issues
- Public runtime config
- TypeScript support
- Add
nuxt-stripejsdependency to your project:
npm install nuxt-stripejs- Add
nuxt-stripejsmodule and configuration tonuxt.config.js:
export default {
// append the module
modules: ["nuxt-stripejs"];
// public runtime config
publicRuntimeConfig: {
stripe: {
i18n: true,
accounts: [
{
id: 'account-a',
pubKey: 'pk_test_123',
},
{
id: 'account-b',
pubKey: 'pk_test_12345',
},
],
},
}
}- (Optional) TypeScript support. Add
nuxt-stripejsto thetypessection oftsconfig.json:
{
"compilerOptions": {
"types": ["nuxt-stripejs"]
}
}- Type:
NuxtStripeJsConfig
interface NuxtStripeJsAccount {
id: string
pubKey: string
}
interface NuxtStripeJsConfig {
i18n: boolean;
accounts: NuxtStripeJsAccount[]
}Stripe accounts (see an example in setup)
- Type:
Boolean - Default:
false
Enable i18n-module integration.
It can be used inside components like:
<template>
<div>
<div ref="stripeElements" />
</div>
</template>{
async mounted() {
const stripe = await this.$stripe()
const elements = stripe.elements()
const card = elements.create('card')
card.mount(this.$refs.stripeElements)
}
}Multiple stripe accounts support:
{
async mounted() {
const stripe = await this.$stripe(conditionX ? 'account-a' : 'account-b')
const elements = stripe.elements()
const card = elements.create('card')
card.mount(this.$refs.stripeElements)
}
}Stripe: JavaScript SDK documentation & reference
See the LICENSE file for license rights and limitations (MIT).