Reading list Switch to dark mode

    How to Pass Custom Data in Checkout in Magento 2

    Updated 24 February 2023

    In this blog, we will learn how to pass custom data in checkout in Magento 2. On the checkout page, sometimes we need to pass some custom data to display or add data at the time of the checkout process. So, we need to use Magento\Checkout\Model\CompositeConfigProvider class to pass custom variables on the checkout page.

    Let’s start step by step and learn how we can do that :

    Step 1: We assume, you have created a simple module, then you have to add the below code in the app/code/Webkul/CustomCheckoutData/etc/frontend/di.xml file :

    <?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="set_custom_data" xsi:type="object">Webkul\CustomCheckoutData\Model\CheckoutConfigProvider</item>
                </argument>
            </arguments>
        </type>
    </config>

    Step 2: After that, You need to create an app/code/Webkul/CustomCheckoutData/Model/CustomConfigProvider.php file and paste the below code to add a custom value :

    <?php
    
    namespace Webkul\CustomCheckoutData\Model;
    
    use \Magento\Checkout\Model\ConfigProviderInterface
    
    class CheckoutConfigProvider implements ConfigProviderInterface
    {
        public function getConfig()
        {
    		$configArray = [];
    		$configArray['custom_data'] = 'Webkul Test Value';
    		return $configArray;
        }
    }

    Here, you need to implement the Magento\Checkout\Model\ConfigProviderInterface interface in a custom file to pass a custom value in the checkout config.

    Searching for an experienced
    Magento 2 Company ?
    Read More

    Now, you need to flush the cache and then, you can access this value in the JS file on the checkout page using the below way :

    window.checkoutConfig.custom_data

    Output:

    Screenshot-from-2023-02-24-09-09-31-1

    We hope this tutorial is useful for you.

    You may like our other tutorials :

    Custom router in Magento2

    Custom Checkout step in Magento 2

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home