Question

0

347

Views

How to redirect a user based on a returned HTML form response?

I have a HTML form that submits a POST request to a Nelify serverless function. The serverless function does some processing and then returns a URL.

I'm using a HTML form to call the Nelify serverless function because using a JavaScript fetch was throwing a CORS error. The HTML form does not.

The HTML of the form looks like this:

<html>
  <head>
  </head>
  <body>
    <form action="https://www.example.com/.netlify/functions/stripe-create-checkout-session" method="POST">
      <input type="hidden" name="priceId" value="price_1JZS_EXAMPLE" />
      <button id="stripe-btn" type="submit">Checkout Test Starter Plan</button>
    </form>
  </body>
</html>

Screenshot of the HTML form (just the button is visible):

When a response is received the page is changed in place, and the HTML of the form changes to look like this:

<html>
  <body>
    <pre>{"url":"https://checkout.stripe.com/pay/cs_test_a1XZXYz2N8iS46oPtgZUsCFqe434u1c76D5MQrGkNeIW0yjEHbs0oYAx3h#fidkdWxOYHwnPyd1blpxYHZxWjA0T18xUTxGNGFBQjNSZEhXcX0xQH9QcExWRGxwNVRoT39gfDA0f1d3UUM3f0ByQT12Z0IyfXBKbTVVb05jUnFnNlxqf3Y9bl9XMUJWPWlqanR3RD0wVVRUNTU0UH13TDBHRCcpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ2BrZGdpYFVpZGZgbWppYWB3dic%2FcXdwYHgl"}
    </pre>
  </body>
</html>

And here is a screenshot of how that looks on the page:

With all that said, I have two questions:

How do I grab the url in the reponse and redirect the user to that page? I know this requires JavaScipt but I'm not sure what that should be.
I do not want the response to be rendered on the page. How do I stop it from showing to the user? Perhaps the redirect will hide this?

about 4 years ago · Juan Pablo Isaza