Square Web Payments SDK初始化Cash App Pay后无法更新支付总金额

问题背景 #

接入Cash App Pay支付时，初始化流程为：先获取订单总金额，完成Cash App Pay初始化后渲染对应支付按钮，初始化实现代码如下：

cashAppInitialize: function(payments) {
  var $this = this;
  new Promise(function (resolve, reject) {
    var amount = $this.getTotalAmount().toString();
    var currency = $this.getCurrency();
    
    var paymentRequest = payments.paymentRequest({
      countryCode: 'US',
      currencyCode: currency,
      total: {
        amount: amount,
        label: 'Total',
        pending: false
      }
    });
    // 补充存储paymentRequest实例引用，避免后续状态混乱
    $this.cashAppPaymentRequest = paymentRequest;
    var cashAppPay = payments.cashAppPay(paymentRequest, {
      redirectURL: window.location.href,
      referenceId: ((Math.random() + 1).toString(36).substring(7))+Math.random(),
    });
    if (cashAppPay) {
      resolve(cashAppPay);
    } else {
      reject(cashAppPay);
    }
  }).then(function (cashAppPay) {
    $this.cashAppPayInstance = cashAppPay;
    var buttonOptions = {
      shape: 'semiround',
      width: 'full',
      size: 'medium'
    };
    if ($$('#cash-app-pay') && $$('#cash-app-pay').length > 0) {
      cashAppPay.attach('#cash-app-pay', buttonOptions);
    }
    try {
      if (cashAppPay) {
        cashAppPay.addEventListener('ontokenization', (event) => {
          var { tokenResult } = event.detail;
          var tokenStatus = tokenResult.status;
          if (tokenStatus === 'OK') {
            $this.attachPaymentMethodToForm(tokenResult.details.method);
            $this.attachTokenToForm(tokenResult.token);
            $this.resubmitForm();
          }
        });
      }
    } catch (e) {
      var errorMessage = $this.getErrorMessage('cashApp', e);
      $this.handlePaymentMethodAlerts('cashApp', errorMessage);
      console.log(e);
    }
  }).catch(function (error) {
    var errorMessage = $this.getErrorMessage('cashApp', error);
    $this.handlePaymentMethodAlerts('cashApp', errorMessage);
    console.log(error);
  });
},

初始化完成后页面可正常渲染Cash App Pay支付按钮，点击按钮即可展示支付二维码。代码中监听了ontokenization事件，该事件触发的请求会固定携带初始化时传入的总金额信息。

遇到的问题 #

需要动态更新请求中携带的amount（总金额）值，但Cash App Pay完成初始化后，调用paymentRequest实例的update方法始终返回false，无法完成总金额更新。
尝试调用cashAppPay实例的destroy方法销毁现有实例，虽然该方法可以从DOM中移除已渲染的Cash App支付按钮，但后续无法完成实例重新初始化，控制台抛出报错。
原有销毁后重初始化逻辑如下（注释部分为最初尝试直接更新金额的逻辑）：

updatePaymentRequest: function() {
  var $this = this;
  var amount = paymentTotal.toString();

  if ($this.cashAppPayInstance) {
    $this.cashAppPayInstance.destroy().then(function() {
      $this.cashAppInitialize($this.payments);
    });
    return;
  }

  // var params = {
  //   countryCode: 'US',
  //   currencyCode: $this.getCurrency(),
  //   total: {
  //     amount: amount,
  //     label: 'Total',
  //     pending: false
  //   }
  // };

  // var updateSuccessful = $this.cashAppPaymentRequest.update(params);
  // console.log('sd', updateSuccessful);
},

可行解决思路 #

1. 问题根因 #

• Cash App Pay的paymentRequest在绑定到cashAppPay实例后会被SDK锁定，不支持直接调用update方法修改金额，属于SDK设计限制，并非调用逻辑错误。
• 销毁实例后重初始化失败，是因为原有逻辑没有清空旧实例引用、没有清理DOM容器残留状态，且尝试复用旧的paymentRequest对象，触发SDK的状态校验报错。

2. 修正后的实现逻辑 #

销毁实例后重新初始化时，需要完成三个清理动作再走初始化流程：

• 清空旧的cashAppPay、paymentRequest实例引用
• 手动清空支付按钮挂载容器的内部DOM残留
• 初始化时生成全新的paymentRequest对象，禁止复用旧实例
  修正后的updatePaymentRequest代码如下：

updatePaymentRequest: function() {
  var $this = this;
  // 实时获取最新订单金额，不要使用外部未同步更新的变量
  var amount = $this.getTotalAmount().toString();

  if ($this.cashAppPayInstance) {
    $this.cashAppPayInstance.destroy().then(function() {
      // 清空所有旧实例引用
      $this.cashAppPayInstance = null;
      $this.cashAppPaymentRequest = null;
      // 清理挂载容器残留
      const payContainer = document.getElementById('cash-app-pay');
      if (payContainer) payContainer.innerHTML = '';
      // 重新执行完整初始化流程，生成全新实例
      $this.cashAppInitialize($this.payments);
    }).catch(function(err) {
      console.log('Cash App实例销毁失败:', err);
    });
    return;
  }
},

3. 注意事项 #

• 初始化时生成的referenceId需保证全局唯一，原有随机数生成逻辑可正常使用，不会出现冲突。
• 如果金额更新时支付二维码弹窗已经打开，需要先关闭弹窗再更新按钮状态，避免用户扫码时实际支付金额和订单金额不一致。
• 每次重新初始化必须调用payments.paymentRequest()生成全新的请求对象，复用旧对象会持续触发初始化报错。

内容的提问来源于stack exchange，提问作者sumercetin