Getting Started
Vue Stripe Checkout starting guide.
Installation
Yarn
NPM
Terminal
1
yarn add @vue-stripe/vue-stripe
Copied!
Terminal
1
npm install @vue-stripe/vue-stripe
Copied!
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.1
<template>
2
<!-- stripe-checkout -->
3
</template>
4
5
<script>
6
import { StripeCheckout } from '@vue-stripe/vue-stripe';
7
export default {
8
components: {
9
StripeCheckout,
10
},
11
};
12
</script>
Copied!
Props
Name
Type
Default
Required
Description
pk
string
none
Yes
Stripe's publishable key, you can retrieve this from your Stripe dashboard.
string
none
No
The ID of the Checkout Session that is used in Checkout's client and server integration.
array[object]
none
No
An array of objects representing the items that your customer would like to purchase. These items are shown as line items in the Checkout interface and make up the total amount to be collected by Checkout. Used with the client-only integration.
string
none
No
The mode of the Checkout Session, one of payment or subscription. Required if using lineItems with the client-only integration.
string
none
No
The URL to which Stripe should send customers when payment is complete. If you’d like access to the Checkout Session for the successful payment, read more about it in the guide on fulfilling orders. Required if using the client-only integration.
string
none
No
The URL to which Stripe should send customers when payment is canceled. Required if using the client-only integration.
string
none
No
A unique string to reference the Checkout session. This can be a customer ID, a cart ID, or similar. It is included in the checkout.session.completed webhook and can be used to fulfill the purchase.
string
none
No
The email address used to create the customer object. If you already know your customer's email address, use this attribute to prefill it on Checkout.
string
none
No
Specify whether Checkout should collect the customer’s billing address. If set to required, Checkout will attempt to collect the customer’s billing address. If not set or set to auto Checkout will only attempt to collect the billing address when necessary.
object
none
No
When set, provides configuration for Checkout to collect a shipping address from a customer.
string
none
No
For usage with Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account.
string
none
No
Describes the type of transaction being performed by Checkout in order to customize relevant text on the page, such as the Submit button. submitType can only be specified when using using line items or SKUs, and not subscriptions. The default is auto. Supported values are: auto, book, donate, pay.
string
auto
No
Describes the type of transaction being performed by Checkout in order to customize relevant text on the page, such as the Submit button. submitType can only be specified when using using line items or SKUs, and not subscriptions. The default is auto. Supported values are: auto, book, donate, pay.
array[object]
none
No
An array of objects representing the items that your customer would like to purchase. These items are shown as line items in the Checkout interface and make up the total amount to be collected by Checkout. Using lineItems is preferred.
Events
Name
Type
Description
loading
boolean
Emits the current loading state of the component.
error
object
Emits whatever error the component might encounter, especially the ones from Stripe.
Last modified 3mo ago
Export as PDF
Copy link
Edit on GitHub