Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-stripe-checkout with all npm packages installed. Try it out:

var vueStripeCheckout = require("vue-stripe-checkout")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-stripe-checkout v3.5.7

Vue plugin for Stripe checkout.

Black Lives Matter


Black Lives Matter Movement Resources

Vue Stripe Checkout

Financial Contributors on Open Collective npm bundle size npm GitHub Workflow Status saythanks

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! :heart:

Screen Shot This screenshot is an example of Stripe Checkout


Old version (version 2) is still available here.

Table of Contents


Live Demo


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

Vue Stripe Checkout

Stripe's new Checkout.


See Checkout documentation.

    <template slot="checkout-button">
      <button @click="checkout">Shut up and take my money!</button>

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

Vue Stripe Elements

Elements options.

stripeAccountFor usage with Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account.
apiVersionOverride your account's API version.
localeA 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).
styleObjectThe custom style object
card-elementSlot for mounting custom elements. See
card-errorsSlot for mounting custom errors

Create custom Stripe form using Stripe Elements.

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

      @loading="loading = $event"
    <button @click="submit">Pay ${{amount / 100}}</button>

import { StripeElements } from 'vue-stripe-checkout';
export default {
  components: {
  data: () => ({
    loading: false,
    amount: 1000,
    publishableKey: process.env.PUBLISHABLE_KEY, 
    token: null,
    charge: null
  methods: {
    submit () {
    tokenCreated (token) {
      this.token = token;
      // for additional charge objects go to
      this.charge = {
        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
    sendTokenToServer (charge) {
      // Send to charge to your backend server to be processed
      // Documentation here:

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 vue-stripe-checkout, like so:
  <template slot="checkout-button">

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.


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


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]



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


Made with :heart: by Jofferson Ramirez Tiquez

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free