Stripe Checkout is an embeddable payment form for desktop, tablet, and mobile devices. It works within your site—customers can pay instantly, without being redirected away to complete the transaction.

https://stripe.com/payments/checkout

Surely Stripe Checkout is one of the easiest payment checkout libraries out there. And it is even easier to use in Vue.js with the help of Vue Stripe Checkout, a custom Vue.js plugin specially made for implementing Stripe Checkout to your Vue.js app.

Live Demo

See demo here

Installation

You can install Vue Stripe Checkout via npm or  yarn.

npm install vue-stripe-checkout
yarn add vue-stripe-checkout

Usage

In your main.js

import Vue from 'vue';
import VueStripeCheckout from 'vue-stripe-checkout';

Vue.use(VueStripeCheckout, 'your-publishable-key-here');

Then, in you checkout component.

<template>
  <div>
    <vue-stripe-checkout
      ref="checkoutRef"
      :image="image"
      :name="name"
      :description="description"
      :currency="currency"
      :amount="amount"
      :allow-remember-me="false"
      @done="done"
      @opened="opened"
      @closed="closed"
      @canceled="canceled"
    ></vue-stripe-checkout>
    <button @click="checkout">Checkout</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: 'https://i.imgur.com/HhqxVCW.jpg',
      name: 'Shut up and take my money!',
      description: 'Cats are the best dog!',
      currency: 'PHP',
      amount: 99999
    }
  },
  methods: {
    async checkout () {
      // token - is the token object
      // args - is an object containing the billing and shipping address if enabled
      const { token, args } = await this.$refs.checkoutRef.open();
    },
    done ({token, args}) {
      // token - is the token object
      // args - is an object containing the billing and shipping address if enabled
      // do stuff...
    },
    opened () {
      // do stuff 
    },
    closed () {
      // do stuff 
    },
    canceled () {
      // do stuff 
    }
  }
}
</script>

The example above has a button to show the checkout dialog.

With just a few lines of code we were able to add a Stripe Checkout to Vue.js. You can also use all of the Stripe Checkout options available in the Stripe's official documentation.

That's all. Thank you!