Global Payments Realex HPP - 请勿发送至 MercerUrl答案

【问题标题】：Global Payments Realex HPP - Do NOT send to merchantUrlGlobal Payments Realex HPP - 请勿发送至 MercerUrl
【发布时间】：2020-02-12 00:01:32
【问题描述】：

我们正在尝试将 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 上侦听任何表单提交，侦听表单创建，但无济于事。

正如标题所暗示的那样。我们如何在不将用户发送到另一个页面的情况下处理表单？

【问题讨论】：

标签： realex-payments-api global-payments-api

【解决方案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 的函数，但您可以实现一个类似的函数来执行不同的任务。

【讨论】：