Uncaught (in promise) ReferenceError: Flex is not defined Aurelia

Viewed 67

I am using Aurelia CLI 1.0.2. I am trying to integrate Cybersource Flex web sdk. Flex is a class in 'https://flex.cybersource.com/cybersource/assets/microform/0.11/flex-microform.min.js' library! So far, I have created a test project with same code and it works there and correctly find the Flex class with same Aurelia version. It does not work in this Project code. But I keep getting the following error. Any ideas? I am new to aurelia. Thanks.

The error:

Uncaught (in promise) ReferenceError: Flex is not defined
    at Payment.createFlex (payment.js:58:21)
    at Payment.attached (payment.js:47:10)
    at Controller.attached (aurelia-templating.js:3799:1)
    at View.attached (aurelia-templating.js:1807:1)
    at ViewSlot.attached (aurelia-templating.js:2170:1)
    at View.attached (aurelia-templating.js:1817:1)
    at ViewSlot.attached (aurelia-templating.js:2170:1)
    at aurelia-framework.js:217:1 

The code:

canActivate() {
    logger.debug('Payment canActivate', this);
    if (this.captureContext === 'null') {
      this.getRouterData();
      logger.debug('Payment already taken');
      return new Redirect('/confirmation');
    }
  }

  activate(params) {
    return this.getPageConfig();
  }

  attached() {
    this.createFlex();
    this.getRouterData();
  }

  createFlex() {
    let scriptElement = document.createElement('script');
    scriptElement.src = 'https://flex.cybersource.com/cybersource/assets/microform/0.11/flex-microform.min.js';
//the script is correctly loaded onto the html with <script> tag
    document.head.appendChild(scriptElement);
    logger.info('Creating flex');
    let captureContext = sessionStorage.captureContext;

    this.flex = new Flex(captureContext); //THIS IS WHERE I GET ERROR
...}

UPDATE: Changed to the following and now I am getting: Uncaught ReferenceError: Flex is not defined new impl:

    let flexScript = document.createElement('script');
    flexScript.src = 'https://flex.cybersource.com/cybersource/assets/microform/0.11/flex-microform.min.js';
    document.head.appendChild(flexScript);

    flexScript.onload = () => {
      // alert('Script Loaded');
      let captureContext = sessionStorage.captureContext;
      this.flex = new Flex(captureContext);
      this.createFlex();
    };
AND

        flexScript.onload = () => {
      let captureContext = sessionStorage.captureContext;
      this.flex = new Flex(captureContext)
        .then(() => {
          this.createFlex();
          logger.info('hola');
        })
      // this.createFlex();
    };

0 Answers
Related