通过扫描二维码完成支付后，如何将 React 应用重定向到支付成功页面？

Posted 2023-03-08

【中文标题】通过扫描二维码完成支付后，如何将 React 应用重定向到支付成功页面？

【英文标题】：How to redirect react app to payment success page after completing payment by scanning a QR code?

【发布时间】：2022-01-11 03:30:07

【问题描述】：

我有一个 PERN（Postgres、Express、React、Node）电子商务应用。我想在用户扫描二维码付款后，通过重定向到支付成功页面来通知用户支付成功。

但是，我不确定如何实现这一目标。

目前，在用户完成支付后，我会收到来自银行 API 的REST 的POST 请求确认支付。 .不过，我也在使用 GraphQL，我认为 Graphql 的 Subscription 可能是我想要实现的目标。

有谁知道我应该如何做到这一点？

是否可以在我自己的服务器上从 REST 向 Graphql 发送请求？ 或者有没有更好的方法来做到这一点？

Just like what is done in this video:

【问题讨论】：

当用户扫描QR Code时，你是否在服务器端处理请求？

@SilvanBregy 是的。当用户扫描二维码时，银行向我的服务器端发送一个post请求。

【参考方案1】：

我是否正确理解您正在寻找一种方法来通知您的客户付款成功？

我假设您知道如何处理重定向逻辑，因此您可以通过以下方式从服务器通知您的网络应用。

1。常规 HTTP 请求

客户端向您的服务器发送一个常规的 HTTP 请求，您在收到来自银行 API 的“付款已完成”请求之前保留响应。如果您的请求在银行 API 确认付款之前超时 - 您只需再次发送相同的请求。这种模式也称为Long Polling

2。服务器发送事件

您的客户端可以打开一个到您的服务器的通道，允许您的服务器向您的客户端发送事件（单向）。它相当容易实现，也是一种处理单向通信的可靠方法。查看 MDN documentation。

3。网络套接字MDN

您可能对这些很熟悉，因为它们是当今事实上的标准。类似于服务器发送的事件，但它们允许双向通信。

大多数处理客户端-服务器通信的库都实现了这些技术的组合，以提供备用解决方案。我会建议坚持使用其中一个库，因为它们可以处理许多需要大量工作才能覆盖的边缘情况。

正如您所指出的，如果您已经在使用 GraphQL，您可以简单地使用它的subscriptions api。它使用 WebSockets 并回退到底层的长轮询。

其他受欢迎的选项包括socket.io 或graphql-sse。

【讨论】：

感谢您的回答。我尝试使用 SSE，但它没有用。问题是支付完成后银行API发出的请求是POST请求。不幸的是，SSE 只允许 GET 请求。因此，前端无法监听相同的路由，导致无法更新通知。您是否推荐使用 websocket？ websocket会工作吗？这种情况有点复杂，因为它的更新来自外部 API。我发现这篇文章可能有用。 ***.com/questions/58483487/…。不确定它会起作用

被调用的 webhook 应该完全独立于 SSE evensource。一种可能的实现可能是将您在数据库中的购买数据更新为“付款已验证”，并且事件源会发送一个事件来响应这一点。

听起来很有趣。所以可以监听我的数据库的变化吗？我目前确实将数据库更新为已验证付款，但不知道如何监听数据库中的更改。