Apple Pay 流程后，支付令牌变得未定义

Question

我正在使用 react-native 开发 Apple Pay。我配置了所有内容并使用了 react-native-payment 组件。这是我的代码：

onPressApplePay=()=>{
    console.log("1- start Apple Pay");
    if (!DataManager.getInstance().isConnected()) {
       this.myAlert(I18n.t("NoInternetConnectionState"));
       return;
    }

    const DETAILS = {
    id: 'basic-example',

     displayItems: [
       {
         label: 'items',
         amount: { currency: 'EUR', value: '2' },
       },
     ],
     total: {
       label: 'MyApp',
       amount: { currency: 'EUR', value: '2' },
     },

      };

      const METHOD_DATA = [{
         supportedMethods: ['apple-pay'],
         data: {
           merchantIdentifier: 'merchant.com.myapp',
           supportedNetworks: [ 'mastercard', 'visa'],
           countryCode: 'IT',
           currencyCode: 'EUR'
         }
       }];
     const paymentRequest = new PaymentRequest(METHOD_DATA, DETAILS);

     console.log("2- paymentRequest.show", paymentRequest);
     paymentRequest.show()
     .then((paymentResponse) => {
       const { paymentToken } = paymentResponse.details; // On Android, you need to invoke the `getPaymentToken` method to receive the `paymentToken`.

       paymentRequest.canMakePayments()
  .then(canMakePayments => {
    console.log("canMakePayments", canMakePayments);
      console.log("paymentToken", paymentToken);

    // Show fallback payment method
  });

     })
     .catch((err) => {
       console.log("4- err", err);
       console.log("5- paymentRequest", err);
       //alert("The apple pay cancel");
       // The API threw an error or the user closed the UI
     });

问题是当我尝试执行 Apple Pay 时，它说 'Payment is not completed' 和令牌变得未定义。你能告诉我问题可能隐藏在哪里吗？我应该提一下，我在使用真实卡和沙盒的真实设备上尝试了这段代码，但在所有情况下都失败了。提前致谢。

Answer 1

该组件也适用于 stripe 和 Braintree。问题是我需要添加一个网关和一个 public 密钥，在我的例子中它是从 stripe 提供的。

const METHOD_DATA = [{
         supportedMethods: ['apple-pay'],
         data: {
           merchantIdentifier: 'merchant.yyyy.xxxx',
           supportedNetworks: [ 'mastercard'],
           countryCode: 'IT',
           currencyCode: 'EUR',
           paymentMethodTokenizationParameters: {
            parameters: {
             gateway: 'stripe',
             'stripe:publishableKey': 'pk_test_XXXXXXX',
             'stripe:version': '5.0.0' // Only required on Android
          }
        }
      }
   }];

然后我安装了以下插件：

yarn add react-native-payments-addon-stripe
yarn add react-native-payments-cli
yarn react-native-payments-cli -- link stripe

（您还需要 Carthage update 才能使它们工作）

然后我在 stripe.com 注册了一个帐户并使用了它的发布密钥，终于成功了！！我还添加了 paymentResponse.complete('success'); 以显示最后支付成功。否则它会陷入等待循环并最终显示 'Payment is not complete'。现在我收到一条带有漂亮令牌的成功消息！

我应该提一下，如果您不使用 stripe 或 Braintree，您将看不到任何标记，并且它始终是未定义的。这是自然的，所以不要担心。您只需将 paymentResponse.details 作为 JSON 传递给您的银行提供商，它就会起作用。因为在那种情况下，您拥有的 transactionid 很重要。

之后，您将完成从此 link 安装的这些步骤。您还需要为 Apple Pay 的证书执行这些步骤：

1- 首先在您的苹果开发者帐户中的应用程序 ID 上，您应该使用商家 ID 启用 Apple Pay。

2- 然后您需要向您的银行索取您商家的证书，该文件如下所示： XXXXX.certSigningRequest.txt

3- 然后 select 您的应用程序 ID 并转到在第一步中启用的 Apple Pay 部分并在那里上传证书。

完成！您的 Apple Pay 可以使用。

Answer 2

提及救了我！我没有意识到，如果您不使用 Stripe/Braintree!

，则令牌为 nil 是正常的

Apple Pay 流程后，支付令牌变得未定义

Payment token becomes undefined after the Apple Pay process

applepay

react-native