Question

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

一切正常，但用户体验流程并不像预期的那样，因为用户必须一个接一个地点击两个按钮才能结账。

我做了什么：选择网关后，用户点击加载内联弹出窗口的按钮，输入付款详细信息，如果获得授权，javascript回调会将交易参考作为隐藏字段发送，当用户点击时会提交＆＃34;下订单＆＃34;。这很好用，但点击两个按钮不直观或UX友好。毫无戒心的用户可能会点击＆＃34;下订单＆＃34;按钮优先，由于付款流程尚未完成，因此会触发错误。

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

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

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>传递给该函数，因此它可以使用它的值并添加或更新隐藏的付款令牌字段，因此您需要将该参数添加到{{1} }}：

gatewayFunction

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

1 个答案: