WooCommerce PayPal Payments交易处理时添加加载标识的问题咨询

操作步骤 #

• 进入WordPress后台，打开Code Snippets插件的「添加新片段」页面
• 选择「运行站点前端位置」的代码类型，将下方代码复制粘贴到代码编辑框
• 保存并激活片段即可生效

完整可复制代码 #

add_action( 'woocommerce_review_order_after_payment', 'add_payment_processing_notice' );
function add_payment_processing_notice() {
    // 输出提示容器，默认隐藏
    echo '<div id="payment-processing-notice" style="display:none; margin: 15px 0; padding: 12px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; color: #856404; font-weight: 500;">
        交易处理中请勿刷新页面
    </div>';
    
    // 加载触发逻辑
    wc_enqueue_js( "
        // 监听下单按钮点击事件
        $('form.checkout').on('submit', function() {
            // 当选择的是信用卡类支付方式时显示提示
            let selected_method = $('input[name=\"payment_method\"]:checked').val();
            if( selected_method == 'stripe' || selected_method == 'ppcp-credit-card-gateway' ) {
                $('#payment-processing-notice').show();
            }
        });

        // 支付失败/校验报错时自动隐藏提示
        $(document.body).on('checkout_error', function() {
            $('#payment-processing-notice').hide();
        });
    " );
}

自定义调整说明 #

• 如需适配其他支付方式，可在代码的if( selected_method == 'stripe' || selected_method == 'ppcp-credit-card-gateway' )判断中新增对应支付方式的ID即可
• 提示的背景色、文字样式可直接修改容器的style属性参数，按需调整为你站点适配的风格
• 提示文本可直接替换容器内的文字内容，支持中文、特殊符号

内容的提问来源于stack exchange，提问作者NZisKool