nuxt-stripejs

NuxtJS module for Stripe.js

Table of contents

• Main features
• Setup
• Options
• Usage
• License

Main features

• Load Stripe.js only when required (once $stripe() is called)
• Reuse the same instance across all components
• Retry mechanism to bypass temporary network issues
• 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 {
  // ...other config options
  modules: ["nuxt-stripejs"];
  stripe: {
    publishableKey: 'pk_test_XXXXXXXXXXXXXXX',
  }
}

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

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

Options

publishableKey

• Type: String

Your Stripe's publishable key.

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)
  }
}

Stripe: JavaScript SDK documentation & reference

License

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