Vue Stripe

Appearance

Buy now, pay later confirmers ​

Confirm a PaymentIntent with a buy now, pay later method: Affirm, Afterpay / Clearpay, Billie (Stripe beta) and Klarna. Stripe redirects the customer to the provider to approve the plan and back to your return_url.

Each composable returns the Stripe.js method under its own name plus loading and error; see Method confirmers for the shared behavior. Call it in a component inside VueStripeProvider. What each method needs lists the Intent currency and the data each method requires, and Test your integration what each method does in test mode.

When to use ​

The Payment Element offers the BNPL methods that fit the amount and currency; confirm it with usePaymentIntent. Advertise instalments with VueStripePaymentMethodMessagingElement. Use these confirmers for a dedicated button per provider.

Example ​

vue
<!-- PayWithKlarna.vue: rendered inside <VueStripeProvider> -->
<script setup lang="ts">
import { useConfirmKlarnaPayment } from '@vue-stripe/vue-stripe'

const props = defineProps<{ clientSecret: string }>()

const { confirmKlarnaPayment, loading, error } = useConfirmKlarnaPayment()

const pay = () =>
  confirmKlarnaPayment(props.clientSecret, {
    payment_method: {
      billing_details: { email: 'jenny@example.com', address: { country: 'DE' } }
    },
    return_url: `${window.location.origin}/checkout/complete`
  })
</script>

<template>
  <button :disabled="loading" @click="pay">Pay with Klarna</button>
  <p v-if="error">{{ error }}</p>
</template>

Composables ​

useConfirmAffirmPayment ​

Wraps stripe.confirmAffirmPayment(). Use stripe.confirmAffirmPayment in the Affirm payments flow when the customer submits your payment form. When called, it will confirm the PaymentIntent.

ts
const { confirmAffirmPayment, loading, error } = useConfirmAffirmPayment()

// Stripe.js signature
confirmAffirmPayment(
  clientSecret: string,
  data?: ConfirmAffirmPaymentData,
  options?: ConfirmAffirmPaymentOptions
): Promise<PaymentIntentResult>

useConfirmAfterpayClearpayPayment ​

Wraps stripe.confirmAfterpayClearpayPayment(). Use stripe.confirmAfterpayClearpayPayment in the Afterpay / Clearpay payments flow when the customer submits your payment form. When called, it will confirm the PaymentIntent.

ts
const { confirmAfterpayClearpayPayment, loading, error } = useConfirmAfterpayClearpayPayment()

// Stripe.js signature
confirmAfterpayClearpayPayment(
  clientSecret: string,
  data?: ConfirmAfterpayClearpayPaymentData,
  options?: ConfirmAfterpayClearpayPaymentOptions
): Promise<PaymentIntentResult>

useConfirmBilliePayment ​

Wraps stripe.confirmBilliePayment(). Use stripe.confirmBilliePayment in the Billie Payments with Payment Methods flow when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide, and it will automatically redirect the customer to authorize the transaction.

Stripe beta

Billie is a Stripe beta. Stripe.js refuses the call unless the Stripe instance was created with a beta flag: without it, confirmBilliePayment() rejects before any request with "You cannot call stripe.confirmBilliePayment without supplying an appropriate beta flag when initializing Stripe.js.", and the error ref holds the same message. Stripe gives the flag to accounts with access (contact Stripe). Pass it with the betas prop of VueStripeProvider; the plugin has no betas option, so wrap the component in a VueStripeProvider that sets it.

ts
const { confirmBilliePayment, loading, error } = useConfirmBilliePayment()

// Stripe.js signature
confirmBilliePayment(
  clientSecret: string,
  data?: ConfirmBilliePaymentData,
  options?: ConfirmBilliePaymentOptions
): Promise<PaymentIntentResult>

useConfirmKlarnaPayment ​

Wraps stripe.confirmKlarnaPayment(). Use stripe.confirmKlarnaPayment in the Klarna Payments with Payment Methods flow when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide, and it will automatically redirect the customer to authorize the transaction.

ts
const { confirmKlarnaPayment, loading, error } = useConfirmKlarnaPayment()

// Stripe.js signature
confirmKlarnaPayment(
  clientSecret: string,
  data?: ConfirmKlarnaPaymentData,
  options?: ConfirmKlarnaPaymentOptions
): Promise<PaymentIntentResult>

See Also ​