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">Armmage\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 Armmage\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 the 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.

Basic module create --> link



Take Your E-Commerce Business to New Heights Today.

Discuss your business objectives with us. Get in touch today to explore ways we can assist in reaching them.

Copyright © 2025 ArmMage LLC. All rights reserved.