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

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

本文关键字：按钮 下订单按钮 覆盖 Javascript 单按钮 Woocommerce 自定义 网关      更新时间：2023-09-26

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

这一切都很好，但用户体验流并不像预期的那样，因为用户必须依次单击两个按钮才能结账。

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

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

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

附言：我早些时候在WordPress Stack Exchange上发布了这篇文章，但我在那里没有得到任何关注。

以下是您需要注入页面的整个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;
}
相关文章：