通过扫描二维码完成支付后如何将react app重定向到支付成功页面？

Question

I have a PERN (Postgres, Express, React, Node) e-commerce app. I want to notify a user that the payment is successful by redirecting to a payment successful page after a user scans QR code to pay.

However, I'm not sure how do I achieve this.

Currently, after the user completed a payment, I will receive a REST's POST request for payment confirmation from a bank API. . However, I'm also using GraphQL and I think that Graphql's Subscription could be what I'm trying to achieve.

Does anyone know how am I supposed to achieve this?

1. Are there anyways to send a request from REST to Graphql on my own server?
2. Or are there any better ways to do this?

Just like what is done in this video:

Answer 1

Do I understand correctly that you are looking for a way to notify your client that the payment was successful?

I assume you know how to handle redirect logic so here are the ways you can notify your web-app from the server.

1. Regular HTTP request

The client sends a regular HTTP-request to your server and you withhold the response until you received the 'payment completed' request from the bank API. If your request times out before the bank API confirms the payment - you simply send the same request again. This pattern is also known as Long Polling

2. Server-Sent Events

Your client can open a channel to your server that allow your server to send Events to your client (one-way). It is fairly easy to implement and a solid way to handle one-way communication. Check out the MDN documentation .

3. Web-SocketsMDN

You are probably familiar with these since they are the de-facto standard nowadays. Similar to Server-Sent Events but they allow two-way communication.

Most libraries that handle client-server communication implement a combination of these technologies in order to provide a fallback solution. I would recommend to stick to one of these libraries as they handle many edge-cases that are otherwise work-intensive to cover.

As you pointed out, if you are already using GraphQL you can simply use its subscriptions api . It uses WebSockets with a fallback to long-polling underneath.

Other popular options include socket.io or graphql-sse .