7.1 KiB

Raw Permalink Blame History

Stripe支付数据流程详解

1. 价格传递机制

1.1 基本价格传递

StripePaymentForm组件通过props接收基本价格信息：

const props = defineProps({
  amount: {
    type: Number,
    required: true // 金额（分）
  },
  currency: {
    type: String,
    default: 'usd' // 货币类型
  },
  // 其他props...
})

关键说明：

amount 以分为单位（例如：100表示1美元或100日元）
currency 默认为'usd'，支持Stripe支持的所有货币

1.2 费用计算逻辑

组件内部会根据基础金额计算税费和运费：

// 计算税费和运费
const calculateFees = () => {
  // 模拟税费计算（8%）
  taxAmount.value = Math.round(props.amount * 0.08)
  
  // 模拟运费计算（满99免费）
  shippingAmount.value = props.amount >= 9900 ? 0 : 1000
}

1.3 优惠券处理

组件支持优惠券折扣，会从最终金额中扣除：

// 优惠券应用逻辑
if (discount < 1) {
  // 百分比折扣
  discountAmount.value = Math.round(props.amount * discount)
} else {
  // 固定金额折扣
  discountAmount.value = Math.min(discount, props.amount)
}

1.4 最终金额计算

通过计算属性finalAmount得出最终支付金额：

const finalAmount = computed(() => {
  return props.amount + taxAmount.value + shippingAmount.value - discountAmount.value
})

2. Stripe订单数据格式

2.1 支付方式创建数据

在processPayment函数中，创建支付方式时使用的数据格式：

const { error, paymentMethod: pm } = await stripe.value.createPaymentMethod({
  type: 'card',
  card: cardElement.value,
  billing_details: { email: props.customerEmail }
})

参数说明：

type: 支付方式类型，这里固定为'card'
card: Stripe卡片元素实例
billing_details: 账单详情，包含客户邮箱

2.2 支付方式返回数据结构

Stripe返回的支付方式数据结构示例：

{
  id: 'pm_1234567890',
  object: 'payment_method',
  billing_details: {
    address: {
      city: null,
      country: null,
      line1: null,
      line2: null,
      postal_code: null,
      state: null
    },
    email: 'customer@example.com',
    name: null,
    phone: null
  },
  card: {
    brand: 'visa',
    checks: {
      address_line1_check: null,
      address_postal_code_check: null,
      cvc_check: 'pass'
    },
    country: 'US',
    exp_month: 12,
    exp_year: 2025,
    fingerprint: 'abcdef1234567890',
    funding: 'credit',
    last4: '4242',
    networks: {
      available: ['visa'],
      preferred: null
    },
    three_d_secure_usage: {
      supported: true
    },
    wallet: null
  },
  created: 1678901234,
  customer: null,
  livemode: false,
  type: 'card'
}

2.3 支付成功事件数据

支付成功后，组件通过payment-success事件返回的数据格式：

emit('payment-success', {
  paymentMethodId: paymentMethod?.id,
  orderId: props.orderId,
  amount: finalAmount.value,
  currency: props.currency
})

返回数据说明：

paymentMethodId: Stripe支付方式ID
orderId: 订单ID（从props接收）
amount: 最终支付金额（分）
currency: 货币类型

2.4 与后端交互的数据格式

在实际项目中，前端需要将支付信息发送到后端，后端再与Stripe API交互。典型的数据格式：

// 前端发送给后端的数据
const paymentData = {
  orderId: props.orderId,
  paymentMethodId: paymentMethod.id,
  amount: finalAmount.value,
  currency: props.currency,
  customerEmail: props.customerEmail,
  // 其他订单相关信息
}

// 后端返回的数据
const response = {
  success: true,
  paymentIntentId: 'pi_1234567890',
  chargeId: 'ch_1234567890',
  orderStatus: 'paid'
}

3. 数据流向图

父组件
  │
  ├─── 传递基本价格信息 ───► StripePaymentForm组件
  │                           │
  │                           ├─── 计算税费和运费
  │                           │
  │                           ├─── 应用优惠券折扣
  │                           │
  │                           ├─── 创建支付方式 ───► Stripe API
  │                           │                           │
  │                           │                           └─── 返回支付方式数据
  │                           │
  │                           ├─── 发送支付数据 ───► 后端API
  │                           │                           │
  │                           │                           └─── 返回支付结果
  │                           │
  │                           └─── 触发支付事件 ───► 父组件
  │
  └─── 处理支付结果

4. 实际使用示例

4.1 父组件传递价格

<template>
  <StripePaymentForm
    :amount="10000" <!-- 100.00 元 -->
    :currency="'cny'"
    :order-id="'ORDER-20250101-001'"
    :customer-email="'user@example.com'"
    @payment-success="handlePaymentSuccess"
    @payment-error="handlePaymentError"
  />
</template>

4.2 支付成功处理

const handlePaymentSuccess = (paymentResult) => {
  console.log('Payment successful:', paymentResult)
  // 输出示例：
  // {
  //   paymentMethodId: 'pm_1234567890',
  //   orderId: 'ORDER-20250101-001',
  //   amount: 10800, // 108.00 元（含8%税费）
  //   currency: 'cny'
  // }
  
  // 跳转到支付成功页面或更新订单状态
}

5. 注意事项

金额单位：始终使用分作为金额单位，避免浮点数精度问题
货币一致性：确保前端和后端使用相同的货币类型
税费计算：实际项目中应根据地区和法规调整税费计算逻辑
运费规则：根据实际业务需求调整运费计算规则
优惠券验证：生产环境中应通过后端API验证优惠券有效性
支付结果处理：必须处理支付成功和失败的情况
幂等性设计：确保重复支付请求不会导致多次扣款

6. 扩展建议

支持多种货币：根据用户地区自动切换货币
动态税费计算：根据不同地区和商品类型计算税费
灵活运费规则：支持多种运费模板和免运费条件
优惠券系统集成：与后端优惠券系统深度集成
支付方式扩展：支持Apple Pay、Google Pay等多种支付方式
支付意图创建：在后端创建Payment Intent，提高支付安全性

7. 总结

StripePaymentForm组件通过props接收基本价格信息，内部计算税费、运费和优惠券折扣，最终生成支付金额。支付过程中，组件与Stripe API交互创建支付方式，然后将支付信息发送到后端处理。支付结果通过事件通知父组件，完成整个支付流程。

了解数据流向和格式对于集成和扩展Stripe支付功能至关重要，可以帮助开发人员更好地理解和调试支付流程，确保支付系统的安全性和可靠性。

7.1 KiB Raw Permalink Blame History Unescape Escape