Creating a recurring Stripe Checkout payment in Vue.js is very easy, especially using the Stripe Checkout for Vue.

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.

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.

Install Stripe Checkout for Vue

You can use yarn, or npm.

Yarn

yarn add @vue-stripe/vue-stripe

NPM

npm install @vue-stripe/vue-stripe

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.

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

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

Redirect to checkout

The key to achieving this is by supplying the mode property with subscription value.

<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',
    };
  },
  // You will be redirected to Stripe's secure checkout page
  submit () {
    this.$refs.checkoutRef.redirectToCheckout();
  },
};
</script>

When you click the subscribe button you should be redirected to Stripe's checkout page. The price and product may might change depending on the data that you supplied in the lineItems property.

Notes

• Don't forget to provide the publishable key
• Don't forget to supply successURL and cancelURL
• The ref for the component is important