Unable to click 'Finish' button after selecting payment

  • Posts: 194
  • Thank you received: 13
  • Hikashop Business
5 years 1 month ago #304211

-- HikaShop version -- : 4.0.2
-- Joomla version -- : 3.9.3
-- PHP version -- : 5.6.40
-- Browser(s) name and version -- : Edge 16

Using our Braintree payment plugin customers using certain Edge browser versions (16 for example) are unable to click the Finish button in checkout.

Our plugin collects card information and submits and receives authorization and a nonce from Braintree indicating payment method was approved. However, the script called on click of the Finish button is not allowing the click to continue.

This script appears to be unique to Edge or at least certain browsers. There is a different script for non-Edge / IE browsers.

Our Braintree plugin is working great with all other browsers.

Is there something we need to be setting to get your script to enable the Finish button? I was hoping for some insight rather than debugging the script by hand.

Thanks


3by400, Inc.
3by400.com
Websites that Work, Marketing that Matters

Please Log in or Create an account to join the conversation.

  • Posts: 4486
  • Thank you received: 609
  • MODERATOR
5 years 1 month ago #304225

Hello,

We process some tests on our side and with Edge, but we wasn't able to reproduce your issue, and so get the root isn't possible so far.
So, in order to progress on this subject can you provide a test environment with all required to reproduce like frontend and backend references ?
Of course, for this us our Contact us form and don't forget to add to your message an Url link to this topic.

Regards.

Last edit: 5 years 1 month ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 194
  • Thank you received: 13
  • Hikashop Business
5 years 1 month ago #304243

Update on testing results.

I have a test site set up very similar to the client's site. Testing is successful through the entire checkout process on the test site with all browsers, including Edge 16, 17, 18. However, on the client's site the same checkout process gets stuck after the payment information is added and approved by Braintree. The 'Next' button is NOT clickable.

I will send frontend user credentials for testing via Contact Us. Here are the test steps to replicate the issue.

1) Go to: elegantmemorials.com/bifold-funeral-prog...ral-program-template
2) Click 'Add to cart' and 'Proceed to checkout'
3) Log in as the user I'll provide
4) Click next to go to Payment step
5) Enter card details (these are test numbers, but will still be approved)
card: 4111111111111111, cvv: 111, expiration: 01 2020
6) Click the green 'Continue' button - and you should see a message "Payment method approved"

Now you cannot click on the 'Next' button.


3by400, Inc.
3by400.com
Websites that Work, Marketing that Matters

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
5 years 1 month ago #304251

Hi,

If I look at the Edge console when displaying the page with the credit card form I get this:
monosnap.com/file/WfRpGp6JUVIieLgWnxi4JwV3HdnbxK
So a JS error. Not sure if the issue comes from that, but it might not help.
If I look at the code from where the error is triggered, I see this:
monosnap.com/file/wK5LSfZzSbpwGkuPHqs5OuezkYeYIS
So it seems that this js code from the Braintree plugin doesn't have its if condition filled in.
Might it be related ?

Otherwise, I did some tests on that website and I can see that the javascript code of the "next" button is still working after pressing the "continue" button.
So it might be a bug of Edge whereby a disabled button that you reenable cannot submit its form ?

Please Log in or Create an account to join the conversation.

  • Posts: 194
  • Thank you received: 13
  • Hikashop Business
5 years 1 month ago #304289

Thanks for checking. We are aware of the two JS issues you noted. Our test site uses the same versions of the Braintree plugin, etc. And it includes those same two JS issues. But it works fine in Edge.

At least I thought it did. I created a Registered user on the testing site because I was going to provide it as an example to you that the test site worked with Edge. But, when I tested using that Registered user (I am usually logging in to the test site with my own super user account), the 'Next' button cannot be clicked. So this reflects the same issue as the client site now. I am looking into it and will reply back to this thread either way.


3by400, Inc.
3by400.com
Websites that Work, Marketing that Matters

Please Log in or Create an account to join the conversation.

  • Posts: 194
  • Thank you received: 13
  • Hikashop Business
5 years 3 weeks ago #304430

I have removed the JS errors referred to earlier. That has not resolved this issue with Edge browser versions. I am thinking there is a possibility that the <pre>"if(window.checkout.onFormSubmit && !window.checkout.onFormSubmit(this.form)) { return false; }"</pre> part of the onClick functionality on the Next button is the issue.

Our Braintree plugin has its own form that deals with the hosted fields for the CC information. So my hypothesis is the the "this.form" no longer references the parent checkout form. And I'm not certain how to change the execution scope to solve that.

This onClick code appears to be new to recent versions of HS (4.0.2 in comparison to 4.0.0).

I'll send updated credentials for the login to the Elegant Memorials site. Otherwise everything is the same.

Thanks, Paul


3by400, Inc.
3by400.com
Websites that Work, Marketing that Matters

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
5 years 3 weeks ago #304432

Hi,

Indeed, if you have a form inside a form, that's actually normally not valid HTML. So it could definitely mess up the this.form

What you could try is edit the show_block_buttons view file and change the this.form by document.getElementById('hikashop_checkout_form') and see if that helps. If yes, then it would confirm this hypothesis.

Note that what you could do is actually not have a "confirm" button for your credit card form and instead plug yourself to the checkoutFormSubmit js trigger to be able to catch the submit of the checkout form, do your credit card ajax request to the payment gateway at that point and either let the submit process continue with the token of the credit card/authorization after replacing the credit card form, or cancel the submit if a problem occured.
That's what the Authorize.js plugin from Obsidev on our marketplace does so that it can have its credit card form inside the checkout while still not requiring complex PCI-DSS compliance.
To plug yourself to that trigger, you can do something like that:

window.Oby.registerAjax("checkoutFormSubmit",function(checkoutForm){ 
  // run your code
});

Please Log in or Create an account to join the conversation.

  • Posts: 194
  • Thank you received: 13
  • Hikashop Business
5 years 3 weeks ago #304467

I tried making an override of the show_block_buttons.php template and changing this.form to getElementById('hikashop_checkout_form'). But that did not resolve the issue. So I (in my test environment) made a copy of the checkout.js file and added some console.info calls. It turns out the click on the Next button is always being rejected because the el.submit_in_progress is always evaluating as true.

I tried setting that in my Braintree plugin as false as a last step after the payment method approval is received. That does solve the problem.

So it appears that I need to possibly adopt intercepting the submit progress as a cleaner implementation.


3by400, Inc.
3by400.com
Websites that Work, Marketing that Matters

Please Log in or Create an account to join the conversation.

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
5 years 3 weeks ago #304521

Hi,

Ah yes, nice catch !
We had indeed added that submit_in_progress flag to be able to disable the submission of blocks while the step is being submitted. Otherwise, you could potentially use another button of the checkout views triggering a submit of the block while the step was being processsed, leading to errors.
So, yes, you do want to set that flag to false once you get the approval so that the submit can work again after that.
I had forgotten about that flag, my bad.

Please Log in or Create an account to join the conversation.

Time to create page: 0.076 seconds
Powered by Kunena Forum