npm

Need private packages and team management tools?Check out npm Orgs. »

vue-stripe-checkout

3.0.0-beta.11 • Public • Published

Vue Stripe Checkout 3 Beta

Welcome to the Vue Stripe Checkout 3 Beta! This version is still incomplete, but please let me know what's missing or what you're expecting from this version by creating an issue. Every feedback helps.

IMPORTANT

To be able to start using Stripe Checkout version 3, kindly follow these instructions first.

Table of Contents

Demo

Live Demo

Install Beta

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

Usage

Add the stripe js link in your index.html just before the </head> closing tag.

<script id="stripe-js" src="https://js.stripe.com/v3/" async></script>
import Vue from 'vue';
import VueStripeCheckout from 'vue-stripe-checkout';
Vue.use(VueStripeCheckout, {
  publishableKey: 'your-publishable-key'
});

Vue Stripe Checkout

Stripe's new Checkout.

Props

<template>
  <vue-stripe-checkout
    ref="checkoutRef"
    :items="items"
    :successUrl="successUrl"
    :cancelUrl="cancelUrl"
  >
    <template slot="checkout-button">
      <button @click="checkout">Shutup and take my money!</button>
    </template>
  </vue-stripe-checkout>
</template>
 
<script>
export default {
  data: () => ({
    loading: false,
    items: [
      {
        sku: 'sku_FdQKocNoVzznpJ', 
        quantity: 1
      }
    ],
    successUrl: 'your-success-url',
    cancelUrl: 'your-cancel-url',
  }),
  methods: {
    checkout () {
      this.$refs.checkoutRef.redirectToCheckout();
    }
  }
}
</script> 

Vue Stripe Elements

Create custom Stripe form using Stripe Elements.

Docs for additional Stripe Charge Object options like amount, description, currenct, etc.

<template>
  <vue-stripe-elements
    ref="elementsRef"
    @token="tokenCreated"
    @loading="loading = $event"
  >
  </vue-stripe-elements>
  <button @click="submit">Pay ${{amount / 100}}</button>
</template>
 
<script>
export default {
  data: () => ({
    loading: false,
    amount: 1000,
    token: null,
    charge: null
  }),
  methods: {
    submit () {
      this.$refs.elementsRef.submit();
    },
    tokenCreated (token) {
      this.token = token;
      // for additional charge objects go to https://stripe.com/docs/api/charges/object
      this.charge = {
        source: token.card,
        amount: this.amount,
        description: this.description
      }
      this.sendTokenToServer(this.charge);
    },
    sendTokenToServer (charge) {
      // Send to server
    }
  }
}
</script> 

FAQs

When the SKU items has been created, you can now use the vue-stripe-checkout component.

SPECIAL THANKS TO THE FOLLOWING SPONSOR(S):

MYCURE INC.

TEAM O.P.S. INC.

Made with ❤️ by Jofferson Ramirez Tiquez

install

npm i vue-stripe-checkout

Downloadsweekly downloads

1,418

version

3.0.0-beta.11

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability