Subscriptions
Vue Stripe Checkout also supports subscription or recurring payments.
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:
1
<template>
2
<div>
3
<stripe-checkout
4
ref="checkoutRef"
5
mode="subscription"
6
:pk="publishableKey"
7
:line-items="lineItems"
8
:success-url="successURL"
9
:cancel-url="cancelURL"
10
@loading="v => loading = v"
11
/>
12
<button @click="submit">Subscribe!</button>
13
</div>
14
</template>
15
16
<script>
17
import { StripeCheckout } from '@vue-stripe/vue-stripe';
18
export default {
19
components: {
20
StripeCheckout,
21
},
22
data () {
23
this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
24
return {
25
loading: false,
26
lineItems: [
27
{
28
price: 'some-price-id', // The id of the recurring price you created in your Stripe dashboard
29
quantity: 1,
30
},
31
],
32
successURL: 'your-success-url',
33
cancelURL: 'your-cancel-url',
34
};
35
},
36
methods: {
37
submit () {
38
// You will be redirected to Stripe's secure checkout page
39
this.$refs.checkoutRef.redirectToCheckout();
40
},
41
},
42
};
43
</script>
Copied!
Last modified 4mo ago
Export as PDF
Copy link
Edit on GitHub