Member
Posts: 7
Registered: ‎07-21-2017
Re: Angular 2 or 4 example

Thanks Aaron,

 

Yes, using Accept. I finally got it working in Angular 4. The key was to use an arrow function to maintain state with the parent. So, for Angular 4, add a iFrameCommunicator.html page into the root of the project (Authorize.Net has an example of this page in the docs). Then add the following code in your compnent:

ngAfterViewInit(){
//console.log("ngAfterViewInit");
window.CommunicationHandler = {};
window.CommunicationHandler.onReceiveCommunication = (argument) => {
var message;
console.log("iFrame argument: " + JSON.stringify(argument));
//Get the parameters from the argument.
var params = this.parseQueryString(argument.qstr)
 
switch(params['action']){
case "resizeWindow":
//{"qstr":"action=resizeWindow&width=551&height=825","parent":"https://test.authorize.net/customer/addPayment"}
//We can use this to resize the window, if needed. Just log it for now.
if (this.config.isDevEnvironment()) {
message = 'resizeWindow from iframe\n';
message += 'Width: ' + params['width'] + '\n';
message += 'Height: ' + params['height'];
console.log(message);
}
break;
case "successfulSave":
//{"qstr":"action=successfulSave","parent":"https://test.authorize.net/customer/addPayment"}
if (this.config.isDevEnvironment()) { console.log('successfulSave from iframe'); }
this.AddCardSuccessful();
break;
case "cancel":
//{"qstr":"action=cancel","parent":"https://test.authorize.net/customer/addPayment"}
if (this.config.isDevEnvironment()) { console.log('cancel from iframe');}
this.CancelAddCard();
break;
case "transactResponse" :
if (this.config.isDevEnvironment()) { console.log('transactResponse from iframe');}
//sessionStorage.removeItem("HPTokenTime");
console.log('transaction complete');
var transResponse = JSON.parse(params['response']);
break;
default:
console.log('Unknown action from iframe. Action: ' + params['action'])
break;
}
}
}
 
parseQueryString(str) {
var vars = [];
var arr = str.split('&');
var pair;
for (var i = 0; i < arr.length; i++) {
pair = arr[i].split('=');
//vars[pair[0]] = unescape(pair[1]);
vars[pair[0]] = pair[1];
}
return vars;
}
 
Hope this helps others.
Thanks,
Paul.

View solution in original post

Who Me Too'd this solution