Vue Stripe

Appearance

Wallet confirmers ​

Confirm a PaymentIntent or SetupIntent with a wallet or app-based method: Alipay, Amazon Pay, BLIK, Cash App Pay, GrabPay, MobilePay, PayNow, PayPal, Pix, PromptPay, TWINT and WeChat Pay. Depending on the method, Stripe redirects to the wallet and back to your return_url, shows a QR code, or waits for the customer to approve in their banking app (BLIK).

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 Express Checkout Element and the Payment Element offer the wallets enabled on your account in one integration; confirm the Payment Element with usePaymentIntent / useSetupIntent. Use these confirmers for a dedicated button per wallet.

Example ​

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

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

const { confirmCashappPayment, loading, error } = useConfirmCashappPayment()

// `payment_method: {}` lets Stripe create the Cash App Pay payment method;
// without it the call fails with payment_intent_incompatible_payment_method
const pay = () =>
  confirmCashappPayment(props.clientSecret, {
    payment_method: {},
    return_url: `${window.location.origin}/checkout/complete`
  })
</script>

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

Stripe.js then shows a QR code in a modal and resolves once the customer has paid. What each method needs lists the Intent currency and the data for each wallet.

BLIK takes the six-digit code from the customer's banking app and resolves once they approve the payment there:

ts
const { confirmBlikPayment } = useConfirmBlikPayment()
const { paymentIntent } = await confirmBlikPayment(clientSecret, {
  payment_method: { blik: {}, billing_details: { email: 'jenny@example.com' } },
  payment_method_options: { blik: { code: '777123' } }
})

Composables ​

useConfirmAlipayPayment ​

Wraps stripe.confirmAlipayPayment(). Use stripe.confirmAlipayPayment in the Alipay 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 { confirmAlipayPayment, loading, error } = useConfirmAlipayPayment()

// Stripe.js signature
confirmAlipayPayment(
  clientSecret: string,
  data?: ConfirmAlipayPaymentData,
  options?: ConfirmAlipayPaymentOptions
): Promise<PaymentIntentResult>

useConfirmAmazonPaySetup ​

Wraps stripe.confirmAmazonPaySetup(). Use stripe.confirmAmazonPaySetup in the Set up future payments flow when the customer submits your payment form. When called, it will confirm a SetupIntent with data you provide, and it will automatically redirect the customer to authorize the transaction.

ts
const { confirmAmazonPaySetup, loading, error } = useConfirmAmazonPaySetup()

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

useConfirmBlikPayment ​

Wraps stripe.confirmBlikPayment(). Use stripe.confirmBlikPayment in the BLIK 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 prompt the customer to authorize the transaction.

ts
const { confirmBlikPayment, loading, error } = useConfirmBlikPayment()

// Stripe.js signature
confirmBlikPayment(
  clientSecret: string,
  data: ConfirmBlikPaymentData,
  options?: ConfirmBlikPaymentOptions
): Promise<PaymentIntentResult>

useConfirmBlikSetup ​

Wraps stripe.confirmBlikSetup(). Use stripe.confirmBlikSetup when the customer submits a custom BLIK setup form. When called, it confirms the SetupIntent with the BLIK code and billing details in data, then waits for the customer to authorize the mandate in their banking app.

ts
const { confirmBlikSetup, loading, error } = useConfirmBlikSetup()

// Stripe.js signature
confirmBlikSetup(
  clientSecret: string,
  data: ConfirmBlikSetupData,
  options?: ConfirmBlikSetupOptions
): Promise<SetupIntentResult>

useConfirmCashappPayment ​

Wraps stripe.confirmCashappPayment(). Use stripe.confirmCashappPayment in the Cash App 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 { confirmCashappPayment, loading, error } = useConfirmCashappPayment()

// Stripe.js signature
confirmCashappPayment(
  clientSecret: string,
  data?: ConfirmCashappPaymentData,
  options?: ConfirmCashappPaymentOptions
): Promise<PaymentIntentResult>

useConfirmCashappSetup ​

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

ts
const { confirmCashappSetup, loading, error } = useConfirmCashappSetup()

// Stripe.js signature
confirmCashappSetup(
  clientSecret: string,
  data?: ConfirmCashappSetupData,
  options?: ConfirmCashappSetupOptions
): Promise<SetupIntentResult>

