Handling response from HTTP POST without access to the request in Next.js

I'm implementing the payment gateway API of a local company that provides a HTML fragment that renders a button in my page to handle the checkout and payment in a modal-like interface that is out of my control (without redirecting the user outside of my page).

The fragment is a script tag like this:

<form action="http://localhost:3000/api/checkout" method="POST">    <script      src="https://www.mercadopago.com.ar/integrations/v1/web-tokenize-checkout.js"      data-public-key="ENV_PUBLIC_KEY"      data-transaction-amount="100.00">    </script>  </form>  

After the Card and payment info is entered by the user, the gateway makes a POST request to my API endpoint 'checkout' in Next.js (specified in the action attribute of the form) with some data to confirm the transaction as shown in the following.

/pages/api/checkout.js:

export default (req, res) => {      mercadopago.configurations.setAccessToken(configAccess_token);      var payment_data = {           transaction_amount: 100,           token: token,           description: 'Blue shirt',           installments: installments,           payment_method_id: payment_method_id,           issuer_id: issuer_id,           payer: {           email: 'john@yourdomain.com'           }       };       // Save and process the payment:       mercadopago.payment.save(payment_data).then((data) => {           Console.log(data.status);       }).catch( (error) => {           console.error(error)       });    };  

I receive the payment info and I'm able to process the payment, however, the page keeps waiting for a promise-like response (stays loading indefinitely) after making the POST request. How could I handle this promise/response if I'm not explicitly making the POST request? I don't have access to the code that makes the POST request as it comes from the payment gateway itself.

I tried returning a response from my API endpoint with some data like this...

res.statusCode = 200;  res.setHeader('Content-Type', 'application/json');  res.json({success: 'success!'});  

... but it just renders the JSON data as plain text after redirecting me to my API URL: "http://localhost:3000/api/checkout".

The API documentation doesn't offer any info about this matter as far as I know after hours researching it.

My goal is to display some kind of notification of success (like a toast for example) or find any other way of letting the user know the transaction was completed without creating a generic '/success' page that anyone could visit at any time.

I have little experience in backend development so any help to put me in the right direction to handle this promise/response would be highly appreciated.

https://stackoverflow.com/questions/65964193/handling-response-from-http-post-without-access-to-the-request-in-next-js January 30, 2021 at 10:53AM