Vue Plugin for Stripe Checkout

Vue Plugin for Stripe Checkout

Welcome to the Vue Stripe Checkout 3!This project is now available in Open Collective. I would really appreciate if you guys would check it out. Also, if you like this project kindly give it a star, or consider following me on GitHub. Thanks

Vue Stripe Checkout 💳

Welcome to the Vue Stripe Checkout 3!

This project is now available in Open Collective. I would really appreciate if you guys would check it out. Also, if you like this project kindly give it a star, or consider following me on GitHub. Thanks! ❤️

Screen Shot This screenshot is an example of Stripe Checkout

LEGACY

Old version (version 2) is still available here.

Nuxt Demo

Demo

Live Demo

Install

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

Vue Stripe Checkout

Stripe's new Checkout.

Props

See Checkout documentation.

<template>
  <stripe-checkout
    ref="checkoutRef"
    :pk="publishableKey"
    :items="items"
    :successUrl="successUrl"
    :cancelUrl="cancelUrl"
  >
    <template slot="checkout-button">
      <button @click="checkout">Shut up and take my money!</button>
    </template>
  </stripe-checkout>
</template>

<script>
import { StripeCheckout } from 'vue-stripe-checkout';
export default {
  components: {
    StripeCheckout
  },
  data: () => ({
    loading: false,
    publishableKey: process.env.PUBLISHABLE_KEY,
    items: [
      {
        sku: 'sku_FdQKocNoVzznpJ', 
        quantity: 1
      }
    ],
    successUrl: 'your-success-url',
    cancelUrl: 'your-cancel-url',
  }),
  methods: {
    checkout () {
      this.$refs.checkoutRef.redirectToCheckout();
    }
  }
}
</script>

Vue Stripe Elements

Elements options.

Props Description
stripeAccount For usage with Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account.
apiVersion Override your account's API version.
locale A locale used to globally configure localization in Stripe. Setting the locale here will localize error strings for all Stripe.js methods. It will also configure the locale for Elements and Checkout. Default is auto (Stripe detects the locale of the browser).
styleObject The custom style object
Slots Description
card-element Slot for mounting custom elements. See
card-errors Slot for mounting custom errors

Create custom Stripe form using Stripe Elements.

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

<template>
  <div>
    <stripe-elements
      ref="elementsRef"
      :pk="publishableKey"
      :amount="amount"
      locale="de"
      @token="tokenCreated"
      @loading="loading = $event"
    >
    </stripe-elements>
    <button @click="submit">Pay ${{amount / 100}}</button>
  </div>
</template>

<script>
import { StripeElements } from 'vue-stripe-checkout';
export default {
  components: {
    StripeElements
  },
  data: () => ({
    loading: false,
    amount: 1000,
    publishableKey: process.env.PUBLISHABLE_KEY, 
    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.id,
        amount: this.amount, // the amount you want to charge the customer in cents. $100 is 1000 (it is strongly recommended you use a product id and quantity and get calculate this on the backend to avoid people manipulating the cost)
        description: this.description // optional description that will show up on stripe when looking at payments
      }
      this.sendTokenToServer(this.charge);
    },
    sendTokenToServer (charge) {
      // Send to charge to your backend server to be processed
      // Documentation here: https://stripe.com/docs/api/charges/create

    }
  }
}
</script>

Stripe Sessions

This section is only more of a description of how the session flow should go.

The flow: Client -> Backend -> Client for checkout use.

  1. On the client side, prepare all the items, or subscription that the user wants to pay.
  2. Send these information to your backend to create a stripe session. See doc.
  3. Return the session id you just created to the client.
  4. Use that session id from your backend and pass it to stripe-checkout, like so:
<stripe-checkout
  ref="sessionRef"
  :pk="publishableKey"
  :session-id="sessionId"
>
  <template slot="checkout-button">
    <v-btn 
      @click="$refs.sessionRef.redirectToCheckout()"
      color="#42b883"
      large
      dark
    >Subscribe</v-btn>
  </template>
</stripe-checkout>

You'll notice that when using sessions, you'll only need the session-id. This is because the session is the representation of all of the information about the payment to done.

FAQs

Change Log

3.5.12

  • Add support for Latin America Spanish locale

Demos & Examples

When the SKU items has been created, you can now use the vue-stripe-checkout component to create a client-only one-time payment.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

SPECIAL THANKS TO THE FOLLOWING SPONSOR(S):

Made with ❤️ by Jofferson Ramirez Tiquez

Download Details:

Author: jofftiquez

Demo: https://jofftiquez.github.io/vue-stripe-checkout/

Source Code: https://github.com/jofftiquez/vue-stripe-checkout

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.