Vue Stripe

Appearance

Bank debit confirmers ​

Confirm a PaymentIntent or SetupIntent that debits a bank account: Canadian pre-authorized debits (ACSS), Australian BECS, UK Bacs, SEPA Direct Debit and US bank accounts (ACH). ACSS opens a Stripe modal that collects and verifies the account; SEPA and BECS take the account from VueStripeIbanElement / VueStripeAuBankAccountElement.

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 gives the test accounts for each method.

When to use ​

The Payment Element collects all of these, shows the mandate text and confirms through usePaymentIntent / useSetupIntent; prefer it for new integrations. Use the confirmers below with the IBAN or BECS element, with your own form, or to confirm an intent whose PaymentMethod is already attached (for US bank accounts, collected with useFinancialConnections().collectBankAccountForPayment()).

Example ​

vue
<!-- PayWithSepa.vue: rendered inside <VueStripeProvider> and <VueStripeElements> -->
<script setup lang="ts">
import { ref } from 'vue'
import { VueStripeIbanElement, useConfirmSepaDebitPayment } from '@vue-stripe/vue-stripe'

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

const ibanRef = ref<InstanceType<typeof VueStripeIbanElement> | null>(null)
const { confirmSepaDebitPayment, loading, error } = useConfirmSepaDebitPayment()
const status = ref('')

const pay = async () => {
  const iban = ibanRef.value?.element
  if (!iban) return
  const { paymentIntent } = await confirmSepaDebitPayment(props.clientSecret, {
    payment_method: {
      sepa_debit: iban,
      billing_details: { name: 'Jenny Rosen', email: 'jenny@example.com' }
    }
  })
  // SEPA debits settle later: expect 'processing'
  status.value = paymentIntent?.status ?? ''
}
</script>

<template>
  <VueStripeIbanElement ref="ibanRef" :options="{ supportedCountries: ['SEPA'] }" />
  <button :disabled="loading" @click="pay">Pay</button>
  <p v-if="error">{{ error }}</p>
  <p v-if="status">Payment {{ status }}</p>
</template>

The ACSS confirmers need only billing details; Stripe's modal collects the account:

ts
const { confirmAcssDebitPayment } = useConfirmAcssDebitPayment()
await confirmAcssDebitPayment(clientSecret, {
  payment_method: { billing_details: { name: 'Jenny Rosen', email: 'jenny@example.com' } }
})

Composables ​

useConfirmAcssDebitPayment ​

Wraps stripe.confirmAcssDebitPayment(). Use stripe.confirmAcssDebitPayment in the Accept a Canadian pre-authorized debit payment flow when the customer submits your payment form. When called, it will automatically pop up a modal to collect bank account details and verification, accept the mandate, and confirm the PaymentIntent when the user submits the form.

ts
const { confirmAcssDebitPayment, loading, error } = useConfirmAcssDebitPayment()

// Stripe.js signature
confirmAcssDebitPayment(
  clientSecret: string,
  data?: ConfirmAcssDebitPaymentData,
  options?: ConfirmAcssDebitPaymentOptions
): Promise<PaymentIntentResult>

useConfirmAcssDebitSetup ​

Wraps stripe.confirmAcssDebitSetup(). Use stripe.confirmAcssDebitSetup to save details for future payments with pre-authorized debit in Canada. When called, it will automatically pop up a modal to collect bank account details and verification, accept the mandate, and confirm the SetupIntent when the user submits the form.

ts
const { confirmAcssDebitSetup, loading, error } = useConfirmAcssDebitSetup()

// Stripe.js signature
confirmAcssDebitSetup(
  clientSecret: string,
  data?: ConfirmAcssDebitSetupData,
  options?: ConfirmAcssDebitSetupOptions
): Promise<SetupIntentResult>

useConfirmAuBecsDebitPayment ​

Wraps stripe.confirmAuBecsDebitPayment(). Use stripe.confirmAuBecsDebitPayment in the BECS Direct Debit Payments with Payment Methods flow when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide.

