Sessions Generator

Take note that Session ids are generate from the backend. To know more about sessions visit the documentation.

1. Prepare checkout data frontend

Prerequisite: Enable Checkout, and Create Products

{
  "success_url": false,
  "cancel_url": false,
  "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

Sample Code
<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>