Receive POST data inside angular component

Question

I am integrating Payment gateway in Angular version 7.

Payment gateway needs data input like below

requestParameter : MerchantId||CollaboratorID||Encrypted_string

I tried to submit form using ngForm as below, but my request is not posting to Payment gateway url and getting error 404 not found for "http://localhost:4200/direcPayment/" and Session expired message of Payment gateway in a response of that. It's just like if anything is wrong in the request you get session expired message.

Behind in the code, I am passing the parameter as required and making http.post call as below. On click of OnSubmit I have called formSubmit with encrypted string

formSubmit( encryptedString) {
const formData = new FormData();
formData.append( 'requestParameter', encryptedString);

this.http.post('direcPayment/', formData, httpFormDataOptions)
    .subscribe((resposne) => {
      console.log(resposne);
    });

}

Inside "httpFormDataOptions" I have added below headers

const httpFormDataOptions = {
  headers: new HttpHeaders(),
};
httpFormDataOptions.headers.append('Access-Control-Allow-Origin', '*');
httpFormDataOptions.headers.append('Access-Control-Allow-Methods', 'DELETE, POST, GET, OPTIONS');
httpFormDataOptions.headers.append('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

/direcPayment refers to my Proxy.config.json file as below

{
  "/direcPayment": {
  "target": "PaymentGatewayURL",
  "secure": true,
  "pathRewrite": {"^/direcPayment" : ""},
  "changeOrigin": true
  },
}

so currently I used ngNoForm and submit the form using action attribute.

So I want to ask two queries

Submitting form to payment gateway link using httpClient POST method
Payment Gateway says, if payment is either successful/failure then they will redirect to success/failure URL as POST data in encrypted format, So how to receive data to a specific URL in angular? Is there any way to receive data if someone called my angular URL in both cases either using httpClient Call OR ngNoForm

Thanks.

user_5435182 · Answer

Your code:

this.http.post('direcPayment/', formData, httpFormDataOptions)
    .subscribe((resposne) => {
      console.log(resposne);
    });
}

so the post data will be submitted to http://localhost:4200/direcPayment/, you should put the URL of your payment gateway here

user_982341 · Answer

Assuming that you have a server-side) back-end for your application, you should probably handle the entire transaction from the back end.

If you don't have a back-end at all, I have no suggestions. I can't think of any secure way to do this entirely on the client side.

user_7301314 · Answer

You should define an API Post endpoint that will receive the payment payload response and will redirect to your desired frontend page.

A .NET example would be:

[HttpPost("api/payment-done"]
public IActionResult PaymentDone([FromBody] PaymentPayload request)
{
   //do stuff with payload
   return Redirect("http://your-website-page");
}

Receive POST data inside angular component

3 Answers