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

【问题标题】：Execute custom js code for my custom payment plugin on woocommerce checkout在 woocommerce 结帐时为我的自定义支付插件执行自定义 js 代码
【发布时间】：2017-04-02 07:02:01
【问题描述】：

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

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

【问题讨论】：

请给你看代码好吗？

标签： php wordpress woocommerce hook-woocommerce woocommerce-rest-api

【解决方案1】：

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

这是我的解决方案：

1.用自己的按钮替换原来的提交按钮

在functions.php中

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

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

2.在新按钮上绑定事件

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

}

【讨论】：