Vue Stripe

Appearance

Show buy-now-pay-later messaging ​

Show customers which buy-now-pay-later (BNPL) options fit the current price, for example "4 interest-free payments of $30.00 with Klarna", with VueStripePaymentMethodMessagingElement. It covers Affirm, Klarna and Afterpay/Clearpay and shows only the ones that apply to the amount, currency and country you pass.

The element only displays a message. Put it on product, cart and pricing pages, and collect the payment later with the Payment Element or Stripe Checkout.

Before you begin ​

  • The BNPL methods you advertise are enabled in the Stripe Dashboard. A provider that is not enabled is never shown.
  • Your checkout (Payment Element or Checkout Session) allows the same methods, so customers can choose what you advertise.

1. Render the element ​

The element needs VueStripeElements, but no client secret: it does not take part in a payment.

vue
<script setup lang="ts">
import {
  VueStripeProvider,
  VueStripeElements,
  VueStripePaymentMethodMessagingElement
} from '@vue-stripe/vue-stripe'
import '@vue-stripe/vue-stripe/style.css' // once, e.g. in main.ts

const publishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY
</script>

<template>
  <VueStripeProvider :publishable-key="publishableKey">
    <VueStripeElements>
      <VueStripePaymentMethodMessagingElement
        :options="{
          amount: 12000,
          currency: 'USD',
          countryCode: 'US',
          paymentMethodTypes: ['affirm', 'klarna', 'afterpay_clearpay']
        }"
      />
    </VueStripeElements>
  </VueStripeProvider>
</template>

amount is in the smallest currency unit (cents for USD), so 12000 is $120.00 (other currencies). currency is an upper-case ISO code. paymentMethodTypes is optional: it limits the message to the providers you list. Without it, Stripe.js shows every provider that applies to the amount, currency and country. When none applies (for example for $0.50), the element renders an empty message and Stripe.js logs "No "Buy Now Pay Later" options are displayed because no relevant options were found."

2. Keep the amount in sync with the price ​

The component calls element.update() whenever options changes, so pass a computed value and the message follows the price:

vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { VueStripePaymentMethodMessagingElement } from '@vue-stripe/vue-stripe'
import type { StripePaymentMethodMessagingElementOptions } from '@stripe/stripe-js'

const unitPrice = 4000 // $40.00
const quantity = ref(1)

const messagingOptions = computed<StripePaymentMethodMessagingElementOptions>(() => ({
  amount: unitPrice * quantity.value,
  currency: 'USD',
  countryCode: 'US',
  paymentMethodTypes: ['affirm', 'klarna', 'afterpay_clearpay']
}))
</script>

<template>
  <label>
    Quantity
    <input v-model.number="quantity" type="number" min="1" />
  </label>
  <!-- Rendered inside VueStripeProvider and VueStripeElements -->
  <VueStripePaymentMethodMessagingElement :options="messagingOptions" />
</template>

Each provider has its own amount limits and supported countries; outside them the element shows nothing for that provider. See Stripe's reference for the supported combinations and every option.

See also ​