Embedded Components

Learn about Vue components for Stripe.js and Stripe Elements.

Installation

npm install vue-stripe @stripe/stripe-js

Checkout provider

The CheckoutProvider provider allows you to use Element components and access the Stripe object in any nested component. Render a CheckoutProvider at the root of your Vue app so that it’s available everywhere you need it.

See Create a Checkout Session for an example of what your endpoint might look like.

<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { CheckoutProvider } from 'vue-stripe/checkout'

const stripePromise = loadStripe('pk_test_xxx')

function fetchClientSecret() {
  return fetch('/create-checkout-session', { method: 'POST' })
    .then(response => response.json())
    .then(data => data.clientSecret)
}
</script>

<template>
  <CheckoutProvider :stripe="stripePromise" :options="{ clientSecret: fetchClientSecret }">
    <CheckoutForm />
  </CheckoutProvider>
</template>

Prop	Description
stripe	A Stripe object or a Promise resolving to a Stripe object. Can initially be null for SSR apps.
options	CheckoutProvider configuration options. See available options. You must provide the fetchClientSecret function that returns the client secret of the created Checkout Session.

Elements components

Element components provide a flexible way to securely collect payment information in your Vue app.

You can mount individual Element components inside of your CheckoutProvider tree. You can only mount one of each type of Element in a single <CheckoutProvider>.

<script setup>
import { PaymentElement } from 'vue-stripe/checkout'
</script>

<template>
  <form>
    <PaymentElement />
    <button>Submit</button>
  </form>
</template>

Prop	Description
options	An object containing Element configuration options. See available options for the Payment Element.

Event	Description
@blur	Triggered when the Element loses focus.
@change	Triggered when data exposed by this Element is changed (for example, when there is an error).
@click	Triggered by the <PaymentRequestButtonElement> when it is clicked.
@escape	Triggered when the escape key is pressed within an Element.
@focus	Triggered when the Element receives focus.
@loadererror	Triggered when the Element fails to load. You only receive these events from the paymentand address Elements.
@loaderstart	Triggered when the loader UI is mounted to the DOM and ready to be displayed. You only receive these events from the paymentand address Elements.
@ready	Triggered when the Element is fully rendered and can accept imperative element.focus() calls.

Available Element components

You can use several different kinds of Elements for collecting information on your checkout page. These are the available Elements:

Component	Usage
BillingAddressElement	Collects billing address details for more than 236 regional formats. See the Address Element documentation to learn more.
AddressElement	Collects address details for 236+ regional formats. See the Address Element docs.
ExpressCheckoutElement	Allows you to accept card or wallet payments through one or more payment buttons, including Apple Pay, Google Pay, Link, or PayPal. See the Express Checkout Element docs.
PaymentElement	Collects payment details for 25+ payment methods from around the globe. See the Payment Element docs.

useCheckout composable

useCheckout(): ComputedRefRef<CheckoutContextValue | null>{lang=“ts-type”}

Use the useCheckout composable in your components to get the Checkout object, which contains data from the Checkout Session, and methods to update and confirm the Session.

<script setup>
import { PaymentElement, useCheckout } from 'vue-stripe/checkout'

const checkoutState = useCheckout()

async function handleSubmit() {
  if (checkoutState.value.type === 'loading') {
    // Handle loading state
  }
  else if (checkoutState.value.type === 'error') {
    // Handle error state
  }

  // checkoutState.type === 'success'
  const { checkout } = checkoutState.value
  const result = await checkout.confirm()

  if (result.type === 'error') {
    // Show error to your customer (for example, payment details incomplete)
    console.log(result.error.message)
  }
  else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <PaymentElement />
    <button>Submit</button>
  </form>
</template>