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();
};