Sessions Generator

Interactive session generator to demo checkout using sessions.

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

Session ID

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>