Ionic/Angular Square 网络支付答案

【问题标题】：Ionic/Angular Square Web PaymentsIonic/Angular Square 网络支付
【发布时间】：2021-08-26 23:15:54
【问题描述】：

我目前正在 Ionic 5 中开发一个应用程序。剩下要做的事情之一就是将 Square Payments 集成到应用程序中。目前我使用脚本服务加载脚本，然后运行代码生成付款表单等：

/// 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));

这部分一切正常。然而，在加载 square.js 之后，它似乎接管了应用程序？所有console.logs都来自square.js，所有路由似乎也通过square.js，角度抛出错误。

如您所见，第一个控制台日志是由 page.ts 抛出的，然后其余的都是正方形，尽管它们实际上是从 page.ts 中的函数调用的。导航现在显然也是在 Angular 区域之外触发的。我不确定发生了什么，希望有人能指出我正确的方向。

编辑：如果这有帮助，我忘了提到 window.location.href 可以让一切再次正常工作。但它并不理想，因为它会完全刷新页面。谢谢

【问题讨论】：

标签： javascript angular ionic-framework square

【解决方案1】：

我在 NG12 中遇到了类似的情况。我将 zone.js rxjs 补丁添加到 polyfills.ts 文件中以解决问题

/**************************************************************************> *************************
 * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 import 'zone.js/dist/zone-patch-rxjs';

参考：https://betterprogramming.pub/zone-js-for-angular-devs-573d89bbb890

【讨论】：