Magento2 Checkout JavaScript – How to Access Configuration Variables

checkoutconfigurationjavascriptmagento-communitymagento2

I am developing a magento custom payment method(gateway) and in order to redirect the user to the gateway I want to set on the checkout form to redirect to the custom gateways url with the coresponding parameters. So I created a custom controller action and want to redirect the user there so the POST data is created and from there to my custom gateways checkout page(http://somewhereonthenet.com).

The problem is that I do not know how to set the route or url for my action in the javascript so I can use it there. The javascript to redirect to my method is as follows:

/** Redirect to gateway */
continueToGateway: function () {
    if (additionalValidators.validate()) {
        //update payment method information if additional data was changed
        this.selectPaymentMethod();
        setPaymentMethodAction(this.messageContainer).done(
            function () {
                customerData.invalidate(['cart']);
                $.mage.redirect(
                    window.checkoutConfig.payment // Dont know what to put here and how to set it
                );
            }
        ;

        return false;
    }
}

And in the template it looks like this:

<div class="actions-toolbar">
    <div class="primary">
        <button class="action primary checkout" type="submit"
            data-bind="click: continueToGateway, enable: (getCode() == isChecked())"
            disabled>
                <span data-bind="i18n: 'Continue to gateway'"></span>
        </button>
    </div>
</div>

The code is working and it goes to the $.mage.redirect() but I do not know how to insert my module action url here.

So in this code I have to redirect to my custom action how to do that? Any help is appreciated.

Best Answer

Create a di.xml [Vendor]/[Module]/etc/frontend/di.xml


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="custom_payment_config_provider" xsi:type="object">[Vendor]\[Module]\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Create a config provider [Vendor]/[Module]/Model/CustomConfigProvider.php


namespace [Vendor]\[Module]\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

class CustomConfigProvider implements ConfigProviderInterface
{
    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        $config = [
            'payment' => [
                'customPayment' => [
                    'redirectUrl' => 'www.google.com',
                ]
            ]
        ];
        return $config;
    }
}

now you can access this from js following way


//window.checkoutConfig.payment.customPayment.redirectUrl
console.log(window.checkoutConfig.payment.customPayment.redirectUrl);
Related Topic