Ionic 5 adding strip integration

BilingPage.html:16 ERROR TypeError: Cannot read property ‘open’ of undefined
at BilingPage.payMonthlySubscription (VM6093 biling-biling-module.js:192)
at Object.eval [as handleEvent] (VM6398 BilingPage.ngfactory.js:47)
at handleEvent (VM5872 vendor.js:77277)
at callWithDebugContext (VM5872 vendor.js:78896)
at Object.debugHandleEvent [as handleEvent] (VM5872 vendor.js:78531)
at dispatchEvent (VM5872 vendor.js:64364)
at VM5872 vendor.js:76209
at HTMLElement. (VM5872 vendor.js:90060)
at ZoneDelegate.invokeTask (VM5869 polyfills.js:3741)
at Object.onInvokeTask (VM5872 vendor.js:73280)
View_BilingPage_0 @ BilingPage.html:16
proxyClass @ compiler.js:19671
logError @ core.js:45546
handleError @ core.js:6066
dispatchEvent @ core.js:29808
(anonymous) @ core.js:42925
(anonymous) @ platform-browser.js:2668
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
BilingPage.html:16 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…}}

my code

ionViewDidLoad(){

const data = JSON.parse(localStorage.getItem(‘userData’));

setTimeout(() => {

this.handler = StripeCheckout.configure({

 key: 'pk_live_EycRreERERdDFSJrPNbDVj',

 image: 'https://nautalert.com/images/NautSmallIcon.png', // Picture you want to show in pop up

 locale: 'auto',

 email: data.userData.email,

 token: token => {

   // Handle Stripe response

    token["plan"] = this.plan_id;

    token["user_id"] = data.userData.user_id;

    console.log(token);

    this.httpClient.post('https://nautalert.com/store/jsoncharge.php', 

                    JSON.stringify(token))

     .subscribe(res => {

       var response: any;

       response = res;

       console.log(response.message);

       console.log(response.success);

       if (response.success) {

          this.vesselProvider.getVesselData(data.userData).subscribe(vData => {

             console.log("Vessel data retrieved");

             this.vesselData = <any>vData;

             if (this.vesselData.completed == false)

                // this.navCtrl.setRoot(VesselPage);

                this.navCtrl.navigateRoot('vessel');

             else

                // this.navCtrl.setRoot(HomePage);

                this.navCtrl.navigateRoot('tab1');

          }, (err) => {

             console.log("No vessel data");

            //  this.navCtrl.setRoot(VesselPage);

            this.navCtrl.navigateRoot('vessel');

          })

       } else {

      //     let alert=  this.alertCtrl.create({

      //       header: 'Subscription Error',

      //       message: response.message,

      //       buttons:['ok']

      //     });

      //     alert.present();

        }

  });

 }

})

}, 1000)

}

@HostListener(‘window:popstate’)

onPopstate() {

this.handler.close(); // To close the pop-up

}

payMonthlySubscription() {

//this.plan_id = ‘plan_G2WNMSQmsr4XOf’;

this.plan_id = ‘M’;

this.handler.open({

name: ‘NautAlert Monthly’, // Pass your application name

amount: 1500 // Pass your billing amount

});

}

paySeasonalSubscription() {

//this.plan_id = ‘plan_G2WN5N3b0HNSeU’;

this.plan_id = ‘S’;

this.handler.open({

name: ‘NautAlert Seasonal’, // Pass your application name

amount: 9900 // Pass your billing amount

});

}

payYearlySubscription() {

//this.plan_id = ‘plan_G2WNVMjVxbEkRA’;

this.plan_id = ‘Y’;

this.handler.open({

name: ‘NautAlert Seasonal’, // Pass your application name

amount: 14900 // Pass your billing amount

});

}

please help