cancel
Showing results for 
Search instead for 
Did you mean: 

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.

paulshoot360
Member
1 ACCEPTED SOLUTION

Accepted Solutions

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

9 REPLIES 9

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.

Aaron
All Star

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.

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.

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,

mtarantooms01
Contributor

@mtarantooms01  Same Here :/ 

Hi,

Can you guid me for an integration of authorized.net payment using accept.js in my dotnet core and ngular 6 project?

 

currently, i have implemented c# core for the same but now as per the requirement i need to use accept.js for the same. So, how can i do that?

 

Thanks & Regards, 

Divyesh Padamani

DivyeshPatel
Member

Can you help in making Accept.js work with Angular 8? Could you share a sample code to integrate Accept.js with Angular typescript. Also window.communicationHandler shows error as 'Property does not exist in window' in the typescript. Could you provide any solution to this?

 

Thanks!

Have you got this working? If yes, could you help us in getting it done.

HI,

 

Please provide the sample code to integration on  angular 9 application.

 

--

Thanks,

Iquebal

spoonerPT1
Member