Demo

Live Demo

1. Enable Checkout

You must first enable the client-only integration settings in your Stripe dashboard, you also have the option to customize the look and feel of your checkout page. More details.

2. Create products and recurring prices

Product and Price are required to make this work. Whether it's a physical item or a service, it needs to be represented by a product. Each product can have one or more prices.

For example, you can create a software product with different subscription tiers. $10/month, $20/month, and $50/month More details.

3. Redirect to checkout

Follow the Vue Stripe Checkout example below:

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="subscription"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Subscribe!</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,
      lineItems: [
        {
          price: 'some-price-id', // The id of the recurring price you created in your Stripe dashboard
          quantity: 1,
        },
      ],
      successURL: 'your-success-url',
      cancelURL: 'your-cancel-url',
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>

Demo

Live Demo

1. Enable Checkout

You must first enable the client-only integration settings in your Stripe dashboard, you also have the option to customize the look and feel of your checkout page. More details.

2. Create products and prices

Product and Price are required to make this work. Whether it's a physical item or a service, it needs to be represented by a product. Each product can have one or more prices.

For example, you can create a T-shirt product, with different prices for different currencies. $20 USD and €15 Euro. More details.

3. Redirect to checkout

Follow the Vue Stripe Checkout example below:

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="payment"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Pay now!</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,
      lineItems: [
        {
          price: 'some-price-id', // The id of the one-time price you created in your Stripe dashboard
          quantity: 1,
        },
      ],
      successURL: 'your-success-url',
      cancelURL: 'your-cancel-url',
    };
  },
  methods: {
    submit () {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>

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

Demo

Session Generator Demo

1. Prepare checkout data [frontend]

Prerequisite: Enable Checkout, and Create Products

{
  "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"
}

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]

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>

Installation

yarn add @vue-stripe/vue-stripe

npm install @vue-stripe/vue-stripe

Usage

You just need to import the StripeCheckout component wherever it is needed and Stripe SDK will only be loaded by the time the component has been mounted.

<template>
  <!-- stripe-checkout -->
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
};
</script>

Props

Events

No configuration or integration changes are required to enable Apple Pay or Google Pay in Stripe Checkout. These payments are handled the same way as other card payments.

Google Pay

The Google Pay button is displayed in a given Checkout Session if all of the following apply:

• Google Pay is enabled for Checkout in your Stripe Dashboard.

• The customer is using Google Chrome or Safari.

• The customer has a valid card registered with Google Pay.

This ensures that Checkout only displays the Google Pay button to customers who are able to use it.

Here's an example screenshot from Google Chrome running on Arch Linux, see the Google Pay button.

Apple Pay

The Apple Pay button is displayed in a given Checkout Session if all of the following apply:

• Apple Pay is enabled for Checkout in your Stripe Dashboard.

• The customer’s device is running macOS 10.14.1+ or iOS 12.1+.

• The customer is using the Safari browser.

• The customer has a valid card registered with Apple Pay.

This ensures that Checkout only displays the Apple Pay button to customers who are able to use it.

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.