Nuxt-stripejs NPM

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-stripejs dependency to your project:

npm install nuxt-stripejs

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',
        },
      ],
    },
  }
}

(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