CODEWITHSUNDEEP
jquerywordpresswoocommercepaypal
NZisKool
NZisKool

Reputation: 239

Add loading icon while WooCommerce PayPal Payments process transaction

I've recently start using the new WooCommerce PayPal Payments plugin.

The issue I get is when customers choose the Credit Card Processing (which looks like what Stripe offers). The people enter their card details and click "Order". Then the screen becomes whitish and nothing happens for something like 15 seconds. There's no loading, nothing but a still screen for 15 seconds or so.

This time is way too much for many (if not most) people, who think there's some kind of issue and try either reloading the page or leaving it.

I'm trying to find a solution to that. The easiest way would be to add a note under the credit card form like "Please don't refresh the page while the transaction is processing" and that would do the trick for most people. I could add some code with the Code Snippets plugin, but I don't know which code exactly.

I'm sure I'm not the only one to have this issue, so if someone could bring some help, that would be awesome.

Upvotes: 0

Views: 239

Answers (2)

Tom
Tom

Reputation: 1

I wasn't able to get this code to work for paypal payments on woocommerce, perhaps I did not install it or set it up correctly but nothing changed after I tried to implement it... I agree with NZisKool

  • A loading icon would be nice for WooCommerce PayPal Payments ...

I was noticing a similar issue when a user manually input a CC number

I would love for someone to release a plugin on the WordPress Plugin repository that adds a loading icon while processing a Credit Card transaction using WooCommerce PayPal Payments

or provide a detailed tutorial on how to modify a WordPress site to do this

Upvotes: 0

Valerii Vasyliev
Valerii Vasyliev

Reputation: 469

I had similar problem. I wrote the custom jquery plugin and track the changing class on form.woocommerce-checkout

The code jquery plugin

(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;
    
    var originalRemoveClassMethod = jQuery.fn.removeClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    }
    
    jQuery.fn.removeClass = function(){
        // Execute the original method.
        var result = originalRemoveClassMethod.apply( this, arguments );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    }
})();

The function track the changing form.woocommerce-checkout

jQuery(document).ready(function () {
    jQuery('form.woocommerce-checkout').bind('cssClassChanged', function(){ 

        if (jQuery(this).hasClass("processing")) {
            // stripe is processing
        } else {
            // strpipe isn't processing
        }
    });
});

You need to add this code to your theme or plugin in js file

Upvotes: 2

Related Questions