Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dogchef-be/nuxt-stripejs
💳 NuxtJS module for Stripe.js which loads only when required, multi-account support and w/ retry mechanism
https://github.com/dogchef-be/nuxt-stripejs
nuxt nuxt-module nuxtjs nuxtjs-ts nuxtjs-typescript stripe stripe-api stripe-elements stripejs typescript-support
Last synced: about 1 month ago
JSON representation
💳 NuxtJS module for Stripe.js which loads only when required, multi-account support and w/ retry mechanism
- Host: GitHub
- URL: https://github.com/dogchef-be/nuxt-stripejs
- Owner: dogchef-be
- License: mit
- Created: 2020-08-24T09:51:59.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-03T14:12:46.000Z (over 1 year ago)
- Last Synced: 2024-04-27T00:24:24.244Z (7 months ago)
- Topics: nuxt, nuxt-module, nuxtjs, nuxtjs-ts, nuxtjs-typescript, stripe, stripe-api, stripe-elements, stripejs, typescript-support
- Language: TypeScript
- Homepage:
- Size: 509 KB
- Stars: 19
- Watchers: 7
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
nuxt-stripejs
NuxtJS module for Stripe.js with multi-account support
## Table of contents
- [Main features](#main-features)
- [Setup](#setup)
- [Options](#options)
- [Usage](#usage)
- [License](#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:
```bash
npm install nuxt-stripejs
```
2. Add `nuxt-stripejs` module and configuration to `nuxt.config.js`:
```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`:
```json
{
"compilerOptions": {
"types": ["nuxt-stripejs"]
}
}
```
## Options
### `accounts`
- Type: `NuxtStripeJsConfig`
```ts
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](https://github.com/nuxt-community/i18n-module) integration.
## Usage
It can be used inside components like:
```html
```
```js
{
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:
```js
{
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](https://stripe.com/docs/js)
## License
See the LICENSE file for license rights and limitations (MIT).