How to integrate extenal JS widget into angular 2

Question

I have js script what i want integrate to my angular app.

 <script src="https://static.epayments.com/card-token-widget/cardDataWidget.js"> </script> <script> (function () { document.addEventListener('DOMContentLoaded', function () { var style = { widget: {}, field: {}, fieldInput: {}, fieldInputPlaceholder: {}, fieldInputControl: {}, fieldSubmit: {}, fieldSubmitError: {}, fieldSubmitButton: { 'background': '#000', 'hover' : { 'background': '#ff546c' } } }; var option = { root: '#root-widget', submitButton: 'submit-button', fields: [['number', 'expireDate'], ['embossingName']], sid: '123', partnerId: '58', sign: 'f82a381d1f4ab94d8feb33bd161b6638', lang: 'en', style: style }; var widget = cardDataWidget.init(option); widget.addEventListener('tokenCreateSuccess', function (data) { }); }) })() </script> <div id="root-widget"></div> <button id="submit-button">submit</button> 

This is my adaptation.

I added the script src to index.html

<script src="https://static.sandbox.epayments.com/card-token-widget/cardDataWidget.js"></script>

Then i'm declare var in my Angular Component and add second script.

declare var cardDataWidget:any;

   ngAfterViewInit() {
    var style = {
      widget: {},
      field: {},
      fieldInput: {},
      fieldInputPlaceholder: {},
      fieldInputControl: {},
      fieldSubmit: {},
      fieldSubmitError: {},
      fieldSubmitButton: {
        'background': '#000',
        'hover' : {
          'background': '#ff546c'
        }
      }
    };
    var option = {
      root: '#root-widget',
      submitButton: 'submit-button',
      fields: [['number', 'expireDate'], ['embossingName']],
      sid: '123',
      partnerId: '123123',
      sign: 'sadasd213123dsasd',
      lang: 'en',
      style: style,
    };
    let widget = cardDataWidget.init(option);
    console.log(widget);
    widget.addEventListener('tokenCreateSuccess', (data) => {
      console.log(data);
    });
  }

Now this code show widget, but i can't send post request by submit button. (err 400) So how to transform widget.addEventListener? I'm tryed to use Render2 listen() bit it's not works.

Answer 1

Render2 works.

ngAfterViewInit() {
  var style = {
    widget: {},
    field: {},
    fieldInput: {},
    fieldInputPlaceholder: {},
    fieldInputControl: {},
    fieldSubmit: {},
    fieldSubmitError: {},
    fieldSubmitButton: {
      'background': '#000',
      'hover' : {
        'background': '#ff546c'
      }
    }
  };
  var option = {
    root: '#root-widget',
    submitButton: 'submit-button',
    fields: [['number', 'expireDate'], ['embossingName']],
    sid: '123',
    partnerId: '58',
    sign: 'f82a381d1f4ab94d8feb33bd161b6638',
    lang: 'en',
    style: style
  };
  var widget = cardDataWidget.init(option);
  this.renderer.listen(widget,'tokenCreateSuccess', function (data)
  {
    console.log(data);
  });

}