useConfirmGrabPayPayment ​

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

ts
const { confirmGrabPayPayment, loading, error } = useConfirmGrabPayPayment()

// Stripe.js signature
confirmGrabPayPayment(
  clientSecret: string,
  data?: ConfirmGrabPayPaymentData,
  options?: ConfirmGrabPayPaymentOptions
): Promise<PaymentIntentResult>

useConfirmMobilepayPayment ​

Wraps stripe.confirmMobilepayPayment(). Use stripe.confirmMobilepayPayment in the Mobilepay 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 { confirmMobilepayPayment, loading, error } = useConfirmMobilepayPayment()

// Stripe.js signature
confirmMobilepayPayment(
  clientSecret: string,
  data?: ConfirmMobilepayPaymentData,
  options?: ConfirmMobilepayPaymentOptions
): Promise<PaymentIntentResult>

useConfirmPayNowPayment ​

Wraps stripe.confirmPayNowPayment(). Use stripe.confirmPayNowPayment in the PayNow 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 { confirmPayNowPayment, loading, error } = useConfirmPayNowPayment()

// Stripe.js signature
confirmPayNowPayment(
  clientSecret: string,
  data?: ConfirmPayNowPaymentData,
  options?: ConfirmPayNowPaymentOptions
): Promise<PaymentIntentResult>

useConfirmPayPalPayment ​

Wraps stripe.confirmPayPalPayment(). Use stripe.confirmPayPalPayment in the PayPal 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 { confirmPayPalPayment, loading, error } = useConfirmPayPalPayment()

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

useConfirmPayPalSetup ​

Wraps stripe.confirmPayPalSetup(). Use stripe.confirmPayPalSetup in the Set up future payments flow when the customer submits your payment form. When called, it will confirm a SetupIntent with data you provide, and it will automatically redirect the customer to authorize the transaction.

ts
const { confirmPayPalSetup, loading, error } = useConfirmPayPalSetup()

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

useConfirmPixPayment ​

Wraps stripe.confirmPixPayment(). Use stripe.confirmPixPayment in the Pix 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 { confirmPixPayment, loading, error } = useConfirmPixPayment()

// Stripe.js signature
confirmPixPayment(
  clientSecret: string,
  data?: ConfirmPixPaymentData,
  options?: ConfirmPixPaymentOptions
): Promise<PaymentIntentResult>

Stripe requires billing_details with name, email and tax_id (the customer's CPF or CNPJ); without them the call resolves to "Missing required param: billing_details[tax_id]." and so on. The Stripe.js 10 BillingDetails type has no tax_id, so an inline object literal fails type checking with TS2353. Build the object in a variable, which skips the excess-property check:

ts
const payWithPix = (clientSecret: string) => {
  const billing_details = { name: 'Jenny Rosen', email: 'jenny@example.com', tax_id: '000.000.000-00' }
  return confirmPixPayment(clientSecret, { payment_method: { billing_details } })
}

useConfirmPromptPayPayment ​

Wraps stripe.confirmPromptPayPayment(). Use stripe.confirmPromptPayPayment in the PromptPay 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 { confirmPromptPayPayment, loading, error } = useConfirmPromptPayPayment()

// Stripe.js signature
confirmPromptPayPayment(
  clientSecret: string,
  data?: ConfirmPromptPayPaymentData,
  options?: ConfirmPromptPayPaymentOptions
): Promise<PaymentIntentResult>

useConfirmTwintPayment ​

Wraps stripe.confirmTwintPayment(). Use stripe.confirmTwintPayment in the TWINT 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 { confirmTwintPayment, loading, error } = useConfirmTwintPayment()

// Stripe.js signature
confirmTwintPayment(
  clientSecret: string,
  data?: ConfirmTwintPaymentData,
  options?: ConfirmTwintPaymentOptions
): Promise<PaymentIntentResult>

useConfirmWechatPayPayment ​

Wraps stripe.confirmWechatPayPayment(). Use stripe.confirmWechatPayPayment in the Wechat Pay 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 { confirmWechatPayPayment, loading, error } = useConfirmWechatPayPayment()

// Stripe.js signature
confirmWechatPayPayment(
  clientSecret: string,
  data?: ConfirmWechatPayPaymentData,
  options?: ConfirmWechatPayPaymentOptions
): Promise<PaymentIntentResult>

See Also ​