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>