React Native+MedusaJS后端：无法为Stripe Payment Intent绑定支付方式

你的核心问题是调用confirmPayment时，payment_method.card参数传入了字符串"card"，这是无效的——Stripe React Native SDK需要获取CardField组件的实例来读取用户输入的卡片信息，而不是硬编码的字符串。

修正步骤 #

1. 给CardField组件添加Ref #

首先需要在CardField上绑定ref，这样才能在提交时获取用户输入的卡片数据：

import { CardField } from '@stripe/stripe-react-native';
import { useRef } from 'react';

// 在组件内部定义ref
const cardFieldRef = useRef(null);

// 渲染CardField时绑定ref
<CardField
  ref={cardFieldRef}
  postalCodeEnabled={true}
  placeholder={{
    number: '4242 4242 4242 4242',
    expiry: 'MM/YY',
    cvc: 'CVC'
  }}
  cardStyle={{
    backgroundColor: '#FFFFFF',
    textColor: '#000000',
  }}
  style={{
    width: '100%',
    height: 50,
    marginVertical: 30,
  }}
/>

2. 修正支付确认函数 #

下面提供两种可行的实现方式，根据你的业务场景选择：

方式一：直接通过confirmPayment关联卡片与Payment Intent

这是最简洁的方式，直接将CardField的ref传入confirmPayment，SDK会自动创建并关联支付方式：

const handleReviewOrderSubmit = async (value) => {
  if (value === "stripe") {
    try {
      const paymentSession = state.cart.payment_session;
      const billingDetails = state.cart.billing_address;
      const clientSecret = paymentSession.data.client_secret;

      const { error, paymentIntent } = await confirmPayment(clientSecret, {
        payment_method: {
          card: cardFieldRef.current, // 使用ref获取CardField实例
          billing_details: billingDetails,
        },
      });

      if (error) {
        alert(`支付失败：${error.message}`);
      } else if (paymentIntent) {
        alert("支付成功");
        // 这里可以添加支付成功后的业务逻辑，比如跳转订单页或更新状态
      }
    } catch (err) {
      alert(`意外错误：${err.message}`);
    }
  }
};

方式二：先创建PaymentMethod，再关联到Payment Intent

如果需要单独处理支付方式的创建逻辑（比如保存支付方式供后续使用），可以先创建PaymentMethod，再关联到已有的Payment Intent：

import { createPaymentMethod, confirmPayment, attachPaymentMethod } from '@stripe/stripe-react-native';

const handleReviewOrderSubmit = async (value) => {
  if (value === "stripe") {
    try {
      const paymentSession = state.cart.payment_session;
      const billingDetails = state.cart.billing_address;
      const clientSecret = paymentSession.data.client_secret;

      // 1. 创建支付方式
      const { error: pmError, paymentMethod } = await createPaymentMethod({
        type: 'Card',
        card: cardFieldRef.current,
        billing_details: billingDetails,
      });

      if (pmError) {
        alert(`创建支付方式失败：${pmError.message}`);
        return;
      }

      // 2. 将支付方式关联到Payment Intent
      const { error: attachError } = await attachPaymentMethod(paymentMethod.id, {
        clientSecret,
      });

      if (attachError) {
        alert(`关联支付方式失败：${attachError.message}`);
        return;
      }

      // 3. 确认支付
      const { error: confirmError, paymentIntent } = await confirmPayment(clientSecret);

      if (confirmError) {
        alert(`支付失败：${confirmError.message}`);
      } else if (paymentIntent) {
        alert("支付成功");
      }
    } catch (err) {
      alert(`意外错误：${err.message}`);
    }
  }
};

关键注意点 #

• 确保billingDetails的格式符合Stripe要求，比如包含name、email、address等必要字段（具体字段取决于你的后端配置）。
• 由于Web端可以正常支付，说明后端的Payment Intent创建逻辑没有问题，只需确保RN端正确传递卡片信息即可。

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