Reply
Highlighted
Member
Posts: 7
Registered: ‎07-21-2017
Accepted Solution

Angular 2 or 4 example

Does anyone have an example of using the cim hosted payment profile form in Angular 2 or 4? I'm having a hard time getting it to work.

 

Thanks,

Paul.


Accepted Solutions
Solution
Accepted by topic author paulshoot360
‎08-14-2017 02:01 PM
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


All Replies
All Star
Posts: 699
Registered: ‎11-03-2016

Re: Angular 2 or 4 example

I don't have a specific example, but when you say "cim hosted payment profile form" are you referring to our older Hosted CIM forms? Those are deprecated and will be going away soon. We recommend that everyone use our Accept Customer forms for hosted profile management.

Solution
Accepted by topic author paulshoot360
‎08-14-2017 02:01 PM
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.
All Star
Posts: 699
Registered: ‎11-03-2016

Re: Angular 2 or 4 example

Hi @paulshoot360,

 

Thanks for coming back and posting your solution. I'm sure it'll help others in the future who may find themselves in the same boat.

Contributor
Posts: 15
Registered: ‎07-11-2018

Re: Angular 2 or 4 example

Hi,

 

Is there any place I can find an example of this? I need the fully hosted solution for my angular 5 application.

 

And the examples are in PHP and not so easy to understand.

 

Thanks,

Member
Posts: 1
Registered: ‎01-06-2019

Re: Angular 2 or 4 example

[ Edited ]

@mtarantooms01  Same Here :/