Question

我们正在尝试将React中的付款集成到我们的后端。 hpp.lightbox.init()成功后，它将自动将浏览器发送到merchantUrl。我们不希望使用该功能，因为我们的应用程序是SPA，因此我们不希望将用户重定向到任何地方。相反，我们希望将其自己发送到后端端点，并让用户继续进行SPA的下一部分。

下面是我们使用的示例代码。

RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
RealexHpp.lightbox.init("payNowButtonId", "backendUrlRealexWillSendToUponReceivingResponse", jsonFromRequestEndpoint);

在此示例中，我们不想发送给"backendUrlRealexWillSendToUponReceivingResponse"，但是希望获得init()的响应并将数据本身传递给"backendUrlRealexWillSendToUponReceivingResponse"。

我们查看了source code（第350-362行），看来RealexHpp正在创建表单，将表单附加到DOM，然后提交包含响应数据的表单。

看到这一点，我们尝试在document和window上侦听任何表单提交，侦听表单创建，但无济于事。

因此，正如标题所示。我们如何处理表单而不将用户引导到另一个页面？

Answer 1

上面已经提到了JS库的行为方式。从HPP响应创建一个表单，然后将其发送到响应URL。

在下面的示例中，您可以将此参数保留为空白。这将阻止表单发送和重定向到URl。

要捕获响应，您可以添加事件侦听器以从HPP中查找响应。

RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
RealexHpp.lightbox.init("payButtonId", "", jsonFromRequestEndpoint);
if (window.addEventListener) {
    window.addEventListener('message', function(e) { receiveMessage(e.data);}, false);
} else {
    window.attachEvent('message', receiveMessage);
}

在上面的示例中，我有一个名为receiveMessage的函数，但是您可以实现一个类似的函数来执行其他任务。

全球支付Realex HPP-不要发送给merchantUrl

1 个答案: