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.{
"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"
}
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.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>
Last modified 10mo ago