@vue-stripe/vue-stripe@4.2.4

Getting Started

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

NameTypeDefaultRequiredDescription
pkstringnoneyesStripe's publishable key, you can retrieve this from your Stripe dashboard.
sessionIdstringnonenoThe ID of the Checkout Session that is used in Checkout's client and server integration.
lineItemsarray[object]nonenoAn 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.
disableAdvancedFraudDetectionbooleanfalsenoDisables the advanced fraud detection feature.
modestringnonenoThe mode of the Checkout Session, one of payment or subscription. Required if using lineItems with the client-only integration.
successUrlstringnonenoThe 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.
cancelUrlstringnonenoThe URL to which Stripe should send customers when payment is canceled. Required if using the client-only integration.
clientReferenceIdstringnonenoA 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.
customerEmailstringnonenoThe 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.
billingAddressCollectionstringnonenoSpecify 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.
shippingAddressCollectionobjectnonenoWhen set, provides configuration for Checkout to collect a shipping address from a customer.
localestringnonenoA locale that will be used to localize the display of Checkout. Default is auto (Stripe detects the locale of the browser).
submitTypestringnonenoDescribes 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.
itemsarray[object]nonenoAn 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

NameTypeDescription
loadingbooleanEmits the current loading state of the component.
errorobjectEmits whatever error the component might encounter, especially the ones from Stripe.