@chantouchsek/nuxt-stripe
NuxtJS module for Stripe.js
Table of contents
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
- Add
@chantouchsek/nuxt-stripedependency to your project:
npm install @chantouchsek/nuxt-stripe
- Add
@chantouchsek/nuxt-stripemodule and configuration tonuxt.config.js:
export default {
modules: [
// simple usage
'@chantouchsek/nuxt-stripe',
// with options
["@chantouchsek/nuxt-stripe", {
publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
version: '2020-08-27',
i18n: true,
}]
],
// .....option
stripe: {
publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
version: '2020-08-27',
i18n: true,
},
// runtime config
publicRuntimeConfig: {
stripe: {
publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
version: '2020-08-27',
i18n: true,
}
}
}
- (Optional) TypeScript support. Add
@chantouchsek/nuxt-stripeto thetypessection oftsconfig.json:
{
"compilerOptions": {
"types": [
"@nuxt/types",
"@chantouchsek/nuxt-stripe"
]
}
}
- (Optional), If you need to support change stripe locale base i18n locale changed, just create a file in
plugins/i18n.{js,ts}
import { Context, Inject } from '@nuxt/types/app'
import { getStripeInstance } from '@chantouchsek/nuxt-stripe'
import { CheckoutLocale, StripeElementLocale } from '@stripe/stripe-js'
export default function (ctx: Context, inject: Inject) {
const {app} = ctx
app.i18n.onLanguageSwitched = async (_, locale) => {
const stripeLocale = locale as StripeElementLocale | CheckoutLocale
const stripeInstance = await getStripeInstance(ctx, stripeLocale)
inject('stripe', stripeInstance)
ctx.app.stripe = stripeInstance
}
}
And call it in nuxt.config.{js,ts}
export default {
plugins: [
'~/plugins/i18n',
]
}
Options
publishableKey
- Type:
String
Your Stripe's publishable key.
version
- Type:
String
Your Stripe's version.
i18n
- Type:
Boolean - Default:
false
Enable i18n-module integration.
Usage
It can be used inside components like:
<template>
<div>
<div ref="stripeElements"/>
</div>
</template>
export default {
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).
15 Dec 3, 2022
128 Jan 7, 2023
25 Dec 15, 2022
3 Dec 13, 2022
8 Dec 16, 2022
10 Dec 24, 2022
50 Dec 26, 2022
39 Jan 5, 2023
3 Sep 22, 2022
2 Sep 25, 2022
5 Nov 8, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
57 Dec 28, 2022
271 Dec 20, 2021
15 Dec 27, 2022
1 Feb 13, 2022