在 woocommerce 结账时为我的自定义支付插件执行自定义 js 代码

Question

我正在为我的 woo 商务网站创建一个新的自定义支付插件。我因为我需要为信用卡和其他一些输入字段添加一些自定义验证。我需要将所有这些验证添加到一个单独的 js 文件中，并希望仅在 javascript 验证成功通过后才触发结帐功能。

我可以使用 wp_enqueue_scripts 函数加载 js，但是我的 js 代码在点击结账按钮后没有执行。我想要的是在结账时点击首先需要执行我的代码，然后根据我的验证检查需要继续结账功能。

Answer 1

WooCommerce 在订单表单上绑定一个事件并使用 AJAX 提交表单（您可以在 checkout.js 中查看代码）。

这是我的解决方案：

1.Replace 原来的提交按钮加上自己的按钮

在functions.php

add_filter('woocommerce_order_button_html', function(){
    return '<button class="new_submit button">Place Order</button>';
});

点击新建按钮时，不会直接提交订单。

2.Bind 新按钮上的事件

 jQuery(document).on('click', '.new_submit', function(e){
      e.preventDefault();       
      if (do_the_validation()){
        jQuery( 'form.checkout' ).submit();
      } else {
        return false;
      }
 })

此外，我建议您进行服务器端验证

add_action('woocommerce_checkout_process', 'my_validation');
function my_validation() { 
    //If it's invalid, add an error.
    if (!do_validation()) {
       wc_add_notice( __( 'Something goes wrong!' ), 'error' );
    }

}

在 woocommerce 结账时为我的自定义支付插件执行自定义 js 代码

Execute custom js code for my custom payment plugin on woocommerce checkout

php

wordpress

woocommerce

hook-woocommerce

woocommerce-rest-api