Vue Stripe
HomeGitHubTwitterOSSPHP
Vue 2 Version
Vue 2 Version
  • 🎊Welcome!
  • 💳Stripe Checkout
    • Getting Started
    • One-time Payment
    • Subscriptions
    • Sessions
    • Sessions Generator
    • Google & Apple Pay
  • 💸Stripe Elements
    • Getting Started
    • Separate Card Fields
    • Card
    • Payment
  • 🔌Vue Stripe Plugin
  • 🫂Community
  • Others
    • 💜Partners
Powered by GitBook
On this page
  • 1. Create a session
  • 2. Redirect to checkout

Was this helpful?

Edit on GitHub
Export as PDF
  1. Stripe Checkout

Sessions

Vue Stripe Checkout also supports checkout using Session Id.

PreviousSubscriptionsNextSessions Generator

Last updated 3 years ago

Was this helpful?

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

1. Create a session

You need to create the session in your backend. This session will return an id, use that id to checkout the payment.

2. Redirect to checkout

Follow the Vue Stripe Checkout example below:

You'll notice that when using sessions, you'll only need the session-id. This is because the session is the representation of all of the information (including success, and cancel URLs) about the payment to be done.

<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>
💳
documentation