Request to URL from Angular To payfast payment vendor

Viewed 274

I need to perform a form POST to a 3rd party payment provider with Angular The flow need to be as follows.

The payment gateway I'm using is PayFast.

The problem is that in some cases when I perform URL redirect successfully I don't receive any response from payment gateway. When a user clicks "Pay". he is redirected to the success page http://example.com/success and in case of error response to page http://example.com/cancel.

HttpClient through service

I've also tried making HttpClient POST request inside the Angular app and without NodeJS backend. In that case, I call the Payment Gateway URL directly but with CORS error.

payment.service.ts:

payFunction(parameters: any){
  return this._httpClient.post('https://test-wallet.example.com/checkout/'+ 
      'param1='+parameters.param1+ 
      '&param2='+parameters.param2+
      '&param3='+parameters.param3+ 
      '&param4='+parameters.param4+ 
      '&param5='+parameters.param5+
      '&param6='+parameters.param6+ 
      '&param7='+parameters.param7+
      '&param8='+parameters.param8+
      '&param9='+parameters.param9
      ,parameters
      ,this.httpOptions 
    )
   .catch(err => {
      console.log(err);
      return Observable.of(err)
   })
}

I call the previous service in component:

async test(form){
  await this._myPaymentService.payFunction(form.value).subscribe(res => {
        console.log(res);
})

But here I'm getting cors policy error if I even go with allow header with cross origin to * then it will not work with production modes

Next method I used is Form Post method as shown below.

<form [action]="'https://test-wallet.example.com/checkout/'" ngNoForm method="POST" target="_blank">
  <button type="submit">Pay with card</button>
  <input name='param1' value='param1'>
  <input name='param2' value='param2'>
  <input name='param3' value='param3'>
  <input name='param4' value='param4'>
  <input name='param5' value='param5'>
  <input name='param6' value='param6'>
  <input name='param7' value='param7'>
  <input name='param8' value='param8'>
  <input name='param9' value='param9'>
**But no way to catch the response back from that.**

Can any one please help me out for how to make it out in backend .NET Core API and send the response back to the front end based on which i can show a message to user.

Thanks in advace.

0 Answers
Related