Search code examples
angularrouterrouterlinkpayu

How can I redirect to the payulatam from through components in a SPA

I'm doing a SPA with Angular 6 and I'm creating payments with payulatam platform and I have a code for the sandbox payment that they offer

I've been working with router link and I have a component called paymentPayU on this I'm using the payment template form from PayULatam like this:

<form method="post" action="https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu">
  <input name="merchantId"    type="hidden"  value="508029"   >
  <input name="accountId"     type="hidden"  value="512321" >
  <input name="description"   type="hidden"  value="Test PAYU"  >
  <input name="referenceCode" type="hidden"  value="TestPayU" >
  <input name="amount"        type="hidden"  value="20000"   >
  <input name="tax"           type="hidden"  value="3193"  >
  <input name="taxReturnBase" type="hidden"  value="16806" >
  <input name="currency"      type="hidden"  value="COP" >
  <input name="signature"     type="hidden"  value="7ee7cf808ce6a39b17481c54f2c57acc"  >
  <input name="test"          type="hidden"  value="1" >
  <input name="buyerEmail"    type="hidden"  value="[email protected]" >
  <input name="responseUrl"    type="hidden"  value="http://www.test.com/response" >
  <input name="confirmationUrl"    type="hidden"  value="http://www.test.com/confirmation" >
  <input name="Submit"        type="submit"  value="Enviar" >
</form>

But in this case when I go to this component it presents the button that is not hidden, but when I clicked it, nothing happens, It supposed that a new page must be loaded, but it never show up.

I hope, someone can help me with this issue. Thank you.

Solution

  • Done!.

    Hello mwilson. Thanks for your interesting. I found the answer. It was pretty simple. I just had to put this directive to the form: ngNoForm like this.

    <form method="post" ngNoForm action="https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu">
  <input name="merchantId"    type="hidden"  value="508029"   >
  <input name="accountId"     type="hidden"  value="512321" >
  <input name="description"   type="hidden"  value="Test PAYU"  >
  <input name="referenceCode" type="hidden"  value="TestPayU" >
  <input name="amount"        type="hidden"  value="20000"   >
  <input name="tax"           type="hidden"  value="3193"  >
  <input name="taxReturnBase" type="hidden"  value="16806" >
  <input name="currency"      type="hidden"  value="COP" >
  <input name="signature"     type="hidden"  value="7ee7cf808ce6a39b17481c54f2c57acc"  >
  <input name="test"          type="hidden"  value="1" >
  <input name="buyerEmail"    type="hidden"  value="[email protected]" >
  <input name="responseUrl"    type="hidden"  value="http://www.test.com/response" >
  <input name="confirmationUrl"    type="hidden"  value="http://www.test.com/confirmation" >
  <input name="submit"        type="submit"  value="Enviar" >
</form>

    And that's all, by reviewing I must use ngSubmit, but this case it's when I have some function to call it, well, I haven't that, just the url then with this directive obviously Angular doesn't take this form as an angular form, I think, and that's it. Thanks a lot.