React Native中使用Stripe createPaymentMethod获取paymentMethodId遇问题

场景与代码 #

已在App.js中通过公钥配置Stripe Provider，无异常。在组件中使用CardField并通过useState存储cardDetails，尝试通过以下代码获取paymentMethodId：

const {error, paymentMethod} = await stripe.createPaymentMethod({
  paymentMethodType: 'Card',
  paymentMethodData: {
     cardDetails,
     billingDetails: {
     name: checkout.payment.fullName,
  },

});
if (error) {
  console.log(error);
  return;
}

错误日志 #

LOG  {"code": "Failed",
      "declineCode": null,
      "localizedMessage": "Card details not complete",
      "message": "Card details not complete",
      "stripeErrorCode": null,
      "type": null}

当前cardDetails内容 #

LOG  {"brand": "Visa",
      "complete": true,
      "expiryMonth": 5,
      "expiryYear": 25,
      "last4": "4242",
      "validCVC": "Valid",
      "validExpiryDate": "Valid",
      "validNumber": "Valid"}

CardParams类型定义 #

export declare type CardParams = {
    paymentMethodType: 'Card';
    paymentMethodData?: {
        token?: string;
        billingDetails?: BillingDetails;
    };
} | {
    paymentMethodType: 'Card';
    paymentMethodData: {
        paymentMethodId: string;
        cvc?: string;
        billingDetails?: BillingDetails;
    };
};

核心困惑 #

• cardDetails显示complete: true，但仍提示卡片信息不全
• CardParams类型中无cardDetails字段，不清楚如何传入卡片信息创建PaymentMethod

解决方案 #

问题出在错误传入了cardDetails字段，@stripe/stripe-react-native的CardField组件已与Stripe SDK绑定，会自动将用户输入的卡片信息传递给createPaymentMethod，无需手动传入cardDetails。

正确代码写法如下：

const { error, paymentMethod } = await stripe.createPaymentMethod({
  paymentMethodType: 'Card',
  paymentMethodData: {
    billingDetails: {
      name: checkout.payment.fullName,
    },
  },
});
if (error) {
  console.log(error);
  return;
}
// 成功后通过paymentMethod.id获取paymentMethodId

补充说明 #

• 使用CardField组件时，createPaymentMethod会自动读取CardField中的有效卡片数据，无需手动传递cardDetails
• 若手动收集卡片信息（不使用CardField），才需要通过token字段传入Stripe生成的卡片令牌，或使用其他参数格式
• 你之前传入的cardDetails是CardField返回的元数据，并非createPaymentMethod所需的参数格式，导致Stripe无法正确识别卡片信息，从而抛出错误

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