Laravel+Vue集成Stripe支付时拆分卡元素调用confirmPayment方法问询

核心逻辑 #

Stripe的confirmPayment接口会自动读取同一Elements实例下的所有卡片相关元素值，不需要单独传入cardExpiry、cardCvc元素，仅需保证三个独立元素由同一个Elements实例初始化即可。

前端Vue实现步骤 #

1. 初始化Stripe与独立元素 #

确保三个卡片元素绑定同一个Elements实例：

// 引入stripe.js
import { loadStripe } from '@stripe/stripe-js'

// 页面初始化时执行
const initStripe = async () => {
  // 替换为你的Stripe公钥
  this.stripe = await loadStripe('pk_test_xxxxxxxxx')
  // 从后端接口获取Payment Intent的client_secret
  const clientSecret = await this.$http.get('/api/get-payment-intent').then(res => res.data.client_secret)
  
  // 创建全局唯一的Elements实例
  this.elements = this.stripe.elements({
    clientSecret: clientSecret,
    // 可自定义样式配置
    appearance: { theme: 'stripe' }
  })

  // 初始化三个独立卡片元素并挂载
  const cardNumber = this.elements.create('cardNumber')
  cardNumber.mount('#card-number')

  const cardExpiry = this.elements.create('cardExpiry')
  cardExpiry.mount('#card-expiry')

  const cardCvc = this.elements.create('cardCvc')
  cardCvc.mount('#card-cvc')
}

2. 调用confirmPayment完成支付 #

支付提交时的逻辑和统一card元素几乎一致，仅需传入elements实例即可：

const submitPayment = async () => {
  const { error, paymentIntent } = await this.stripe.confirmPayment({
    elements: this.elements,
    confirmParams: {
      // 支付完成后的跳转地址
      return_url: `${window.location.origin}/payment/success`,
      receipt_email: this.userEmail // 可选：用户邮箱用于发送收据
    }
  })

  if (error) {
    // 处理支付错误，比如卡信息错误、余额不足等，直接展示error.message给用户即可
    this.paymentError = error.message
    return
  }
  // 支付成功逻辑，跳转到成功页或者更新订单状态
  if (paymentIntent.status === 'succeeded') {
    this.$router.push('/payment/success')
  }
}

后端适配说明 #

Laravel后端逻辑不需要做任何修改，和使用统一card元素时的逻辑完全一致：正常创建Payment Intent并返回client_secret给前端即可。

内容的提问来源于stack exchange，提问作者Vijai Pandey