Need to upgrade Braintree JavaScript v2 SDK to JavaScript v3 SDK

[kcppdevelopers]

No description provided.

[angelleye]

@kcppdevelopers I had Braintree configured already on woo.angelleye.com. I have now updated the site with the current dev branch here, and when I try to load the checkout page it's giving me a generic error...

Error processing checkout. Please try again.

When I look at the Braintree log I see this:

2018-05-09T10:49:42+00:00 INFO Braintree_ClientToken::generate Exception: The API key that you're using is not authorized to perform the attempted action according to the role assigned to the user who owns the API key.

So somehow this update causes our previously entered credentials to break..??

[angelleye]

@kcppdevelopers Another thing I notice while looking at this is that the timestamp on the log file is incorreect. The stamp in the actual log (as shown above) is correct with 10:49:42. However, the timestamp shown when the log file was actually created is incorrect...

It shows it was created at 3:49 PM..?? I did delete the log file and run another test to make sure that wasn't an old timestamp, and again, it says 3:49 pm when the actual time here is 10:49 am.

[angelleye]

@kcppdevelopers I have now re-entered my API credentials into the Braintree settings, and now it's working fine. So yeah, something about this update caused the previously entered values to become obsolete..?? This is not good because anybody using Braintree that updates would break until they re-enter their credentials.

[angelleye]

@kcppdevelopers After updating my credentials I'm able to load the checkout page again, but now I'm discovering another issue. I left the checkout forms completely blank, and I click Place Order, but "nothing" happens. It does not load any sort of spinner on the page itself or even in the browser tab. If I scroll up I do see a red highlight on the State field, as if it's required, but it's not giving me any actual messages about validation or required fields, and it didn't scroll back up to make this clear when I clicked the Place Order button. This is not a good user experience.

When I switch back to PayFlow and click Place Order then all of the fields highlight red and it sends me back to the top with a bunch of validation error messages as expected. This needs to happen with Braintree as well.

[angelleye]

@kcppdevelopers Another issue I'm having here. I went ahead and started filling out all of the checkout fields to see if I could get through checkout that way. When I enter my zip code I get a spinner while it updates shipping options, but then it popped up this error:

Actually, what's interesting here is that this happened when I updated the Billing Zip Code, which wouldn't be used for shipping anyway. That should be based on the Shipping zip code.

[angelleye]

@kcppdevelopers It seems the validation issues are only happening with the drop-in UI.

[kcppdevelopers]

@angelleye In the Braintree there are two SDK version for drop-in UI 1) V2 and 2) V3

Why upgrade to v3:

No dependency on form submission: Previous versions of the SDK required a form submission for tokenization. Now we're giving you control of tokenization through a simple API call.

Hosted Fields formatting: This release introduces input formatting in Hosted Fields, creating a UX-friendly and PCI-compliant experience.

Smaller file size: Our new modular component structure means you can selectively include payment methods to fit your needs.

Improved error messaging: One of our main goals in this version of the SDK is to make error messaging much more transparent, giving you a clearer picture of what’s happening in your checkout flows.

And more...

[kcppdevelopers]

@iMansoorAliKhan I am done with above issue, could you please help to re test this issue?

[angelleye]

@kcppdevelopers @iMansoorAliKhan This is still not working for me. I'm having the same exact problem I reported 2 days ago where the validation is not triggering at all on the checkout page. Also, I cannot get PayPal to work at all...

I get that before I'm even seeing any login or anything, so it has nothing to do with Billing Agreement or duplicate ID or anything like that. I can't even load the login.

[angelleye]

Our log file here is not correct either. Not sure what changed, but now all I see is this in my log file...

