时间戳

首页 > 解决方案 > 全球支付 Realex HPP - 请勿发送至商家网址

realex-payments-api - 全球支付 Realex HPP - 请勿发送至商家网址

问题描述

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

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

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

在这个例子中，我们不想发送到"backendUrlRealexWillSendToUponReceivingResponse"，而是想得到init()的响应并将数据自己传递给"backendUrlRealexWillSendToUponReceivingResponse"。

我们查看了源代码（第 350-362 行），它似乎RealexHpp正在创建一个表单，将表单附加到 DOM，然后使用响应数据提交表单。

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

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

标签： realex-payments-apiglobal-payments-api

解决方案

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

推荐阅读