Getting Started

Vue Stripe is an easy to implement, and well maintained Vue.js plugin for Stripe Checkout, and Elements.

Installation

Vue Stripe is available on NPM, or Yarn.

NPM

npm install @vue-stripe/vue-stripe

Yarn

yarn add @vue-stripe/vue-stripe

Usage

Import

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.
locale	string	none	no	A locale that will be used to localize the display of Checkout. Default is auto (Stripe detects the locale of the browser).
submitType	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.
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.