Vue 2 Version
Search
K
Links

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]

{
"success_url": "https://vuestripe.com/stripe-checkout/sessions-generator?state=success",
"cancel_url": "https://vuestripe.com/stripe-checkout/sessions-generator?state=cancel",
"payment_method_types": [
"card"
],
"line_items": [
{
"price": "price_1I1xv3EfCmJMLhhrJ5vdGxy6",
"quantity": 1
}
],
"mode": "payment"
}

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:
<template>
<div>
<stripe-checkout
ref="checkoutRef"
:pk="publishableKey"
:session-id="sessionId"
/>
<button @click="submit">Checkout!</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,
sessionId: 'session-id', // session id from backend
};
},
methods: {
submit () {
// You will be redirected to Stripe's secure checkout page
this.$refs.checkoutRef.redirectToCheckout();
},
},
};
</script>