Currently, I am facing a challenge while integrating the Mastercard payment gateway api into an Angular-based application. The api requires a callback for success and error handling, which is passed through the data-error and data-success attributes of the script tag used to load the Mastercard api.
<script src="https://eu-gateway.mastercard.com/checkout/version/49/checkout.js"
data-error="errorCallback"
data-cancel="cancelCallback">
</script>
For more details, you can refer to this link.
I have managed to implement a solution that functions smoothly on Firefox and Chrome browsers, but encounters issues in Internet Explorer 11. Despite attempting to include all necessary polyfills, I have been unable to resolve the problem.
Here's what I have attempted so far:
export class AppComponent implements OnInit {
constructor(private ngZone: NgZone, private router:Router) {
var _self = this;
(<any>window).errorPaymentCallback = function(error){
console.log(error);
};
(<any>window).cancelPaymentCallback = function(){
console.log('cancel');
};
}
Despite my efforts, the callbacks do not trigger as expected, leading to errors from the api. Any insights on how to troubleshoot this issue would be greatly appreciated.