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!
Last modified 3mo ago
Export as PDF
Copy link
Edit on GitHub