计算运费时，WEB上的GPay工作表有时不显示加载情况

如何解决计算运费时，WEB上的GPay工作表有时不显示加载情况

我正在实施一项功能，允许用户购买物品并通过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;
          // ...
}