The payment gateway I’m integrating with requires a post from a form to navigate to their payment page. Some of the information I need to post is dependent on the results from a call to my back end server.
The approach that worked was to create the form without an action or method. When the ‘submit’ button is clicked, the controller function (createPaymentAndNavigate) is called. This does the call to the back end, in the success callback sets the action and method on the form, and then submits the form.
<form id="bookingForm" name="bookingForm" novalidate > ... <button class="btn btn-success btn-lg pull-right" ng-click="createPaymentAndNavigate(bookingForm.$valid)">Payment</button> ... </form>
Success callback in AngularJS controller
var bookingForm = document.getElementById('bookingForm') bookingForm.action = "https://www.example.com/xyz/process.trans"; bookingForm.method = "POST"; bookingForm.submit();