How do I access angular component function from a global function - IE11 compatible please

Question

Here is the situation - I'm working with the Mastercard payment gateway api in an angular based application. The api takes a callback for success and error and the callback is passed in the data-error and data-success attributes of the script tag to load the Mastercard api.

<script src="https://eu-gateway.mastercard.com/checkout/version/49/checkout.js" 
        data-error="errorCallback" 
        data-cancel="cancelCallback">
</script>

Details here.

I have a solution which works quite well in Firefox and Chrome but absolutely fails in IE11. I've uncommented all the polyfills imports but nothing is working no matter how much I try.

Here is what I have done 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');
    };      
}

No matter what I try the callbacks are not fired and instead the api returns an error. Any ideas?

Answer 1

You can dispatch an event and then catch it in AppComponent

This is how you do this:

<script src="https://eu-gateway.mastercard.com/checkout/version/49/checkout.js" 
        data-error="errorCallback" 
        data-cancel="cancelCallback">
</script>

    <script type="text/javascript">
        function errorCallback(error) { document.dispatchEvent(new Event('payment-error', { bubbles: true })); }
        function cancelCallback() { document.dispatchEvent(new Event('payment-error', { bubbles: true })); }
        window.global = window;
      </script>

In AppComponent

@HostListener('document:payment-error', ['$event'])
  paymentError(event){
    //do your work
  }