ts
const { confirmAuBecsDebitPayment, loading, error } = useConfirmAuBecsDebitPayment()

// Stripe.js signature
confirmAuBecsDebitPayment(
  clientSecret: string,
  data?: ConfirmAuBecsDebitPaymentData
): Promise<PaymentIntentResult>

useConfirmAuBecsDebitSetup ​

Wraps stripe.confirmAuBecsDebitSetup(). Use stripe.confirmAuBecsDebitSetup in the BECS Direct Debit with Setup Intents flow when the customer submits your payment form. When called, it will confirm the SetupIntent with data you provide.

ts
const { confirmAuBecsDebitSetup, loading, error } = useConfirmAuBecsDebitSetup()

// Stripe.js signature
confirmAuBecsDebitSetup(
  clientSecret: string,
  data?: ConfirmAuBecsDebitSetupData
): Promise<SetupIntentResult>

useConfirmBacsDebitSetup ​

Wraps stripe.confirmBacsDebitSetup(). Use stripe.confirmBacsDebitSetup in the Bacs Direct Debit Payments flow when the customer submits your payment form. When called, it will confirm the SetupIntent with data you provide.

ts
const { confirmBacsDebitSetup, loading, error } = useConfirmBacsDebitSetup()

// Stripe.js signature
confirmBacsDebitSetup(
  clientSecret: string,
  data?: ConfirmBacsDebitSetupData
): Promise<SetupIntentResult>

useConfirmSepaDebitPayment ​

Wraps stripe.confirmSepaDebitPayment(). Use stripe.confirmSepaDebitPayment in the SEPA Direct Debit Payments with Payment Methods flow when the customer submits your payment form. When called, it will confirm the PaymentIntent with data you provide.

ts
const { confirmSepaDebitPayment, loading, error } = useConfirmSepaDebitPayment()

// Stripe.js signature
confirmSepaDebitPayment(
  clientSecret: string,
  data?: ConfirmSepaDebitPaymentData
): Promise<PaymentIntentResult>

useConfirmSepaDebitSetup ​

Wraps stripe.confirmSepaDebitSetup(). Use stripe.confirmSepaDebitSetup in the SEPA Direct Debit with Setup Intents flow when the customer submits your payment form. When called, it will confirm the SetupIntent with data you provide.

ts
const { confirmSepaDebitSetup, loading, error } = useConfirmSepaDebitSetup()

// Stripe.js signature
confirmSepaDebitSetup(
  clientSecret: string,
  data?: ConfirmSepaDebitSetupData
): Promise<SetupIntentResult>

useConfirmUsBankAccountPayment ​

Wraps stripe.confirmUsBankAccountPayment(). Use stripe.confirmUsBankAccountPayment in the Accept a payment flow for the ACH Direct Debit payment method to record the customer’s authorization for payment. When you confirm a PaymentIntent, it needs to have an attached PaymentMethod.

ts
const { confirmUsBankAccountPayment, loading, error } = useConfirmUsBankAccountPayment()

// Stripe.js signature
confirmUsBankAccountPayment(
  clientSecret: string,
  data?: ConfirmUsBankAccountPaymentData
): Promise<PaymentIntentResult>

Try it in the ACH Direct Debit demo: useFinancialConnections().collectBankAccountForPayment() links the account, then this composable confirms.

useConfirmUsBankAccountSetup ​

Wraps stripe.confirmUsBankAccountSetup(). Use stripe.confirmUsBankAccountSetup in the Save bank details flow for the ACH Direct Debit payment method to record the customer’s authorization for future payments. When you confirm a SetupIntent, it needs to have an attached PaymentMethod.

ts
const { confirmUsBankAccountSetup, loading, error } = useConfirmUsBankAccountSetup()

// Stripe.js signature
confirmUsBankAccountSetup(
  clientSecret: string,
  data?: ConfirmUsBankAccountSetupData
): Promise<SetupIntentResult>

See Also ​