Javascript 使用自定义 Woocommerce 支付网关覆盖“下订单按钮”

Question

我目前正在开发一个自定义 Woocommerce 支付网关，它通过内联弹出窗口接收信用卡详细信息。网关希望用户单击按钮，然后加载弹出窗口，用户可以输入他的银行卡详细信息。

一切正常，但用户体验流程不如预期，因为用户必须依次单击两个按钮才能结帐。

我做了什么：选择网关后，用户单击一个按钮加载内联弹出窗口，输入付款详细信息，如果获得授权，javascript 回调将交易参考作为隐藏字段发送，这当用户点击 "place order" 时提交。这很好用，但单击两个按钮既不直观也不友好。不知情的用户可能会先点击 "Place Order" 按钮，这会触发错误，因为付款过程尚未完成。

我想要实现的目标：用户只需点击 "Place order"，在处理订单之前，它会运行网关 JavaScript 功能，像往常一样加载安全内联弹出窗口，授权后我可以回调Place order按钮的正常流程

我考虑过的：制作结帐表单和脚本的自定义副本并放入主题中。但是支付网关脚本是一个插件，应该是独立于主题的。

P.S。我之前在 WordPress Stack xchange 上发布了这个，但我在那里没有得到任何关注。

Answer 1

这是您需要注入页面的全部 JavaScript：

jQuery( function($) {     
  $("form.woocommerce-checkout")
  .on('submit', function() { return gatewayFunction( this ); } ); 
} );

外部 jQuery( function($) { 和 } ); 确保中间的代码仅在加载 HTML 文档时获得运行（这样 <form> 将在代码运行) 时存在，并使 jQuery 在两者之间作为 $ 可用。

return gatewayFunction( this ) 将 <form> 传递给函数，因此它可以使用它的值并添加或更新隐藏的支付令牌字段，因此您需要将该参数添加到 gatewayFunction:

function gatewayFunction( form ) {
  ...
  return is_payment_complete;
}

Javascript 使用自定义 Woocommerce 支付网关覆盖“下订单按钮”

Javascript override for “Place Order button” using custom Woocommerce payment gateway

javascript

wordpress

payment-gateway

woocommerce