Creating a one-time Stripe Checkout payment in Vue.js is very easy, especially using the Stripe Checkout for Vue.
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.
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.
Install Stripe Checkout for Vue
You can use yarn
, or npm
.
Yarn
yarn add @vue-stripe/vue-stripe
NPM
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>
Redirect to checkout
The key to achieving this is by supplying the mode
property with payment
value.
<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',
};
},
// You will be redirected to Stripe's secure checkout page
submit () {
this.$refs.checkoutRef.redirectToCheckout();
},
};
</script>
When you click the button you should be redirected to Stripe's checkout page.

Notes
- Don't forget to provide the publishable key
- Don't forget to supply
successURL
andcancelURL
- The
ref
for the component is important