问题描述
我正在实施一项功能,允许用户购买物品并通过GPay表上输入带有收货地址的Google Pay付款,然后将计算出运费并更新为总金额。但是有时候,当我使用现有地址打开付款单时,在计算运费时不会显示加载图标。
我实现了onPaymentDataChanged并正确地返回了Promise,但是我不知道为什么有时GPay表显示加载以防止用户在计算运费时单击PAY按钮,但有时却不这样做。任何有经验的人,请帮忙!
解决方法
您有一些示例代码来显示到目前为止的操作吗?
我整理了以下JSFiddle:
button.onPaymentDataChanged = paymentData => {
// The below promise is used to simulate calling an API to calculate shipping
return new Promise((resolve,reject) => {
setTimeout(() => {
const shippingOption = shippingOptions.find(o => o.id === paymentData.shippingOptionData.id);
const { displayItems } = paymentRequest.transactionInfo;
let response = {};
if (displayItems) {
const shippingItem = displayItems.find(i => i.label === 'Shipping');
if (shippingItem && shippingOption) {
shippingItem.price = shippingOption.price;
shippingItem.status = 'FINAL';
response = {
newTransactionInfo: {
...paymentRequest.transactionInfo,displayItems: displayItems,totalPrice: displayItems.reduce((sum,i) => sum + parseFloat(i.price),0).toFixed(2),}
};
}
}
resolve(response);
},3000);
});
}
最重要的是,您使用onPaymentDataChanged
方法返回了某些内容。它可以是PaymentDataRequestUpdate
对象,也可以是解析同一对象的Promise。
仅供参考,JSFiddle使用Google Pay custom element。如果使用React,则React version也可用。
根据comment更新:
我认为我能够复制。但是,对我来说,它似乎只是在我第一次单击按钮时显示正确价格(有时是 )。这使我认为可能会缓存初始值。随后单击按钮总是显示原始价格,然后显示无声更新。对我来说,这听起来像个虫子。
作为解决方法,您可以在处理paymentRequest
时尝试更新onPaymentDataChanged
。查看更新后的JSFiddle:
button.onPaymentDataChanged = paymentData => {
// ...
response = {
newTransactionInfo: {
...paymentRequest.transactionInfo,}
};
paymentRequest.transactionInfo = response.newTransactionInfo;
// ...
}