In Magento 2 you have to create custom JavaScript component responsible for redirect to a Payment Provider. So how it works in Magento 2.
Custom redirect.html template with "Place Order" button should be created
This template is controlled by a redirect.js JavaScript component with afterPlaceOrder function inside which you can send HTTP GET request to your custom controller which will return parameters required for sending HTTP POST request to a payment gateway.
afterPlaceOrder: function () {
var self = this;
$.get(config.getDataUrl())
.done(function (response) {
customerData.invalidate(['cart']);
formBuilder(response).submit();
}).fail(function (response) {
errorProcessor.process(response, self.messageContainer);
}).always(function () {
fullScreenLoader.stopLoader();
});
}
The config.getDataUrl() is custom controller URL. Here you do implement 2 different ways of POST parameters preparation. URL can be prepared from backend side and provided to a frontend by implementing the \Magento\Checkout\Model\ConfigProviderInterface::getConfig() method.
Return key => value array of parameters as a response. The formBuilder(response).submit() will foreach parameters and prepare form which will be submitted to a payment provider as post.
var formTmpl =
'<form action="<%= data.action %>" method="POST" hidden enctype="application/x-www-form-urlencoded">' +
'<% _.each(data.fields, function(val, key){ %>' +
'<input value="<%= val %>" name="<%= key %>" type="hidden">' +
'<% }); %>' +
'</form>';
return function (response) {
var inputs = {};
for (var index in response.fields) {
inputs[response.fields[index]] = response.values[index]
}
var hiddenFormTmpl = mageTemplate(formTmpl);
var tmpl = hiddenFormTmpl({
data: {
action: response.action,
fields: inputs
}
});
return $(tmpl).appendTo($('[data-container="body"]'));
};
Render form wrapped in a <html><body><form/></body></html> on backend side using Block and *.phtml file with inline JavaScript inside the response. Once retrieved, JavaScript will trigger redirect. It is less recommended way but might be less time consuming.
