Necesito llamar a api en la función javascript como se muestra a continuación, pero no toma servicios inyectados ( subService ) o variables definidas ( formData ) en la función javascript y obtiene un error de undefined addSub . ¿Cómo debo llamar a api en la función javascript?

Por favor ayuda y guía.

HTML

 <button class="btn" (click)="initializePayment(item.id,item.price)">click here</button>

TS

 formData: any; loading: boolean = false; constructor( private subService: SubService, ) { } initializePayment(sid,amount: number) { this.loading = true; const paymentHandler = (<any>window).StripeCheckout.configure({ key: this.stripeKey, locale: 'auto', token: function (stripeToken: any) { console.log({stripeToken}); const sToken = stripeToken.id; this.formData = new FormData(); this.formData.append('id', this.id); this.formData.append('s_id', sid); this.formData.append('stripeToken', sToken); this.subService.addSub(this.formData).subscribe( (response) => { this.loading = false; console.log('resp: ', response); if (response['status'] === true) { this.notifyService.showSuccess( 'success!!','' ); //window.location.reload(); this.router.navigate(['/user']); } else { this.notifyService.showError( 'Something went wrong. Please try later!!!','' ); } }, (error) => { this.notifyService.showError( error, 'Oooops Something went wrong. Please try later!!' ); this.loading = false; } ); //alert('Stripe token generated!'); } }); paymentHandler.open({ name: 'test', description: 'Upgrade', amount: amount * 100 }); }