Adding additional variables in window.checkoutConfig on Magento 2 Checkout page

We often need to add more variables that we need to use on the checkout page at the time of checkout. Here is how we can do that.

The first step is to add the following code in Vendor/Module/etc/frontend/di.xml of your custom module –

<?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="additional_provider" xsi:type="object">Webkul\Test\Model\AdditionalConfigVars</item>
           </argument>
       </arguments>
   </type>
</config>

After this, we will create AdditionalConfigVars.php in Vendor/Module/Model and add the following code to it –

<?php

namespace Webkul\Test\Model;

use \Magento\Checkout\Model\ConfigProviderInterface;

class AdditionalConfigVars implements ConfigProviderInterface
{
   public function getConfig()
   {
       $additionalVariables['test_var'] = 'Test Var';
       return $additionalVariables;
   }
}

Now all you need to do is flush Magento cache and check  ‘window.checkoutConfig.test_var’ in your js on the checkout page. It will return ‘Test Var’.

This is all for now.

Suggestions and queries are welcome.