Check out with Stripe using a Vue.js plugin

Vue Stripe Checkout

Stripe is a service for making payments for goods & services online. If you are looking to implement it in your project without much trouble try the Vue Stripe Checkout plugin.

Live Demo

You can integrate the Stripe Checkout plugin with ease and use the available options from the official Stripe docs along with your options.

Take a look at the example below.

Example

To start working with the Vue Stripe Checkout use the following command to install it.

npm install vue-stripe-checkout --save

OR

yarn add vue-stripe-checkout

as a global component

import VueStripeCheckout from 'vue-stripe-checkout'

// base/global options
// these options can be overridden 
// by the options in the .open(options) 
// function.
const options = {
  key: 'your-publishable-key',
  image: 'https://cdn.meme.am/images/100x100/15882140.jpg',
  locale: 'auto',
  currency: 'PHP',
  billingAddress: true,
  panelLabel: 'Subscribe {{amount}}'
}

Vue.use(VueStripeCheckout, options)

You can get a publishable key by Stripe just by signing up.

Checkout will be available in the vm or this if you are using single file template (*.vue files).

In a single file component

<template>
  <div>
    <button @click="checkout">Sell black matter gun</button>
  </div>
</template>

export default {
methods: {
    checkout () {
            // this.$checkout.close()
            // is also available.
            this.$checkout.open({
                    image: 'https://i.imgur.com/1PHlmFF.jpg',
                    locale: 'en',
                    currency: 'BZD',
                    name: 'Blips and Chitz!',
                    description: 'An entire afternoon at Blips and Chitz!',
                    amount: 9999999,
                    panelLabel: 'Play Roy for {{amount}}',
                    token: (token) => {
                            // handle the token
                    }
            })
    },
}
}

A Vue.js plugin for Stripe checkout, that's it! I sh@t you not, this plugin is the easiest to use. If you are interested in more info or you have any bugs and suggestions, click here.