window.open() with ios for an async function not working-CodePudding

In my app so far all the window.open calls work fine on iOS but this one is using an async function.

Is there a solution for this? I have spent several hours trying various things from stackoverflow.

I have seen that installing the inAppBrowser may help which I have not tried yet. https://capacitorjs.com/docs/apis/browser

I also saw that putting the window.open in the click event may allow it but this would require the user to make another click which is not ideal.

It works fine on Android.

<ion-button type="button" color="primary" expand="block" (click)="onCreateStripePortalSession()">
        Manage my cards
</ion-button>

async onCreateStripePortalSession() {
    const returnUrl = `https://myapp.app/goto/${this.tenant.slug}/account`;
    try {
      const session = await this.stripeService.createStripePortalSession(this.member.stripeCustomerId, returnUrl);
      if (session.url) {
        // Go to Stripe Customer Portal
        window.open(session.url, '_blank');
      }
    } catch (err) {
      console.log(err);
    }
  }

Edit: This solution does not work

let wref = window.open();
this.stripeService.createStripePortalSession(...).then(ps => {
  wref.location = ps.url;
});

CodePudding user response：

This is not a great solution as it requires the user to click two buttons instead of one. It avoids the issue by getting the user to action opening the url rather than calling it in an async function.

If someone comes up with a better solution I will accept that.

    const session = await this.stripeService.createStripePortalSession(this.member.stripeCustomerId, returnUrl);
    if (session.url) {
      // Go to Stripe Customer Portal
      this.notificationService.presentAlertWithExternalUrlOption('Manage my Cards', 'Go to Stripe to manage your cards?', 'Lets go', session.url);
    }
    
     presentAlertWithExternalUrlOption(header: string, message: string, routeLabel: string, url: string) {
        this.alertCtrl.create({
          header,
          cssClass: 'ion-alert-custom',
          message,
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel'
            },
            {
              text: routeLabel,
              handler: () => {
                window.open(url, '_blank');
              }
            },
        ]
        }).then(alertEl => {
          alertEl.present();
        });
      }