Stripe React Native：生成卡片令牌后无法保存卡片以供后续使用

问题分析 #

你的代码存在几个关键问题，导致卡片无法成功保存：

• createToken未关联实际卡片数据：CardField组件通过onCardChange返回的cardDetails包含用户输入的卡片信息，但你调用createToken时未传入这些数据，生成的令牌并未绑定有效卡片。
• URL模板字符串语法错误：用单引号包裹URL会导致${API}无法被解析为实际地址，请求可能发送到了错误的端点。
• 请求参数结构不符合预期：嵌套的source: { source: token.id }结构可能不是后端接口要求的格式，通常Stripe相关接口只需要直接传入source: token.id。
• 缺少错误处理逻辑：没有捕获请求过程中的异常，无法排查后端返回的具体错误信息。

修正后的代码 #

1. 修复createToken调用与请求逻辑 #

const addCardDetails = async () => {
  // 先校验卡片信息是否完整有效
  if (!card.complete) {
    alert('请输入完整有效的卡片信息');
    return;
  }

  try {
    // 传入CardField返回的卡片数据到createToken
    const token = await createToken({
      type: 'Card',
      card: card.card, // 关键：绑定用户输入的卡片信息
      currency: 'usd',
      address: {
        country: 'US',
      },
      name: 'cardName',
    });

    // 调整参数结构，匹配后端接口要求
    const requestBody = {
      card: {
        source: token.token.id
      }
    };

    // 用反引号包裹URL，正确解析模板变量
    const response = await fetch(`${API}/payment/`, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'x-access-token': accessToken,
      },
      body: JSON.stringify(requestBody),
    });

    // 检查响应状态，处理后端错误
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || '保存卡片失败');
    }

    const responseData = await response.json();
    console.info('卡片保存成功:', responseData);
    // 这里可添加保存成功后的逻辑，比如更新本地卡片列表
  } catch (error) {
    console.error('保存卡片出错:', error);
    alert(error.message);
  }
};

2. 确保CardField状态初始化正确 #

确认card状态能正确接收cardDetails的完整信息：

const [card, setCard] = useState({ complete: false });

额外检查项 #

• 确认后端接口接收的参数格式是否正确，是否需要直接传入token.id作为source值。
• 检查Stripe API密钥是否拥有创建客户卡片的权限（若后端关联Stripe Customer对象）。
• 使用Stripe官方测试卡片（如4242 4242 4242 4242）进行测试，确保卡片信息有效。

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