dogchef-be/nuxt-stripejs

💳 NuxtJS module for Stripe.js which loads only when required, multi-account support and w/ retry mechanism

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

1. Add nuxt-stripejs dependency to your project:

npm install nuxt-stripejs

2. Add nuxt-stripejs module and configuration to nuxt.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',
        },
      ],
    },
  }
}

3. (Optional) TypeScript support. Add nuxt-stripejs to the types section of tsconfig.json:

{
  "compilerOptions": {
    "types": ["nuxt-stripejs"]
  }
}

Options

accounts

• Type: NuxtStripeJsConfig

interface 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>

{
  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

License

See the LICENSE file for license rights and limitations (MIT).