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

Question

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

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

我所做的：选择网关后，用户单击一个按钮，加载内联弹出窗口，输入付款详细信息，如果获得授权，javascript回调将发送一个交易引用作为隐藏字段，该引用在用户单击“下订单”时提交”。这很有效，但单击两个按钮并不直观或用户体验友好。毫无戒心的用户可能会先单击“下订单”按钮，这会触发错误，因为付款过程尚未完成。

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

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

PS 我之前在 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;
}