https://github.com/vue-stripe/vue-stripe-checkout-nuxt-demo
A demo on how to implement vue-stripe-checkout in Nuxt.js
https://github.com/vue-stripe/vue-stripe-checkout-nuxt-demo
demo nuxt vue-stripe-checkout
Last synced: 2 months ago
JSON representation
A demo on how to implement vue-stripe-checkout in Nuxt.js
- Host: GitHub
- URL: https://github.com/vue-stripe/vue-stripe-checkout-nuxt-demo
- Owner: vue-stripe
- Created: 2020-09-23T13:06:08.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-22T14:38:32.000Z (almost 4 years ago)
- Last Synced: 2025-04-02T04:47:26.809Z (3 months ago)
- Topics: demo, nuxt, vue-stripe-checkout
- Language: Vue
- Size: 600 KB
- Stars: 41
- Watchers: 3
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Vue Stripe + Nuxt.js 💳
A demo on how to implement Vue Stripe in Nuxt.js. This guide is targeted to those who are already familiar with Nuxt.js. For further explanation of the Nuxt.js features, kindly visit their beautifully written documentation website.
## Contents
- [Demo](#demo) - For most updated demo go to https://vuestripe.com
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Build & Generate Logs](build-logs)
## Demo
- SPA Demo - https://vue-stripe-checkout-nuxt-demo.web.app
- SSR Demo - https://vue-stripe-checkout-nuxt-demo.herokuapp.com
## Installation
**Yarn**
`yarn add @vue-stripe/vue-stripe`
**NPM**
`npm install @vue-stripe/vue-stripe -S`
## Setup
### Step 1
Add your publishable key to the `.env` file.
*.env*
```bash
STRIPE_PK=
```
### Step 2
Register the new env in your `nuxt.config.js` under the `env` object.
*nuxt.config.js*
```javascript
export default {
// ... other config
env: {
STRIPE_PK: process.env.STRIPE_PK,
},
// ... other config
};
```
### Step 3
Create a `vue-stripe.js` plugin in `plugins/` folder.
*plugins/vue-stripe.js*
```javascript
import Vue from 'vue';
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default () => {
Vue.component('StripeCheckout', StripeCheckout);
};
```
So basically when this plugin is called, it just registers the `StripeCheckout` component globally.
Just inspect the `plugins/vue-stripe.js` file in this repository to see the additional implementation of Stripe Elements.
### Step 4
Register the new plugin in your `nuxt.config.js` under the `plugins` array.
*nuxt.config.js*
```javascript
export default {
// ... other config
plugins: [
{ src: '~/plugins/vue-stripe.js', ssr: false },
],
// ... other config
};
```
The most important part here is the `ssr` property. This will tell nuxt that this plugin will only be used in client side. Thus, eliminating the error `window is not defined`. See [VueStripeCheckout#issue#72](https://github.com/jofftiquez/vue-stripe-checkout/issues/72).
## Usage
After successfully setting up the env, and the plugin, you can now use `StripeCheckout` like a normal Vue component. Like so:
```html
Checkout
export default {
data () {
this.pk = process.env.STRIPE_PK;
return {
items: [
{
sku: 'sku_FdQKocNoVzznpJ',
quantity: 1,
},
],
successUrl: 'http://localhost:3000',
cancelUrl: 'http://localhost:3000',
};
},
methods: {
checkout () {
this.$refs.checkoutRef.redirectToCheckout();
},
},
};
```
## Build logs
**nuxt build**
**nuxt generate**
