I am working on an application where I need to integrate the pay box payment API. I am submitting a multipart form where I mentioned a URLretour on which the pay box is sending us a response. However, we are unable to receive it using the component. It gives us the error message cannot POST.

Below is my code

payBillTest() {

    var paymentRequest: PaymenTestDto = {
        IdMerchant: '38023277',
        IdSession: '8052d30c-d49c-4415-a2a7',
        Amount: roundedAmount.toString(),
        CCNumber: cCNumberWithoutHyphens.toString(),
        // AccountResourceId: this.accountResourceId.toString(),
        EmailPorteur: paymentFormData.email.toString(),
        FirstName: paymentFormData.firstName.toString(),
        CCExpDate: expiryDate.toString(),
        CVVCode: paymentFormData.cVVCode.toString(),
        LastName: paymentFormData.lastName.toString(),
        Address1: paymentFormData.address.toString(),
        City: paymentFormData.city.toString(),
        CountryCode: 'FR',
        TotalQuantity: '1',
        Currency: '978',
        ChallengeIndicator: '02',
        URLRetour: 'http://localhost:4200/#/app/my-invoices/payment-response'
    };


    const postUrl = 'https://preprod-tpeweb.paybox.com/cgi/RemoteMPI.cgi';

    // Create a form element
    const form = document.createElement('form');
    form.action = postUrl;
    form.method = 'POST';
    form.target = '_blank';

    // Append form fields
    for (const key in paymentRequest) {
        if (paymentRequest.hasOwnProperty(key)) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = (paymentRequest as any)[key] ?? '';
            form.appendChild(input);
        }
    }
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);

}

Here is my component on which I need to capture the response.

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-payment-response',
  templateUrl: './payment-response.component.html',
  styleUrl: './payment-response.component.scss'
})
export class PaymentResponseComponent {
  payboxResponse: any;
  constructor(private route: ActivatedRoute){}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      debugger
      // Assuming the response is URL encoded and passed as a query parameter named 'data'
      if (params['data']) {
        this.payboxResponse = JSON.parse(decodeURIComponent(params['data']));
      }
    });
  }
}

The thing is when I submit the form it redirects me to the merchant API URL and then posts the form automatically and immediately redirects me to the URLretour try to send a response on that specific route but I am unable to see any response.