How to open a new tab with a post request from a component in Angular

Question

I am trying to build a function which sends a request post to a url, and at the same time open that url in a new tab with the post request...

This is what i got so far...

OLD

pay() {
    var data = `{
      "description": "Test PAYU",
      "referenceCode": "TestPayU",
      "amount": "20000",
      "tax": "3193",
      "buyerEmail": "test@test.com",
      "responseUrl": "http://www.test.com/response",
      "confirmationUrl": "http://www.test.com/confirmation",
      "submit": ""
    }`;
    this.http.post('https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu/', data).subscribe( (response)=>{
      console.log(response);
     });
  }

I want to open that url in a new tab within the request post on it..

I don't know how to do that with Angular...

UPDATE

So, I have done this solution for this problem, adding this dynamic form with javascript to do that:

pay() {
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu");
    form.setAttribute("target", "view");
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("merchantId", "508029");
    hiddenField.setAttribute("accountId", "512321");
    hiddenField.setAttribute("description", "Test PAYU");
    hiddenField.setAttribute("referenceCode", "TestPayU");
    hiddenField.setAttribute("amount", "20000");
    hiddenField.setAttribute("tax", "3193");
    hiddenField.setAttribute("taxReturnBase", "16806");
    hiddenField.setAttribute("currency", "COP");
    hiddenField.setAttribute("signature", "7ee7cf808ce6a39b17481c54f2c57acc");
    hiddenField.setAttribute("test", "1");
    hiddenField.setAttribute("buyerEmail", "test@test.com");
    hiddenField.setAttribute("responseUrl", "http://www.test.com/response");
    hiddenField.setAttribute("confirmationUrl", "http://www.test.com/confirmation");
    hiddenField.setAttribute("submit", "");
    form.appendChild(hiddenField);
    document.body.appendChild(form);
    window.open('', 'view');
    form.submit();
}

The problem is, even if the page is opened in a new tab, the parameters are not sent to the page...

What could be the problem?

Answer 1

I solved my problem using this dynamic form with JavaScript:

pay() {
    var form = document.createElement("form");
    form.target = "view";
    form.method = "POST";
    form.action = "https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu";
    var params = {
      "merchantId": "508029",
      "accountId": "512321",
      "description": "Test PAYU"
    };

    for (var i in params) {
        if (params.hasOwnProperty(i)) {
          var input = document.createElement('input');
          input.type = 'hidden';
          input.name = i;
          input.value = params[i];
          form.appendChild(input);
        }
    }

    document.body.appendChild(form);
    form.submit();
    window.open('', 'view');
    }

This did what i wanted, problem solved!.

Answer 2

pay() {
    var url = 'https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu';
    var data = `{
      "description": "Test PAYU",
      "referenceCode": "TestPayU",
      "amount": "20000",
      "tax": "3193",
      "buyerEmail": "test@test.com",
      "responseUrl": "http://www.test.com/response",
      "confirmationUrl": "http://www.test.com/confirmation",
      "submit": ""
    }`;
    this.http.post(url, data).subscribe( (response)=>{
      window.open(`${url}?data=${encodeURI(data)}`, '_blank')
     });
  }