/nuxt-stripejs

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

Primary LanguageTypeScriptMIT LicenseMIT

nuxt-stripejs

NuxtJS module for Stripe.js with multi-account support

Table of contents

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
  1. 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',
        },
      ],
    },
  }
}
  1. (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).