How to redirect a user to an external site though a POST request

How to redirect a user to an external site though a POST request,which is better using backend-asp.net core web api or frontend- angular?

I am working with a payment gateway. For confirming 3D secure I need to redirect the user to a new-url.

The docs says that use like this a form,

<form
  id="pa-form"
  method="post"
  action="https://test.sagepay.com/mpitools/accesscontroler?action=pareq"
>
  <input
    type="hidden"
    name="PaReq"
    value="eJxVUstugzAQvPcrEB+AHwTiRBtHaXMIqlrRJlJ7tYzVoIIhBgL5+9oJNK1PM+PV7HrWsB7Kwjsr0+SVXvkkwP6aP8DhaJTa7pXsjOLwoppGfCkvz1Y+xSQO53GIWcgYwTHDM59DunlXJw6jD7c2AQE0UWtg5FHoloOQp8fklc8WdIExoJFCqUyy5SSibL5geDyAbjJoUSqe7g5GnFXRir4yRXasijwTgK53IKtOt+bCGY0BTQQ6U/C+7wM3fC0ugayC7huQkwHdZ0o7hxprM+QZT98SfaBVHX0878PPbBeJ4YI2eggZXgFyFZCJVnGKKSGEhh4mSzpfEgboqoMoXX8eR/Z5Nwi167C563852IyN0nIafmKghrrSylZQQL8YMtVIvnfbSMXFe0kT29ZJgO7PeNq5oGXrInUZX5Hzy20qNMQ3Q0cAuVo0rg+Ni7bo3wf4AWyps7I="
  />
  <input
    type="hidden"
    name="TermUrl"
    value="http://localhost:4200/payment"
  />
  <input type="hidden" name="MD" value="FAD0DBBA-FC72-2D9A-F09F-D4D6FFFCB2CD" />
</form>

// in index.html  
<script>document.addEventListener("DOMContentLoaded",function(){var b=document.getElementById("pa-form");b&&b.submit()})</script>

But I tried this form in angular. I got Cannot POST / response.

So I search about this, someone said angular is not able to handle third-party responses. So Then How can I do this? How to do above form with asp .net core or angular.

I am not clear What I should I do?

Please guide me. How can I use asp .net core and angular

1 answer

  • answered 2021-11-23 04:47 Pankaj Sati

    Brief overview: With a single-page application(Angular), you should not handle the third-party response on the client side if you are redirecting the user. Because each time the application redirects to a third party, all the context is lost and upon coming back, the Angular app will get bootstrapped again.

    Solution: In terms of architecture, you can use the following approach:

    1. Get all the gateway-related keys like PaReq, TermUrl etc when a user clicks on the pay now button on your website (HttpClient request can call your backend API to get the gateways configs). Example:

         {
            keys: [
              {
                name: "PaReq",
                value: "eJxVUstugzAQvPcrEB+AHwTiRBtHaXMIqlrRJ",
              },
              //... Rest of the keys
            ],
          };
      
    2. Create a dynamic form after getting gateway config

      let f = document.createElement("form");
      f.setAttribute("method", "post");
      f.setAttribute(
        "action",
        "https://test.sagepay.com/mpitools/accesscontroler?action=pareq"
      ); //Your action URL
      
      //create hidden input elements
      config.keys.forEach((item) => {
        let i = document.createElement("input");
        i.type = "hidden";
        i.name = item.name;
        i.value = item.value;
        f.appendChild(i); //Add it to the form
      });
      
      document.body.appendChild(f);//Add the form to the body
      f.submit(); //Submit it immediately
      
    3. Now the user will be redirected to the payment gateway. Payment gateways ask for a callback URL which they use to pass the result of payment to your backend. Create an API (let's say api/callback) that would handle the payment response from the gateway.

    4. Finally in api/callback you can store the response in the database and based upon payment success/failure, redirect the user back to your Angular application with payment id as a parameter. https://youapp.com/payment/123456/success

    Here, we have a route defined in Angular application named payment that takes 2 route parameters

        path: 'payment/:paymentId/:result'
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum