eProtect Sample Code not working

[#1]

I am using the code example for eProtect iFrame solution from the eProtect API V2.1 Document Version: 6.0 . I am using the following sample details:

<script src="https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js"></script>

"paypageId":"a2y4o6m8k0",

"style":"test",

"reportGroup":"*merchant1500",

My code is exactly same as the example given

But my iFrame is not getting loaded and my eProtectiframeClient is showing as undefined. Please let me know how should I proceed with solving this issue.

[gjsissons]

Hi Adesh - tagging my colleagues daniperea​ and jeremy.bellino​.

Just wondering - are you already working with someone at Vantiv? I assume you've loaded the pre-requisite jQuery libraries etc. It's a little tough to diagnose without seeing the full code / HTML page.

I'm not an eProtect expert, but I've been playing with eProtect in the context of digital wallet integrations.  I have a working example at the URL if this is of any help.

https://e42fb64d.servage-customer.net/vantiv/aec_demo

You can see the source code for the project here:

https://github.com/GJSissons/aec_demo

(actually for some reason I notice it is not working just now after all - let me check into this because it's been working the past few weeks - maybe there is a temporary issue)

The code example above is not using iFrames . It is using eProtect without iFrames.

Below is a link to another demo that illustrates the use with iFrames and show cases so newer eProtect features.

(just view source in your browser to see the JavaScript and HTML)

https://unisaurus-rex.github.io/eprotect-iframeEnhancements/#

[adeshk]

Hey Gordon,

Thanks a lot for the reply . Here is the link to the code [HTML] Vantiv Sample Code - Pastebin.com

I have made the local jquery.min.js file and have loaded the pre-requisite jQuery libraries .

This is the same code as the one in eProtect™ Integration Guide - Enterprise September 2017 PayPage API V3.0 Document Version: 2.5 Section A.1.3.

On running this, I am getting the error 'Couldn't download eprotect-iframe-client3.min javascript' .

Regarding this https://unisaurus-rex.github.io/eprotect-iframeEnhancements/  , this doesn't seem to be an iFrame example as input element is on the page itself.

[gjsissons]

OK – thanks. I’ll have a look. I know some of the URLs changed recently – it might be as simple as that. I’ll look as soon as I get a chance.

[gjsissons]

Sorry to have doubted you Adesh. I'm running into exactly the same issue. 🙂

This JavaScript condition below is firing throwing the error we're seeing.

if(typeof eProtectiframeClient === 'undefined') {

//This means we couldn't download the eprotect-iframe-client javascript library

alert("Couldn't download eprotect-iframe-client3.min javascript");

}

Complicating things further, I thought the correct URL for the enterprise iFrame integration was supposed to be the one below, but it doesn't work either:

https://request.eprotect.vantivprelive.com/eProtect/js/payframe-client3.min.js as opposed to https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client3.min.js  which appears in the example

Let me package up HTML that illustrates the problem into an e-mail and see if I can get one of the developers to take a look at it and get an answer. Clearly the example is not correct. Sorry about that.

[adeshk]

Hey

As a workaround, I looked up the code of iFrame sample given in the guide at  https://www.testvantivcnp.com/iframe/

I looked through the code and observed that that page uses

<script src="https://request-prelive.np-securepaypage-litle.com/LitlePayPage/js/payframe-client.min.js"></script> and also

var payframeClient = new LitlePayframeClient(configure);

With this, it was working but now it doesn't seem to be working either.

[gjsissons]

Yes – the links you’re referring to were the previous links.

What happened is that Vantiv retired the “litle.com” DNS names, hence the change in the URLs.

Unfortunately they’re not active any more. I’m just packaging up the issue to explain it clearly to our product and documentation teams.

Are you working on behalf of a Vantiv customer Adesh? Should we try and escalate this ?

Thanks.

[adeshk]

Yes I am working on behalf of a Vantiv customer. It would surely be of great help if you could escalate this issue as I have been stuck on this for the past few days.

[gjsissons]

Hi Adesh – I’ll reach out to you with a private e-mail so you don’t need to post the customer name in the online discussion – thanks!

[gjsissons]

Hey Adhesh,

Got feedback from eProtect development team and got this working.

Turns out there were a few errors in manual example

HTML attached works.

Basically, the issue was that the class name had incorrect capitalization. Class name should have been “EprotectIframeClient”

The example attached is still pretty raw, but enough to see how this works. We need to work on cleaning this up.

There was a similar issues defining the “configure” structure.

Still ugly, but code and screen capture attached. Hopefully this is enough for you to move forward.

Thx.

working_eprotect_enterprise__iframe_example.html.zip

[gjsissons]

Crap - I see my attachment did not work. I sent it to you privately,  but I'll re-post through a public drop box as I'm sure others will run into this same issue. Thx.

[gjsissons]

Great news that it is working Adesh. Thanks for confirming.

I agree with you. The presentation is more than a little ugly. ☺

I had the same idea as you actually. It’s low hanging fruit to make this example much better.

Frankly, if you were interested in providing a more refined example, we’re love to promote your efforts on our site with full credit to you of course?

This is what having a developer community is about – harnessing the talents of smart people.

Thanks for your patience.

PS. I think the root of the problem is producing PDF documentation as opposed to exposing raw code – I suspect our publishing tools are messing with capitalization. We’re working on this.

[adeshk]

I agree with you, PDF documentation isn't the best way to go about it. Making a simple webpage which guides you through each kind of implementation, provides code with explanation and has a working/not working tab with common issues and their resolutions can be more useful. I will work on such an example whenever I get time

[gjsissons · Accepted solution]

For anyone reading this trying to see the result, I've posted the working code on my personal Git Hub account here:

https://github.com/GJSissons/eprotect_iframe

(it's ugly but it works!)

[vvalluru]

gjsissons​ Is there a similar sample for eprotect JS implementation as well?

[adeshk]

Are you facing issues in the example given in the documentation ?

[vvalluru]

Please ignore it. i found it. thanks.

[gjsissons]

Sorry for the slow reply vvalluru​. I did pass on the errors adesh.k found to the people who manage the technical documentation so hopefully the enterprise eProtect example with the iFrame will be corrected soon.

[stilsons]

Thank you very much, Gordon!  I couldn't get my code working until I found yours on Github.  Now my code is working perfectly.  Thank you again!

[stilsons]

Hi Gordon, I have a quick question.  When I run your code, what is the "encrypted card" textarea supposed to show?  Is that supposed to show the token generated?  For example, if I put in credit card number 410000000000001 and hit check out, is the encrypted card textarea supposed to show 1111222233330001?  These are the numbers in your "expected result" textarea.  No matter what credit card I put in, nothing ever appears in the "encrypted card" textarea. The manual says "The eProtect server returns a Registration ID (low-value token) and your server constructs the cnpAPI transaction using that ID."  Is this encrypted number the low-value token, which I construct a transaction from?  Thank you!