Sessions Generator
Interactive session generator to demo checkout using sessions.
Take note that Session ids are generated from the backend. To know more about sessions visit the documentation.

Demo

1. Prepare checkout data [frontend]

1
{
2
"success_url": "https://vuestripe.com/stripe-checkout/sessions-generator?state=success",
3
"cancel_url": "https://vuestripe.com/stripe-checkout/sessions-generator?state=cancel",
4
"payment_method_types": [
5
"card"
6
],
7
"line_items": [
8
{
9
"price": "price_1I1xv3EfCmJMLhhrJ5vdGxy6",
10
"quantity": 1
11
}
12
],
13
"mode": "payment"
14
}
Copied!

2. Create a Session [backend]

Create a session using the data from Step 1. Note that the "mode"="payment" means that you are creating a one-time payment session. Node.js sample here.

3. Checkout using Session id [frontend]

Follow this sample code below:
1
<template>
2
<div>
3
<stripe-checkout
4
ref="checkoutRef"
5
:pk="publishableKey"
6
:session-id="sessionId"
7
/>
8
<button @click="submit">Checkout!</button>
9
</div>
10
</template>
11
​
12
<script>
13
import { StripeCheckout } from '@vue-stripe/vue-stripe';
14
export default {
15
components: {
16
StripeCheckout,
17
},
18
data () {
19
this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
20
return {
21
loading: false,
22
sessionId: 'session-id', // session id from backend
23
};
24
},
25
methods: {
26
submit () {
27
// You will be redirected to Stripe's secure checkout page
28
this.$refs.checkoutRef.redirectToCheckout();
29
},
30
},
31
};
32
</script>
Copied!