2

I'm using AngularJS and have a vendor who I need to POST data to. Upon submission, they redirect the user back to my site.

<form method="post" action="https://api.chargify.com/api/v2/signups">
  <input type="hidden" name="secure[api_id]"    value="1234" />
  <input type="hidden" name="secure[timestamp]" value="1301148971" />
  <input type="hidden" name="secure[nonce]"     value="5b2763d0-39e1-012e-858d-64b9e8d3946e" />
  <input type="hidden" name="secure[data]"      value="one=uno&amp;two=dos" />
  <input type="hidden" name="secure[signature]" value="412951d095ebbb3800dfb2126fe5073d2ab6c260" />
</form>

See Chargify Direct Signups for more info

They don't have CORS setup so I cannot use the $http service to post the data. It seems that I have to do this with an old-school form. I'm running into issues with angular validation and prevention of the form submission. Apparently angular ignores the result of the ng-submit when an action attribute is present.

Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

The validations are too complex for HTML5 browser validation so I really need access to prevent the form submission if the data is invalid. I'm kinda stuck on this. This seems like it should be an easy problem to solve but a decent solution has evaded me thus far. Has anyone else solved this problem or am I missing something obvious?

I've made a verify simplified plunker to demonstrate the issue:

http://plnkr.co/edit/p83VEFwJVbRjOoggfNpb?p=preview

Mike Cantrell
  • 683
  • 6
  • 18
  • Maybe you can create a "proxy" request - Make a call to some endpoint on your website using $http and let the server execute to POST request to the service (Using curl for example) and return the data to the client – Alon Eitan Jan 06 '17 at 19:14
  • 1
    The data has PCI compliance implications so it cannot pass through my servers :( – Mike Cantrell Jan 06 '17 at 19:15
  • So the only idea I can think of is to use the [redirection-uri](https://docs.chargify.com/chargify-direct-introduction#redirection-uri) parameter and redirect the user back to a page that will verify the parameters in the query sting when the user comes back – Alon Eitan Jan 06 '17 at 19:26
  • Yeah, the errors that come back aren't very helpful. I might be stuck with that. I'd like to provide a better user experience though – Mike Cantrell Jan 06 '17 at 19:30

1 Answers1

0

This feels a little hacky but I've sprinkled a little jQuery on it until I can find a more AngularJS solution:

  $("#billingForm").submit(function(e){
    var valid = $scope.billingForm.$valid;
    if (valid) {
      return true;
    }
    else {
      e.preventDefault();
      return false;
    }
  });
Mike Cantrell
  • 683
  • 6
  • 18