nuxt-stripejs
NuxtJS module for Stripe.js with multi-account support
Table of contents
- Main features
- Setup
- Options
- Usage
- License
Main features
- 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
Setup
- 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',
},
],
},
}
}
// 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"]
}
}
"compilerOptions": {
"types": ["nuxt-stripejs"]
}
}
Options
accounts
- Type:
NuxtStripeJsConfig
interface NuxtStripeJsAccount {
id: string
pubKey: string
}
interface NuxtStripeJsConfig {
i18n: boolean;
accounts: NuxtStripeJsAccount[]
}
id: string
pubKey: string
}
interface NuxtStripeJsConfig {
i18n: boolean;
accounts: NuxtStripeJsAccount[]
}
Stripe accounts (see an example in setup)
i18n
- Type:
Boolean - Default:
false
Enable i18n-module integration.
Usage
It can be used inside components like:
<template>
<div>
<div ref="stripeElements" />
div>
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)
}
}
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)
}
}
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
License
See the LICENSE file for license rights and limitations (MIT).