reactjs - 如何在 Google Pay 反应按钮中调用 ProcessPayment 功能?
问题描述
我正在将谷歌支付集成到反应应用程序中。根据文档,生成令牌时,它将被传递到网关以进行支付。我正在使用@google-pay/button-react。如何将令牌传递给网关。我在文档中没有找到任何东西。这个库是自己向网关发送令牌吗?
从谷歌教程发送令牌到网关
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}
/>
解决方案
您需要从 调用您的processPayment
方法onLoadPaymentData
。
您processPayment
负责调用您的后端并将支付令牌传递给您的支付网关。
例子:
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 */}
})
});
}
推荐阅读
- linux - Windows 10 上的 Z3 安装问题
- protocol-buffers - 如何找到二进制格式的protocolbuf规范?
- image - React Native:在电子邮件中打开 base64 图像
- javascript - 检索每个区域的上次停机时间
- symfony - “fos_elastica.indexes.app.types.user”下无法识别的选项“mappings”
- google-api - Google 用户照片 API - 无需身份验证即可获取公共用户照片
- python - 熊猫:添加新的计算(分数)行
- php - 提交后如何删除表单信息
- python - python中有哪些原始数据类型?
- c# - automapper 发布“ForMember”属性