在 WooCommerce PayPal Payments 处理交易时添加加载图标答案

【问题标题】：Add loading icon while WooCommerce PayPal Payments process transaction在 WooCommerce PayPal Payments 处理交易时添加加载图标
【发布时间】：2021-11-12 06:13:38
【问题描述】：

我最近开始使用新的WooCommerce PayPal Payments 插件。

我遇到的问题是客户选择信用卡处理（看起来像 Stripe 提供的）。人们输入他们的卡详细信息，然后单击“订购”。然后屏幕变白，大约 15 秒内没有任何反应。没有加载，只有 15 秒左右的静止屏幕。

对于许多（如果不是大多数）人来说，这个时间太多了，他们认为存在某种问题并尝试重新加载页面或离开它。

我正在努力寻找解决方案。最简单的方法是在信用卡表格下添加一条注释，例如“请不要在交易处理过程中刷新页面”，这对大多数人来说都是诀窍。我可以使用 Code Snippets 插件添加一些代码，但我不知道具体是哪个代码。

我确定我不是唯一遇到此问题的人，所以如果有人可以提供一些帮助，那就太好了。

【问题讨论】：

标签： jquery wordpress woocommerce paypal

【解决方案1】：

我有类似的问题。我编写了自定义 jquery 插件并在 form.woocommerce-checkout 上跟踪更改的类

代码 jquery 插件

(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;
    }
})();

函数跟踪变化的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
        }
    });
});

您需要将此代码添加到您的主题或插件中的 js 文件中

【讨论】：