Vue Plugin For Stripe Checkout

Vue Plugin For Stripe Checkout

A Vue plugin for Stripe checkout on your web application.

Vue Stripe Checkout

Circle CI NPM Buy Me A Coffee donate button

⚠️ BREAKING CHANGES SINCE 1.2.x ⚠️

  1. done event now returns an object which contains the token and args object.
  • token - the object containing the checkout details.
  • args - the object containing the shipping and billing address if enabled.

Please see example for changes.

⚠️ BREAKING CHANGES SINCE 1.1.x ⚠️

  1. Initialization options now only accepts stripe publishable key. E.g. Vue.use(VueStripeCheckout, 'your-publishable-key-here').

  2. Global mixin $checkout was removed in favor of the component vue-stripe-checkout.


Shut up and clone my repo!

A Vue plugin for Stripe checkout. I sh*t you not, this plugin is the easiest to use.

Demo

Shut up and see the demo!

If you liked this repo then leave a :star:, if not, I don't care. (Seriously leave a :star: please)

Screen Shot

Install

NPM or Yarn

npm install vue-stripe-checkout --save

yarn add vue-stripe-checkout

CDN

https://unpkg.com/vue-stripe-checkout/build/vue-stripe-checkout.js

Usage

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

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

Just see the stripe docu for all of the available options.

Sample

<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>

Props

See property description from official Stripe Documentation

  • publishable-key: String
  • image: String
  • name: String
  • description: String
  • amount: Number
  • locale: String
  • zip-code: Boolean
  • billing-address: Boolean
  • currency: String
  • panelLabel: String
  • shipping-address: Boolean
  • email: String
  • allow-remember-me: Boolean
  • auto-open-modal: Boolean

Events

  • done - Emits an object containing the stripe token and args (an object containing the billing and shipping address if enabled).
  • opened - Called when the stripe checkout dialog has been opened.
  • closed - Called when the stripe checkout dialog has been closed after a successful transaction or when the x button was clicked.
  • canceled - Called when x button has been clicked.

Usage

<vue-stripe-checkout
  @done="done"
  @opened="opened"
  @closed="closed"
  @canceled="canceled"
></vue-stripe-checkout>

SPECIAL THANKS TO THE FOLLOWING SPONSOR(S):

MYCURE INC.

TEAM O.P.S. INC.

Made with :heart: by Jofferson Ramirez Tiquez

Github Repository

Tags: #VueJs