React Native中Stripe PlatformPayButton无法触发onShippingContactSelected回调求助

问题描述 #

我正在使用React Native的Stripe PlatformPayButton组件实现Apple Pay结账功能，流程要求必填收货地址，且已在createPlatformPayPaymentMethod的初始调用中设置该字段为必填项。但使用onShippingContactSelected属性时，回调函数从未触发，Apple Pay界面卡在“处理中”状态，最终取消支付。相关代码如下：

<PlatformPayButton
  onPress={handleBuyNow}
  type={PlatformPay.ButtonType.Buy}
  appearance={PlatformPay.ButtonStyle.Black}
  borderRadius={4}
  style={styles.applePayButton}
  onShippingContactSelected={event => {
     console.log('Contact: ', event.shippingContact);

     updatePlatformPaySheet({
     applePay: {
       cartItems: [
         {
           label: 'item',
           amount: String('10'),
           paymentType: PlatformPay.PaymentType.Immediate,
         },
       ],
       shippingMethods: shippingMethods,
       errors: [],
     },
   });
   }}
/>

解决方案 #

1. 确认createPlatformPayPaymentMethod初始配置完整性 #

必须在初始调用中明确开启收货地址必填，并指定配送类型，否则Apple Pay不会触发地址选择后的回调。示例配置：

const { error } = await createPlatformPayPaymentMethod({
  applePay: {
    merchantIdentifier: "你的商户ID",
    cartItems: [/* 购物车项配置 */],
    shippingContactRequired: true,
    shippingType: PlatformPay.ShippingType.Shipping, // 关键配置，不可省略
    // 其他必要配置（如国家代码、货币等）
  },
});

2. 让回调返回Promise（使用async/await） #

Stripe需要等待回调内的更新操作完成后才能继续流程，当前代码未返回Promise是导致卡顿的核心原因。修改后的回调：

onShippingContactSelected={async (event) => {
  console.log('Contact: ', event.shippingContact);

  // 可在此根据收货地址执行运费计算、配送方式更新等逻辑
  const updatedShippingMethods = shippingMethods;

  await updatePlatformPaySheet({
    applePay: {
      cartItems: [
        {
          label: 'item',
          amount: String('10'),
          paymentType: PlatformPay.PaymentType.Immediate,
        },
      ],
      shippingMethods: updatedShippingMethods,
      errors: [],
    },
  });
}}

3. 添加错误捕获与处理 #

如果updatePlatformPaySheet调用失败，会导致流程卡住，需添加错误捕获并反馈给用户：

onShippingContactSelected={async (event) => {
  try {
    console.log('Contact: ', event.shippingContact);
    await updatePlatformPaySheet({
      // 表单更新配置
    });
  } catch (err) {
    console.error('支付表单更新失败:', err);
    // 向用户展示错误信息
    await updatePlatformPaySheet({
      applePay: {
        // 保留原有购物车、配送方式配置
        errors: [{ field: 'shippingContact', message: '地址处理失败，请重试' }],
      },
    });
  }
}}

4. 验证测试环境 #

• 确保测试设备支持Apple Pay，且已添加有效的测试支付卡片
• 确认使用的商户ID与当前环境（沙盒/生产）匹配，避免混用

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