如何在客户端以条带响应原生方式获取付款方式ID？

Question

我正在尝试使用@stripe/stripe-react-native 包从前端部分获取 paymentMethodId。当我尝试将此付款方式 ID 发送到后端时，它总是响应

"error": "No such PaymentMethod: 'pm_1KXyV2SIMTNTi7PjZyzhziG2'"

这是 createPaymentMethod 函数的 JSON 响应。

Object {
  "AuBecsDebit": Object {
    "bsbNumber": null,
    "fingerprint": null,
    "last4": null,
  },
  "BacsDebit": Object {
    "fingerprint": null,
    "last4": null,
    "sortCode": null,
  },
  "Card": Object {
    "brand": "Visa",
    "country": "US",
    "expMonth": 4,
    "expYear": 2024,
    "fingerprint": null,
    "funding": "credit",
    "last4": "4242",
  },
  "Fpx": Object {
    "bank": "",
  },
  "Ideal": Object {
    "bankIdentifierCode": "",
    "bankName": "",
  },
  "SepaDebit": Object {
    "bankCode": null,
    "country": null,
    "fingerprint": null,
    "last4": null,
  },
  "Sofort": Object {
    "country": null,
  },
  "Upi": Object {
    "vpa": null,
  },
  "billingDetails": Object {
    "address": Object {
      "city": null,
      "country": null,
      "line1": null,
      "line2": null,
      "postalCode": null,
      "state": null,
    },
    "email": "DEMO2mwVTg@gmail.com",
    "name": "DEMO2mwVTg",
    "phone": null,
  },
  "customerId": null,
  "id": "pm_1KXylHSIMTNTi7PjuhvGrnqI",
  "livemode": false,
  "type": "Card",
}

这是我的支付界面

const [cardDetails, setCardDetails] = useState({});
  const [loading, setLoadng] = useState(false);
  const { user } = useAuth();

  const handlePayment = async () => {
    setLoadng(true);
    try {
      const response = await createPaymentMethod({
        type: "Card",
        cvc: cardDetails.cvc,
        billingDetails: {
          email: user.email,
          name: user.username,
          customerId: "", //Created customer and passed the customer Id
        },
      })
        .then((result) => {
          if (result.error) {
            setLoadng(false);
            Alert.alert("Error", result.error.message);
          } else {
            setLoadng(false);
            console.log(result.paymentMethod);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    } catch (err) {
      console.log(err.message);
    }
  };

return (
    <View style={{ padding: 20 }}>
      <CardField
        onCardChange={(card) => setCardDetails(card)}
        style={{ width: "100%", height: 100 }}
        postalCodeEnabled={false}
        autofocus={true}
      />
      <StripeButton
        variant="primary"
        loading={loading}
        title="Pay"
        disabled={!cardDetails.complete}
        onPress={() => handlePayment()}
      />
    </View>
  );

这是我的家长付款屏幕

const PaymentScreen = ({ paymentMethod, children }) => {
  const [loading, setLoading] = useState(true);

  const publishableKey = ""; //I've also added PK

  <StripeProvider publishableKey={publishableKey} urlScheme="sft.ch">
    <PaymentScreen />
  </StripeProvider>;
};

Answer 1

您的 React Native 代码看起来很正常。您可能想确认您的后端在收到该 PaymentMethod 时正在做什么。

当您的后端使用与您前端的可发布密钥属于不同 Stripe 帐户的密钥时，错误消息“No such PaymentMethod...”是一个常见错误。

如何在客户端以条带响应原生方式获取付款方式ID？

How to get payment method id in stripe react native on the client side?

react-native

stripe-payments