Demo

Live Demo

1. Enable Checkout

You must first enable the client-only integration settings in your Stripe dashboard, you also have the option to customize the look and feel of your checkout page. More details.

2. Create products and recurring prices

Product and Price are required to make this work. Whether it's a physical item or a service, it needs to be represented by a product. Each product can have one or more prices.

For example, you can create a software product with different subscription tiers. $10/month, $20/month, and $50/month More details.

3. Redirect to checkout

Follow the Vue Stripe Checkout example below:

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="subscription"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Subscribe!</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 recurring price you created in your Stripe dashboard
          quantity: 1,
        },
      ],
      successURL: 'your-success-url',
      cancelURL: 'your-cancel-url',
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>

Installation

Usage

You just need to import the StripeCheckout component wherever it is needed and Stripe SDK will only be loaded by the time the component has been mounted.

Props

Events

Take note that Session ids are generated from the backend. To know more about sessions visit the documentation.

Demo

1. Prepare checkout data [frontend]

Prerequisite:

2. Create a Session [backend]

3. Checkout using Session id [frontend]

Follow this sample code below:

No configuration or integration changes are required to enable Apple Pay or Google Pay in Stripe Checkout. These payments are handled the same way as other card payments.

Google Pay

The Google Pay button is displayed in a given Checkout Session if all of the following apply:

• Google Pay is enabled for Checkout in your .

• The customer is using Google Chrome or Safari.

• The customer has a valid card registered with Google Pay.

This ensures that Checkout only displays the Google Pay button to customers who are able to use it.

Here's an example screenshot from Google Chrome running on Arch Linux, see the Google Pay button.

Apple Pay

The Apple Pay button is displayed in a given Checkout Session if all of the following apply:

• The customer’s device is running macOS 10.14.1+ or iOS 12.1+.

• The customer is using the Safari browser.

• The customer has a valid card registered with Apple Pay.

This ensures that Checkout only displays the Apple Pay button to customers who are able to use it.

Demo

1. Enable Checkout

You must first enable the client-only integration settings in your Stripe dashboard, you also have the option to customize the look and feel of your checkout page. .

2. Create products and prices

Product and Price are required to make this work. Whether it's a physical item or a service, it needs to be represented by a product. Each product can have one or more prices.

For example, you can create a T-shirt product, with different prices for different currencies. $20 USD and €15 Euro. .

3. Redirect to checkout

Follow the Vue Stripe Checkout example below:

Take note that Session ids are generated from the backend. To know more about sessions visit the .

1. Create a session

You need to create the session in your backend. This session will return an id, use that id to checkout the payment.

2. Redirect to checkout

Follow the Vue Stripe Checkout example below:

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 (including success, and cancel URLs) about the payment to be done.