尚不支持此支付类型 3D Secure stripe payment gateway in react native

Question

我正在尝试在 react native 的 stripe 支付网关中实现 3D 安全支付方式。

该代码适用于普通 4242 xxxx 系列。但是当我放入 3D 安全卡时，这会引发错误。

const PaymentCompleteScreen = () => {  
  const publishableKey ="";

  const handlePayment = async () => {
    setLoading(true);
    try {
      const response = await createPaymentMethod({
        type: "Card",
        card: cardDetails,
        cvc: cardDetails.cvc,
        billingDetails: billingDetails,
      }) //Creating a normal payment method to extract paymentMethodId
        .then(async (result) => {
          if (result.error) {
            setLoading(false);
            Alert.alert("Error", result.error.message);
          } else {
            const paymentMethodId = result.paymentMethod
              ? result.paymentMethod.id
              : null;

            const createSub = await createSubscription(
              paymentMethodId,
              user?.stripeId,
              selectedGroups[0].priceId
            ); //Passing the paymentMethodId to complete the payment.

            if (createSub.status) {
              await deviceStorage.saveItem("cart", JSON.stringify([]));
              Alert.alert(
                "Payment Successful",
                "Your payment was successful. Login again to access the premium group."
              ); //Success
              setLoading(false);
            } else if (createSub.requires_action) //3D Secure
             {
              const { error, paymentIntent } = await confirmPayment(
                createSub.payment_intent_client_secret, //I get this from my backend
                {
                  type: "card",
                }
              );

              console.log(error);

              if (error) {
                setLoading(false);
                Alert.alert("Error", error.code + " " + error.message);
              } else if (paymentIntent) {
                Alert.alert(
                  "Success",
                  "Your payment was successful. Login again to access the premium 
                  group."
                );
                setLoading(false);
              }
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });

      setLoading(false);
    } catch (err) {
      console.log(err.message);
    }
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Text
        style={{
          fontFamily: "Roboto-Regular",
          fontSize: themeStyles.FONT_SIZE_MEDIUM,
          marginTop: 5,
        }}
      >
        Enter your card details to finish the payment
      </Text>
      <StripeProvider publishableKey={publishableKey}>
        <CardField
          onCardChange={setCardDetails}
          postalCodeEnabled={false}
          autofocus={true}
          cardStyle={{
            backgroundColor: "#FFFFFF",
            textColor: "#000000",
          }}
          style={{
            width: "100%",
            height: 50,
            marginVertical: 30,
          }}
        />
        <StripeButton
          variant="primary"
          loading={loading}
          title="Pay"
          disabled={!cardDetails.complete}
          onPress={() => handlePayment()}
        />
      </StripeProvider>
    </View>
  );
};

在 handlePayment() 方法中我做了两件事。

首先创建一个付款方式并将其传递给调用我的后端以创建订阅的 createSubscription 方法。
如果我收到回复状态，则付款成功，否则需要采取一些措施。
使用 require action 键，我也传递了一个这样的对象

Object {
  "data": Object {
    "invoice_id": "in_zzz",
    "subscription_id": "sub_zzz",
  },
  "payment_intent_client_secret": "pi_zzz",
  "requires_action": true,
}

任何解决这个问题的帮助都会对这个项目有很大的改进

Answer 1

这里的实际问题是 confirmPayment() 方法中的 type 是 case-sensitive。您需要使用 type: "Card" 而不是 type: "card"。 SDK中可以看到这是case-specifichere.

编辑：以下是初步答案。 urlScheme 实际上不需要处理 3DS 重定向，但强烈建议这样做，否则客户将不会 return 转到您的应用程序或指定的成功页面。

问题是 3DS 需要 return URL，因为客户将从您的应用程序重定向到发行者的身份验证页面以处理 3DS 身份验证，因此您必须指定他们应该在哪里return完成身份验证后。您在初始化 StripeProvider 时通过 urlScheme 设置此 return URL — 您可以在文档 here.

中查看示例

尚不支持此支付类型 3D Secure stripe payment gateway in react native

This payment type is not supported yet 3D Secure stripe payment gateway in react native

3d-secure

stripe-payments

react-native

expo