/vue-stripe-checkout-nuxt-demo

A demo on how to implement vue-stripe-checkout in Nuxt.js

Primary LanguageVue

drawing

Vue Stripe Checkout + Nuxt.js 💳

A demo on how to implement vue-stripe-checkout 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

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

STRIPE_PK=<your-stripe-publishable-key>

Step 2

Register the new env in your nuxt.config.js under the env object.

nuxt.config.js

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

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 register the StripeCheckout component globally.

Step 4

Register the new plugin in your nuxt.config.js under the plugins array.

nuxt.config.js

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.

Usage

After successfully setting up the env, and the plugin, you can now use StripeCheckout like a normal Vue component. Like so:

<template lang="pug">
  div
    stripe-checkout(
      ref="checkoutRef"
      :pk="pk"
      :items="items"
      :successUrl="successUrl"
      :cancelUrl="cancelUrl"
    )
      template(slot="checkout-button")
        button(@click="checkout").text-none Checkout
</template>

<script>
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();
    },
  },
};
</script>

Build logs

nuxt build

nuxt generate