I am facing an issue when trying to call an API in a JavaScript function as shown below. The injected services (subService) and defined variables (formData) are not recognized in the JavaScript function, resulting in an error of undefined addSub. How can I resolve this problem and successfully call the API in the JavaScript function?
Your help and guidance on this matter would be greatly appreciated.
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
});
}