A vue plugin for Stripe checkout.

Overview

Vue Stripe Checkout

npm bundle size npm GitHub Workflow Status saythanks

Welcome to the Vue Stripe Checkout 3! 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.

Screen Shot

LEGACY

Old version (version 2) is still available here.

Table of Contents

Demo

Live Demo

Install

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

Vue Stripe Checkout

Stripe's new Checkout.

Props

<template>
  <stripe-checkout
    ref="checkoutRef"
    :pk="publishableKey"
    :items="items"
    :successUrl="successUrl"
    :cancelUrl="cancelUrl"
  >
    <template slot="checkout-button">
      <button @click="checkout">Shutup 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

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"
      @token="tokenCreated"
      @loading="loading = $event"
    >
    </stripe-elements>
    <button @click="submit">Pay ${{amount / 100}}</button>
  </div>
</template>

<script>
export default {
  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.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 to create a client-only one-time payment.

SPECIAL THANKS TO THE FOLLOWING SPONSOR(S):

Made with ❤️ by Jofferson Ramirez Tiquez

You might also like...
A feature-rich Portal Plugin for Vue 2, for rendering DOM outside of a component, anywhere in your app or the entire document.
A feature-rich Portal Plugin for Vue 2, for rendering DOM outside of a component, anywhere in your app or the entire document.

PortalVue A Portal Component for Vuejs, to render DOM outside of a component, anywhere in the document. For more detailed documentation and additional

Vue-quasar-template - Initial template of an app using vuejs and quasar-ui plugin

vue-template Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Li

A lightweight fully fledged Vue.js sprite-sheet animation render engine in a compact SFC plugin format
A lightweight fully fledged Vue.js sprite-sheet animation render engine in a compact SFC plugin format

A lightweight fully fledged Vuejs sprite-sheet animation render engine in a compact SFC plugin format

seikatsu nft website. built with vue deployed with firebase. includes a metamask plugin extension injects the Ethereum web3 API into every website's javascript context, so this dapp can read from the blockchain
seikatsu nft website. built with vue deployed with firebase. includes a metamask plugin extension injects the Ethereum web3 API into every website's javascript context, so this dapp can read from the blockchain

seikatsu nft website. built with vue deployed with firebase. includes a metamask plugin extension injects the Ethereum web3 API into every website's javascript context, so this dapp can read from the blockchain

A Vue Plugin for Paystack payment gateway
A Vue Plugin for Paystack payment gateway

A Vue Plugin for Paystack payment gateway

数蛙DG-IoT平台行业应用扩展插件 DG-IoT for application plugin
数蛙DG-IoT平台行业应用扩展插件 DG-IoT for application plugin

dgiot_dashboard dgiot Front framemaker 简体中文 | English Related source code address project source code Source code platform Source address github https

Todo plugin for Zuri Chat

ZURI.CHAT TODO PLUGIN Stack Laravel and VueJs To install dependencies You need to composer installed, after installing composer composer install whi

LNbits rewritten in Go with a simple and permissionless Lua-based plugin framework.
LNbits rewritten in Go with a simple and permissionless Lua-based plugin framework.

LNbits Infinity (BETA) Free Open-Source Lightning Accounts System with Extensions For the Python version of LNbits checkout Legend. Demo servers avail

Editable demo and code plugin for vuepress
Editable demo and code plugin for vuepress

The plugin is used to help you add vue examples when writing a document. Using this plugin, your users can easily modify your examples. With the editable functions your user can understand your example better.

Stripe payment module for Vue Storefront

Stripe Payment module for Vue Storefront Stripe Payment extension for vue-storefront, by Develo Design. Installation By hand (preferred): git clone ht

Develo 26 Nov 28, 2022
A sample shop built with Nuxt, Stripe, Firebase and Serverless Functions

buefy-shop Demo production - dev Inspired by sample-vue-shop Serverless lambda function used for stripe Build Setup # install dependencies $ yarn inst

null 246 Oct 20, 2022
Loading wrapper for Stripe.js

Stripe.js ES Module Use Stripe.js as an ES module. Note: To be PCI compliant, you must load Stripe.js directly from https://js.stripe.com. You cannot

Stripe 447 Jan 6, 2023
Nuxt-Ecommerce - Ecommerce Store with Netlify Functions and Stripe

?? Ecommerce Store with Netlify Functions and Stripe A serverless function to pr

null 1 Mar 8, 2022
Cookie Store (Appwrite + Stripe)

Appwrite + Stripe integration showcase

Matej Bačo 7 Sep 4, 2022
Next-vue-device-detector: a simple vue plugin to inspect the device type

Next-vue-device-detector next-vue-device-detector is a simple vue plugin to inspect the device type. focus on mobile vue 3 friendly strong typed Insta

Vincent Guo 5 Dec 7, 2022
🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

?? Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

EGGSY 30 Sep 3, 2022
A simple unopinionated Vue plugin for managing user roles and permissions, access-control list (ACL) and role-based access control (RBAC).

Vue Simple ACL A simple unopinionated Vue plugin for managing user roles and permissions, access-control list (ACL) and role-based access control (RBA

Victory Osayi 86 Dec 24, 2022
v-onboarding is a super-slim, fully-typed onboarding plugin for Vue 3

v-onboarding is a super-slim, fully-typed onboarding plugin for Vue 3

Fatih Solhan 87 Dec 23, 2022
🔌 A simple Vue plugin for Fathom Analytics

vue-fathom A simple Vue plugin for Fathom Analytics. npm i -s @ubclaunchpad/vue-fathom import Vue from 'vue'; import VueFathom from '@ubclaunchpad/vue

UBC Launch Pad 2 Dec 12, 2022