topic Re: Angular 2 or 4 example in Integration and Testing

Angular 2 or 4 example

paulshoot360 — Tue, 01 Aug 2017 16:27:41 GMT

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.

Re: Angular 2 or 4 example

Aaron — Tue, 01 Aug 2017 17:59:49 GMT

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.

Re: Angular 2 or 4 example

paulshoot360 — Mon, 14 Aug 2017 21:01:45 GMT

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.

Re: Angular 2 or 4 example

Aaron — Wed, 16 Aug 2017 18:52:26 GMT

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.

Re: Angular 2 or 4 example

mtarantooms01 — Thu, 19 Jul 2018 16:09:13 GMT

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,

Re: Angular 2 or 4 example

usmanAshlar1 — Mon, 07 Jan 2019 05:52:28 GMT

@mtarantooms01 Same Here :/

Re: Angular 2 or 4 example

DivyeshPatel — Mon, 13 Jan 2020 11:57:49 GMT

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

Re: Angular 2 or 4 example

vinitamoghe — Tue, 21 Jan 2020 13:31:46 GMT

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!

Re: Angular 2 or 4 example

vinitamoghe — Tue, 21 Jan 2020 13:34:41 GMT

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

Re: Angular 2 or 4 example

spoonerPT1 — Sat, 17 Jul 2021 17:01:12 GMT

HI,

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

Thanks,

Iquebal