PayPal Express ~ Duplicate Orders

pete2007 · May 14, 2019

We use osCommerce Online Merchant v2.3.4 and PayPal App v5.018

I've had a duplicate order issue for awhile now, and never knew the reason why... but today I tested PayPal express and once I clicked on the 'confirm' button it took ages to load/or do anything, so I assumed it was just slow internet connection or I clicked on it again and eventually it loaded and said order completed. I then received two confirmation emails and two orders were showing in admin.

Does anyone know how I can resolve this problem, and speed up the process once the button has been clicked on?

Thank you in advance.

peterbuzzin · May 15, 2019

@pete2007

You need some javascript/jquery to disable the button once clicked.

In checkout_confirmation.php add this to the bottom of the page. I've made this based on a default install of v2.4.3.1 and will work providing your store still uses jQuery and jQuery UI

Find:

<script type="text/javascript">
$('#coProgressBar').progressbar({
  value: 100
});
</script>

Add this beneath it (do not replace, just add beneath):

<script>
	$('form[name=checkout_confirmation]').submit(function(){
		var btnLoadingTxt = 'Loading Please Wait';
		var confirmationForm = $(this);
		$(this).find('button[type=submit]').each(function (index) {  
			var btnHtml = $(this).html();
			$(this).clone(false).attr('id', 'disabledBtn').prop('disabled', true).html(btnHtml).insertBefore($(this));
			$('#disabledBtn .ui-button-text').text(btnLoadingTxt);
			$(this).hide();
			confirmationForm.prepend($(this));
		});
	});
</script>

With the above script, once the form is submitted it will copy the styling and text displayed of the original button, clone it and make the cloned button disabled. It then hides the original submit button and changes the text of the cloned button to "Loading Please Wait".

pete2007 · May 16, 2019

Thank you for your reply.

This sounds exactly what I need but unfortunately I cannot locate this code within my checkout_confirmation.php

<script type="text/javascript">
$('#coProgressBar').progressbar({
  value: 100
});
</script>

peterbuzzin · May 16, 2019

Hi,

Sounds like you're not using v2.4.3.1 default install in that case. Can you post the contents of the bottom half of checkout_confirmation.php I don't need all of it, but if providing all of it is easier then do that. And/or post a link to your site so I can can make sure jQuery/jQuery UI is being used and where it's loaded in the page (I only need to look at the html source view of the index page in the browser for this).

Alternatively if you're comfortable detecting where jQuery and jQuery UI is loaded yourself, find out if it's being loaded in <head> tags. If it's loaded in <head> tags then feel free to pasted that code anywhere towards the bottom of checkout_confirmation.php preferably after the closing </form> tag for the checkout confirmation page.

peterbuzzin · May 16, 2019

Hi @pete2007

Thank you for sending the files in a PM. I've placed my response here so that if anyone else is in the same situation as you then they can see the solution also.

Your store setup:

Doesn't use or load jQuery UI
jQuery and javascript is executed from includes/template_bottom.php and not in the <head> tag.
- Because of this, the script cannot be added directly to checkout_confirmation.php because jQuery loads after the contents of this page.
Your site makes good use of a ext/jquery/main.js file instead of inline/on-page Javascript so we'll use this to house the new script.
Your store submit button doesn't have any classes applied so no need to copy them to the new dynamic button before hiding the submit button once clicked.

Please backup the ext/jquery/main.js file before making changes and be sure to test the checkout_confirmation.php page after making the changes as I've not been able to test this. You may also need to clear your temporary internet files/cache if your browser doesn't detect the additional code to the file immediately.

In ext/jquery/main.js

Go to the very bottom of the file after the closing }); and press return twice to create some spacing.

Add the following, save and upload.

/* BOF Prevent multiple form submissions from multiple clicks on checkout_confirmation.php */
if($('form[name=checkout_confirmation]').length > 0){
    $('form[name=checkout_confirmation]').submit(function(){
        var btnLoadingTxt = 'Loading Please Wait';
        var confirmationForm = $(this);
        confirmationForm.find('button[type=submit]').each(function (index) {  
            $(this).clone(false).attr('id', 'disabledBtn').prop('disabled', true).text(btnLoadingTxt).insertBefore($(this));
            $(this).hide();
            confirmationForm.prepend($(this));
        });
    });
}
/* EOF Prevent multiple form submissions from multiple clicks */

Because we can't add this code directly to the checkout_confirmation.php page if left as it was it would attempt to execute on every page load. It would only work on the checkout_confirmation.php page but there's still no point taking extra resources to attempt to execute when not needed so I've added code to check if the confirmation form is present before execution.

pete2007 · May 16, 2019

Brilliant it worked, thank you very much!

peterbuzzin · May 16, 2019

@pete2007 you're welcome

burt · May 16, 2019

@peterbuzzin
Header Tag module which loads its code into footer_scripts.

Way better than core code changing, that HT modularity has been available since 2.3.1 (if memory serves).

peterbuzzin · May 16, 2019

Hi @burt

I'm well aware of it but the request wasn't to create a module and I don't have time to do that for free at the moment either. Also it would not have worked in the OP's case, jQuery's script src is hardcoded into the OP's template_bottom.php file (sent via PM) and after the output of $oscTemplate->getBlocks('footer_scripts'); which is empty. So if it had been pulled via footer_scripts it would not have worked and console would have shown the error $ is not defined.

burt · May 16, 2019

OK.

For anyone looking to do this (and find this thread in the future)...core code changes in this manner are not necessary unless you are on an *ancient* version (2.2 stream, 10 years or more old?) or some version that has been totally shafted already by core code changes.

Edited May 16, 2019 by burt

pete2007 · May 19, 2019

On 5/16/2019 at 11:38 AM, peterbuzzin said:

@pete2007 you're welcome

@peterbuzzin is it possible to add a script like this to the contact us submit button, this is also very slow? thanks

peterbuzzin · May 20, 2019

@pete2007 it sure is (but don't tell burt I told you this or he'll get all "Stack Overflow" on me!!).

Again, anyone else reading this, this is method is specific for pete2007's installation which doesn't make use of Header Tags modules nor $oscTemplate->getBlocks('footer_scripts'); and everything is hardcoded in template_bottom.php

In ext/jquery/main.js find:

/* BOF Prevent multiple form submissions from multiple clicks on checkout_confirmation.php */
if($('form[name=checkout_confirmation]').length > 0){
    $('form[name=checkout_confirmation]').submit(function(){

Replace with:

/* BOF Prevent multiple form submissions from multiple clicks on checkout_confirmation.php and contact_us.php */
if($('form[name=checkout_confirmation], form[name=contact_us]').length > 0){
    $('form[name=checkout_confirmation], form[name=contact_us]').submit(function(){

And then just for the sake of completeness find:

/* EOF Prevent multiple form submissions from multiple clicks */

And replace with:

/* EOF Prevent multiple form submissions from multiple clicks on checkout_confirmation.php and contact_us.php */

The only caveat is that it will only display one message i.e. "Loading please wait", might have been nicer to have "Sending please wait" for the contact form. But if you want you could change it to just "Please wait" which would apply equally to both forms nicely.

pete2007 · May 21, 2019

@peterbuzzin works perfectly, most appreciated once again!

PayPal Express ~ Duplicate Orders

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation