reactjs - 如何在 Google 支付反应按钮中调用 onPaymentAuthorized 成功和错误状态?
问题描述
我正在实现 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' })}
/>
解决方案
下面是一个示例,说明您可以如何使用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
推荐阅读
- r - 计算朴素贝叶斯分类器的准确度、精确度和召回率(手动计算)
- javascript - 我们如何键入一个类工厂来生成一个给定对象字面量的类?
- xaml - 如何在 uwp 中默认 navigationviwe 显示模式?
- java - 为数字对象实现 Parcelable 时出现 ClassCastException
- angular - Angular 5:我们如何使用 routeroutlet 将数据从嵌套组件传递到父组件?
- bash - 终端 - 关闭所有终端窗口/进程
- kubernetes - ingress-nginx 没有 IP 地址
- python - 我想将所有特征集合转换为 Leaflet 中的几何集合
- wordpress - ReactJS 应用程序上的动态 URL 与使用 Rest API 的 wordpress 相同 - Wordpress
- python - 控制台关闭后如何保持浏览器打开