如何在 Google 支付反应按钮中调用 onPaymentAuthorized 成功和错误状态？答案

【问题标题】：How to call onPaymentAuthorized both success and error states in Google pay react button?如何在 Google 支付反应按钮中调用 onPaymentAuthorized 成功和错误状态？
【发布时间】：2021-04-17 22:14:55
【问题描述】：

我正在实现 google pay react 按钮，并希望实现 onPaymentAuthorized 成功和错误。但一次我只能使用成功状态或错误状态。有什么方法可以同时使用它们吗？当用户输入无效卡或卡金额不足时是否使用此功能？请帮我弄清楚。这是我的代码

<GooglePayButton
                                environment="TEST"
                                paymentRequest={{
                                    apiVersion: 2,
                                    apiVersionMinor: 0,
                                    allowedPaymentMethods: [
                                    {
                                        type: 'CARD',
                                        parameters: {
                                        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                                        allowedCardNetworks: ['MASTERCARD', 'VISA'],
                                        },
                                        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: 'US',
                                    },
                                    callbackIntents: ['PAYMENT_AUTHORIZATION'],
                                    emailRequired: true,
                                }}
                                onLoadPaymentData={paymentRequest => {
                                    console.log('load payment data', paymentRequest);
                                    props.cardDetail(paymentRequest,endDate);                                        
                                }} 
                                onPaymentAuthorized={() => ({ transactionState: 'SUCCESS' })}                                   
                                />

【问题讨论】：

标签： reactjs google-pay

【解决方案1】：

下面是一个示例，说明如何使用 onPaymentAuthorized 来检查是否有足够的资金：https://jsfiddle.net/hz3e7pyw/

<GooglePayButton
  environment="TEST"
  paymentRequest={paymentRequest}
  onLoadPaymentData={handleLoadPaymentData}
  onPaymentAuthorized={async () => {
    if (await hasSufficientFunds()) {
      return { transactionState: 'SUCCESS' }; 
    } else {
      return {
        transactionState: 'ERROR', 
        error: {
          reason: "PAYMENT_DATA_INVALID",
          message: "Insufficient funds (shouldSucceed is false), click Pay again.",
          intent: "PAYMENT_AUTHORIZATION"
        }
      }; 
    }
  }}
  />

您将实现自己的hasSufficientFunds 方法并返回相应的错误消息。

另见：https://developers.google.com/pay/api/web/reference/response-objects#PaymentAuthorizationResult

【讨论】：