How to do a POST → REDIRECT call

Eximee-Console
1

I need a button on a form and pressing this button should send a HTML form using a POST method to a configured external URL (handled by an external API, not Eximee).

This call would return with a 302 Redirect Response, which in turn should redirect the user from the form to the URL this response redirects to.

How do I implement such button in Eximee?

2

This can be done by using Custom Component.

Create Custom Component by using menu: Library → Custom Component → Add Component.
On Your new custom component You have to set 3 things:

  1. Add input data. For example: externalApiUrl, additionalData
  2. Switch tab to HTML and insert:
<form method="POST" id="redirect_form" name="redirect_form">
    <input type="hidden" name="additionalData" id="additionalData">
</form>
<div class="redirect-button-wrapper">
	<button class="redirect-button"><span>Redirect</span></button>
</div>

This code represents form with required fields and button which will trigger sending
3. Switch tab to JavaScript and insert:

function($scope) {
    $scope.afterViewInit = function () {
        var redirectButton = document.getElementsByClassName("redirect-button")[0];
        if (redirectButton && redirectButton.disabled !== true) {
            redirectButton.addEventListener("click", function () {
                redirectButton.disabled = true;

                const externalApiUrl = $scope.componentInput['externalApiUrl'] ? $scope.componentInput['externalApiUrl'][0] : '';
                const additionalData = $scope.componentInput['additionalData'] ? $scope.componentInput['additionalData'][0] : '';

                $scope.redirectForm = $scope.queryChild('#redirect_form');
                $scope.redirectForm.attr('action', externalApiUrl);
                $scope.additionalData = $scope.queryChild('#additionalData');
                $scope.additionalData.attr('value', additionalData);
                $scope.redirectForm.submit();
            });
        }
    };
}

Here You create whole logic for template in HTML tab. You are letting button to be pressed only onece by disabling it after first click. Then script retrieves data from component input and passes them to form. At the end form is submitted. Response with status 302 is handled automatically so no additional actions are needed to redirect user from form to link returned by external api.

When You have Your Custom Component ready it is time to use it in form. Custom Components are added as usual by by drag and drop in Add Component menu, just remember to switch tab to Custom Components. After that add input parameters for component. Don’t forget to add listeners when input parameters are not constant.

1 Like