Unable to update total value in square cash app

Question

I'm using Square web payments SDK and I initialize Cash App Pay. At first (in initialization phase), I determine the total amount and initialize Cash App Pay, which renders the Cash App Pay button. This is how it is initialized:

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
          }
        });
        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);
      });
    },

After running this method, Cash App Pay button will be rendered on the page, and when I click on it, I'm able to see the QR code for payment. In the meantime, I'm listening the response from the ontokenization event above, which constantly sends a request with the total amount information in it

What I'd like to do is that to update this 'amount' value. However, the 'update' method in paymentRequest instance always returns false when Cash App Pay is initialized. Thus, I am not able to update the total amount.

Another workaround I've tried is to call the 'destroy' method in Square.payments().cashAppPay . However, it also does not seem to work as expected. Although I destroyed the related Cash App button from the DOM, I was not able to reinitialize it. Below you can find the console errors I received:

This is how I destroy and recall cashAppInitialize . The commented out code was supposed to update the amount value:

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);
        },

Is it somehow possible to update the total amount that's sent to Cash App Pay, and change the QR code with the updated amount? Any help is appreciated.

Answer 1

This worked for me although update your code to resemble the docs

        try{
            cashAppPay.attach('#cash-app-pay', buttonOptions);
        } catch (e) {
            console.log("Initialize error",e)
            //get the exact message and match it to the if statement
            //the exact error i got when trying to update the amount before destroying was as per my .match() in the if statement below
            console.log(e.message)
            const error_msg = e.message
            if(error_msg.match('already rendered')){
                await cashAppPay.destroy();
                await cashAppPay.attach('#cash-app-pay', buttonOptions);
            }
    }

basically you are to destroy the previous qr code and attach a new one when upating the amount value or any of its required options. I've only placed the correct code to try suit your code if you use async await as per the docs. Thenables tend to be too much writing and nesting

Good luck. Hope you find a better solution than mine.