Embedded Components

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

Installation

npm install vue-stripe @stripe/stripe-js

Checkout provider

The Elements provider allows you to use Element components and access the Stripe object in any nested component.

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

const stripePromise = loadStripe('pk_test_xxx')

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

<template>
  <CheckoutProvider :stripe="stripePromise" :options="{ 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'
</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
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'

const checkout = useCheckout()

async function handleSubmit() {
  const result = await checkout.value.confirm()

  if (result.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 :disabled="!stripe">
      Submit
    </button>
  </form>
</template>