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

Posted 2023-02-22

【中文标题】使用自定义 Woocommerce 支付网关的“下订单按钮”的 Javascript 覆盖

【英文标题】：Javascript override for “Place Order button” using custom Woocommerce payment gateway

【发布时间】：2016-03-10 17:43:39

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你可以添加类似$("form.woocommerce-checkout").on('submit', function() return gateway(...) )的内容。

您发布的沙箱是带代码还是不带代码？它似乎没有它，但是带有您的代码的示例可能会更有用

@Kenney：问题在于我需要将网关（在 javascript 中）的结果传递回 woocommerce 订单流程 (php) 的“正常流程”。我觉得可能有一些 woocommerce 钩子或我不知道的东西。

@Rob：这是多个文件中的大量代码（wp 插件通常就是这样），所以我不知道与发布相关的内容。我在想也许通过测试沙盒也许你可以看到我的问题，我可以得到一些可以在文档中跟进的指示？

这行代码就是这样做的：你在页面中注入一个 JS，为提交订单表单添加一个 Javascript 钩子，“运行网关 javascript 函数，”，并使用结果更新表单。然后返回 true 以提交表单，否则返回 false。 正常流程是：您下订单，被重定向到 PSP，付款或取消，被重定向回商店页面。

【参考方案1】：

这是您需要注入页面的整个 JavaScript：

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

外部jQuery( function($) 和 ); 确保它们之间的代码仅在加载html 文档时运行（这样<form> 将在代码运行时存在），并使@ 987654325@ 可在两者之间以$ 的形式使用。

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

function gatewayFunction( form ) 
  ...
  return is_payment_complete;

【讨论】：

现在可以正常工作了（我没有将表单传回，而是在付款完成后更新隐藏字段，然后在提交表单之前检查值）。你太棒了。谢谢！有趣的是，我的问题与理解 javascript 表单提交有关，与 woocommerce 无关！

@Kenney 我在提交时写了这个 javascript 代码，当我提交结帐表单时，onclick 结帐表单和 js 代码我写了return false 但仍然提交表单并且正在下订单..so你能不能给我任何解决方案或我做错了什么。

对我来说不太好用，有更新的代码吗？