Getting Started

Vue Stripe Checkout starting guide.

Installation
Yarn
NPM
Terminal
yarn add @vue-stripe/vue-stripe
Terminal
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
Name
Type
Default
Required
Description
pk
string
none
Yes
Stripe's publishable key, you can retrieve this from your Stripe dashboard.
​sessionId​
string
none
No
The ID of the Checkout Session that is used in Checkout's client and server integration.
​lineItems​
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.
​disableAdvancedFraudDetection​
boolean
false
No
Disables the advanced fraud detection feature.
​mode​
string
none
No
The mode of the Checkout Session, one of payment or subscription. Required if using lineItems with the client-only integration.
​successUrl​
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.
​cancelUrl​
string
none
No
The URL to which Stripe should send customers when payment is canceled. Required if using the client-only integration.
​clientReferenceId​
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.
​customerEmail​
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.
​billingAddressCollection​
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.
​shippingAddressCollection​
object
none
No
When set, provides configuration for Checkout to collect a shipping address from a customer.
​stripeAccount​
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.
​apiVersion​
string
none
No
Override your account's API version.
​locale​
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.
​submitType​
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.
​items​
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.

Name	Type	Default	Required	Description
pk	string	none	Yes	Stripe's publishable key, you can retrieve this from your Stripe dashboard.
sessionId	string	none	No	The ID of the Checkout Session that is used in Checkout's client and server integration.
lineItems	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.
disableAdvancedFraudDetection	boolean	false	No	Disables the advanced fraud detection feature.
mode	string	none	No	The mode of the Checkout Session, one of payment or subscription. Required if using lineItems with the client-only integration.
successUrl	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.
cancelUrl	string	none	No	The URL to which Stripe should send customers when payment is canceled. Required if using the client-only integration.
clientReferenceId	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.
customerEmail	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.
billingAddressCollection	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.
shippingAddressCollection	object	none	No	When set, provides configuration for Checkout to collect a shipping address from a customer.
stripeAccount	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.
apiVersion	string	none	No	Override your account's API version.
locale	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.
submitType	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.
items	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.

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.

Stripe Checkout

One-time Payment

Last modified 10mo ago