2018-05-10T00:58:51+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T00:58:55+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:15:25+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:15:30+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:15:48+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:15:51+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:17:19+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:17:23+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:18:04+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:18:09+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:18:38+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:18:42+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:20:17+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:20:21+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:21:42+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:21:47+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:27:06+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:27:07+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:27:08+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:27:09+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:27:10+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:27:11+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:27:11+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-10T01:27:18+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-11T10:49:00+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-11T10:49:03+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-11T10:52:20+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-11T10:52:24+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-11T10:53:06+00:00 INFO Begin Braintree_ClientToken::generate Request
2018-05-11T10:53:10+00:00 INFO Begin Braintree_ClientToken::generate Request

[iMansoorAliKhan]

@angelleye I have placed some orders using PayPal Braintree but yeah 1 time 1 Saw this error you have reported.
The log file you have shared, This is like this for a long time though, I have seen such things before in the log and those lead me to believe that my API keys are not valid , so ignored them.

[kcppdevelopers]

@angelleye regarding validation I have applied few changes here and now it's working

[iMansoorAliKhan]

@kcppdevelopers the validation thing is not working just like other gateways, its not running loader just highlighting few fields, not all and button becomes irresponsive.
Is that the expected behaviour with new BT JS?

[iMansoorAliKhan]

When not login it showing fields like this

[kcppdevelopers]

@iMansoorAliKhan it's not our plugin issue, it is DIVI theme CSS issue.

[kcppdevelopers]

@iMansoorAliKhan I have disable our PayPal for Woo plugin and only enable case on delivery and it is still display same so it is not our plugin issue.

[angelleye]

@kcppdevelopers I'm a little confused here. The other gateways work just fine with Divi. Why would this one be any different?

[iMansoorAliKhan]

I agree with @angelleye if this is Divi issue then how come for Creditcard Rest it works fine, or incase of an other gateways from our plugin?

[kcppdevelopers]

@iMansoorAliKhan @angelleye I said I have disable our plugin and only enable "Cash on delivery" Payment method it from by default woo and still state/country filed highlight. so it is not our plugin issue.

[angelleye]

@kcppdevelopers Then what did we do in our other gateways that makes it work better?

[iMansoorAliKhan]

@angelleye After installing the most recent dev branch just today, I can confirm that the validation in-case of BT is working back again, It look like some old code was there which was not updating,
After deactivating all plugins except for woo, PP for woo, I tried and it worked, then reactivated all other plugins and tested and the validation thing started to work again on woo and my sandbox site.

[iMansoorAliKhan]

Not sure what caused that trouble ....

[angelleye]

@iMansoorAliKhan So does that mean this is ready for my review?

[iMansoorAliKhan]

@angelleye Yeah, I have tried many things , ran many test so far its running smooth for me.

[angelleye]

I just pulled the dev branch and uploaded everything fresh to woo.angelleye.com. I am running in Chrome Incognito, and I still do not see proper validation happening on this Braintree gateway. I don't understand why this is becoming such a complicated thing for us to all get on the same page with.

Here is another video explaining what I'm seeing vs. what I expect to see: http://fiber.angelleye.com/temp/paypal-for-woo-braintree-validation.mp4

[iMansoorAliKhan]

@angelleye This is how I have tested this https://www.useloom.com/share/f88972d2cb1344e18bcd7237217582be , and not sure if this is related to new JS or what.....

[angelleye]

@iMansoorAliKhan Okay, so the difference is that you're filling in the Braintree iFrame form, which then does seem to trigger the regular WC validation when submitted.

@kcppdevelopers I see you made a new commit here. Does that mean you see what I've been trying to say now and are making necessary adjustments?

[kcppdevelopers]

@angelleye I found when user not filling in the Braintree iFrame form and press order button on that time validation not working so I have making necessary adjustments for that.

[iMansoorAliKhan]

@kcppdevelopers in case of normal braintree form, the validation works fine but only show error for card expiration date?

Is that the expected behavior??

[kcppdevelopers]

@iMansoorAliKhan Yes it is expected behavior.

[iMansoorAliKhan]

@kcppdevelopers the validation still needs to be fixed. Please see this,
https://www.useloom.com/share/ae6dd28525f04b189552c5037c347cde

and the load time for drop-in UI??? can we make it quicker ?