# Stripe支付数据流程详解

## 1. 价格传递机制

### 1.1 基本价格传递

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

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

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

### 1.2 费用计算逻辑

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

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

### 1.3 优惠券处理

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

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

### 1.4 最终金额计算

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

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

## 2. Stripe订单数据格式

### 2.1 支付方式创建数据

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

```javascript
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返回的支付方式数据结构示例：

```javascript
{
  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`事件返回的数据格式：

```javascript
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交互。典型的数据格式：

```javascript
// 前端发送给后端的数据
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 父组件传递价格

```vue
<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 支付成功处理

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

## 5. 注意事项

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

## 6. 扩展建议

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

## 7. 总结

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

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