A vue plugin for Stripe checkout.
Clone or download
Latest commit d4b2566 Jan 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Added circleci Oct 24, 2018
build v1.2.5 Jan 18, 2019
dist v1.2.5 Jan 18, 2019
src Updates component naming scheme Jan 16, 2019
test Added test Oct 24, 2018
typings fixed typings to not throw error Jun 22, 2018
.gitignore Added build module using webpack Oct 9, 2017
README.md Fixed error in component props list Jan 11, 2019
_config.yml Set theme jekyll-theme-cayman Sep 27, 2017
index.html Lots o' changes Nov 24, 2018
index.js Fix index.js Nov 25, 2018
package.json 1.2.6 Jan 18, 2019
rollup.config.js Added rollup Mar 6, 2018
vue-stripe-checkout-logo.png Updated sample website Oct 17, 2017
webpack.config.js Changed entry Feb 16, 2018
yarn.lock Lots o' changes Nov 24, 2018

README.md

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 ⭐️, if not, I don't care. (Seriously leave a ⭐️ 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 ❤️ by Jofferson Ramirez Tiquez