Integrating square.js ends up with a strange error

I’m currently developing an application in Ionic 5. One of the only things left to do is integrate Square Payments into the app. Currently I load the script using a script service and then run the code to generate the payment form etc:

/// within ngOnInit
this.scriptService.load('square-sandbox').then(async data => {
        const payments = await Square.payments(this.applicationId, this.locationId);

        //Card payments
        let card;
        const cardButton = document.getElementById(
          'card-button'
        );
        const backBtn = document.getElementById('toggle-drawer');

        try {
          card = await this.initializeCard(payments);
        } catch (e) {
          console.error('Initializing Card failed', e);
          return;
        }

        //googlepayments
        let googlePay;
        try {
          googlePay = await this.initializeGooglePay(payments);
        } catch (e) {
          console.error('Initializing Google Pay failed', e);
        }

        async function handlePaymentMethodSubmission(event, paymentMethod) {
          event.preventDefault();
          try {   
            const token = await this.tokenize(paymentMethod);
            const paymentResults = await this.createPayment(token);
            console.log("SUCCESS")
            setTimeout(()=>{
              window.location.href = "/payment-success";
            },250);
            console.debug('Payment Success', paymentResults);
          } catch (e) {
            cardButton.setAttribute("disabled ", "false");
            backBtn.setAttribute("disabled ", "false");
            console.log('FAILURE');
            console.error(e.message);
          }
        }

        if (googlePay !== undefined) {
          const googlePayButton = document.getElementById('google-pay-button');
          googlePayButton.addEventListener('click', async function (event) {
            await handlePaymentMethodSubmission(event, googlePay);
          });
        } 
    }).catch(error => console.log(error));

this part all works fine. However after the loading of square.js it seems to take over the application? All console.logs will come from square.js and all routing seems to also go through square.js with angular throwing an error.

As you can see the first console log is thrown out by page.ts, then the rest are by square despite them actually being called from a function within page.ts. The navigation is also now apparently triggered outside the Angular zone. I’m not sure what is going on and hoping someone can point me in the right direction. Redirecting the page using “window.location.href” instead of angular routing makes everything work fine again if this helps. But it isn’t ideal as it fully refreshes the page. Thanks

1 post - 1 participant

Read full topic