如何在Google Pay react按钮中调用ProcessPayment函数？

Question

我正在将google pay集成到react应用程序中。根据文档，token生成后会被传给网关进行支付处理。我正在使用@google-pay/button-react。如何将token传递到网关。我在文档中没有找到任何东西。这个库是自己向网关发送令牌吗？

从google教程向网关发送令牌

 processPayment(paymentDetail) {
  const paymentToken = paymentDetail.paymentMethodData.tokenizationData.token;
  let paymentData = {
    orderId : '12331231232311',
    amount : '50.00'
  }
  axios.post("https://esqa.moneris.com/googlepay/googlepay-api.js", {
    body: JSON.stringify({
      paymentToken,
      paymentData
    })
  }).then(response => {
    if ( response && response.receipt && response.receipt.ResponseCode &&
    !isNaN(response.receipt.ResponseCode) )
    {
    if ( parseInt(response.receipt.ResponseCode) < 50 )
    {
    alert("Looks like the transaction is approved.");
    }
    else
    {
    alert("Looks like the transaction is declined.");
    }
    }
    else
    {
    throw ("Error processing receipt.");
    }
  })
  
}

<GooglePayButton
                environment="TEST"
                paymentRequest={{
                    apiVersion: 2,
                    apiVersionMinor: 0,
                    allowedPaymentMethods: [
                    {
                        type: 'CARD',
                        parameters: {
                        allowedAuthMethods: ['PAN_ONLY'],
                        allowedCardNetworks: ['MASTERCARD', 'VISA', 'DISCOVER', 'AMEX','DISCOVER','JCB','INTERAC'],
                        },
                        tokenizationSpecification: {
                        type: 'PAYMENT_GATEWAY',
                        parameters: {
                            gateway: "moneris",
                            gatewayMerchantId: "monca05217"
                        },
                        },
                    },
                    ],
                    merchantInfo: {
                    merchantId: '12345678901234567890',
                    merchantName: 'Demo Merchant',
                    },
                    transactionInfo: {
                    totalPriceStatus: 'FINAL',
                    totalPriceLabel: 'Total',
                    totalPrice: '50.00',
                    currencyCode: 'USD',
                    countryCode: 'CA',
                    },
                    callbackIntents: ['PAYMENT_AUTHORIZATION'],
                    emailRequired: true,
                }}
                onLoadPaymentData={paymentRequest => {
                    console.log('load payment data', paymentRequest);
                    this.processPayment(paymentRequest)

                }} 
                onPaymentAuthorized={(paymentData) => ({ 
                    transactionState: 'SUCCESS'                                       
                  })} 
                onReadyToPayChange={result => {
                  console.log('ready to pay change', result);
                  this.setState({isReadyToPay : result.isReadyToPay});
                }}                                     
                onCancel={() => alert('Cancelled')}
                existingPaymentMethodRequired = {true}                                  
                />

Answer 1

您需要从onLoadPaymentData调用您的processPayment方法。

您的processPayment负责调用您的后台，并将支付token传递给您的支付网关。

示例：

onLoadPaymentData={paymentRequest => {
  processPayment();
}}

async function processPayment(paymentData) {
  const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
  const response = await fetch("/backend/api", {
    method: "POST",
    body: JSON.stringify({
      paymentToken,
      orderDetails: {/* details about your order */}
    })
  });
}