Magento – How Redirect to 3rd party payment gateway in Magento2

magento-2.1payment-methodsredirect-url

In Magento 1 we define the getOrderPlaceRedirectUrl in the model which extends Mage_Payment_Model_Method_Abstract and redirect to a particular controller after checkout submit.

Then from the controller we call $this->getResponse()->setBody($this->getLayout()->createBlock('someblock')->toHtml()) and inside the block we create a form with post data and redirect to a 3rd party payment gateway.

In Magento 2 I heard that getOrderPlaceRedirectUrl is not available and I'm unable to understand how it is handled.

Can someone please guide me to achieve the above scenario in Magento 2.1?

Best Answer

You need to override the placeOrder function in your method-render JS function.

    'use strict';

    return Component.extend({
        defaults: {
            template: 'Yuansfer_Yuansfer/payment/form'
        },
        getCode: function () {
            return 'yuansfer_alipay';
        },
        isActive: function () {
            return true;
        },
        getMediaUrl: function () {
            return mediaUrl;
        },
        placeOrder: function (data, event) {
            if(event) {
              event.preventDefault();  
            }

            var self = this,
                placeOrder,
                emailValidationResult = customer.isLoggedIn(),
                loginFormSelector = 'form[data-role=email-with-possible-login]';

            if (!customer.isLoggedIn()) {
                $(loginFormSelector).validation();
                emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
            }

            if (emailValidationResult && this.validate() && additionalValidators.validate()) {
                this.isPlaceOrderActionAllowed(false);

                var setPaymentInfo = setPaymentInformationAction(this.messageContainer, self.getData());
                    $.when(setPaymentInfo).fail(function () {
                        self.isPlaceOrderActionAllowed(true);
                    }).done(
                            this.afterPlaceOrder.bind(this)
                        );
                    return true;
            }
            return false;
        },
        selectPaymentMethod: function () {
            selectPaymentMethodAction(this.getData());
            checkoutData.setSelectedPaymentMethod(this.item.method);
            return true;
        },
        afterPlaceOrder: function () {
            window.location.replace(url.build('module_name/controller/action/'));
        }
    });
}
);

The key is here afterPlaceOrder function. You should redirect to your save action here.

Related Solutions

Magento – Redirect to external url after order creation

I think there is no explicitly defined extension point for your scenario. However, you can override the default behavior by creating a plugin on \Magento\Checkout\Controller\Onepage\Success::execute method.

Magento 2 – Redirect to 3rd Party Payment Gateway with Post Data

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.

Best Answer

Related Solutions

Magento – Redirect to external url after order creation

Magento 2 – Redirect to 3rd Party Payment Gateway with Post Data

Related Topic