Stripe Checkout is an embeddable payment form for desktop, tablet, and mobile devices. It works within your site—customers can pay instantly, without being redirected away to complete the transaction.

https://stripe.com/payments/checkout

Surely Stripe Checkout is one of the easiest payment checkout libraries out there. And it is even easier to use in Vue.js with the help of Vue Stripe, a custom Vue.js component specially made for implementing Stripe Checkout to your Vue.js app.

Live Demo

See demo here

Installation

You can install Vue Stripe via npm or  yarn.

npm install @vue-stripe/vue-stripe
yarn add @vue-stripe/vue-stripe

Usage

In your checkout page, import and register the StripeCheckout component.

<template>
  <!-- stripe-checkout -->
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
};
</script>

Props & Events

You can see all available props, and events here.

Example

The code below is an example of one-time payment using Stripe Checkout.

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="payment"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Pay now!</button>
  </div>
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
  data () {
    this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    return {
      loading: false,
      lineItems: [
        {
          price: 'some-price-id', // The id of the one-time price you created in your Stripe dashboard
          quantity: 1,
        },
      ],
      successURL: 'your-success-url',
      cancelURL: 'your-cancel-url',
    };
  },
  // You will be redirected to Stripe's secure checkout page
  submit () {
    this.$refs.checkoutRef.redirectToCheckout();
  },
};
</script>

Output

That's all! Easy right?