Add to window.checkoutConfig with a checkout config provider

Create a checkout config provider

While it's not the best practice in the world to use Magento's global window.checkoutConfig object to store data, this method is used all throughout Magento's core code.

This can greatly simplify custom frontend code in situations where it's hard to grab the same data and store it in a local component state, allowing you to easily store PHP-generated data in a JavaScript object.

By just adding an element to Magento_Checkout's CompositeConfigProvider model, then creating the simple PHP class, you can write any PHP code you wish and it will automatically be made available in this window.checkoutConfig object!

This includes any dynamic data, including CMS blocks as well as info pulled out of the database. This cannot be easily accomplished with pure JavaScript.

Wherever possible, you should strive to use local component state instead, as using & referencing a global JavaScript object is generally considered a bad practice. That said, this can be incredibly useful in order to quickly get dynamic data in a way that can be easily accessed with JavaScript.

Sometimes, you might want to pass around data in the checkout without adding a lot of code to your JavaScript. In such cases, a Checkout Config Provider can be really useful.

Creating a Custom Checkout Config Provider

First, let’s create a custom Checkout Config Provider within our custom module. Navigate to the etc->frontend->di.xml file and create a new type node with the name Magento\\Checkout\\Model\\CompositeConfigProvider.

<type name="Magento\\Checkout\\Model\\CompositeConfigProvider">
    ...
</type>

Now, if you inspect the constructor of this class, you’ll find a custom configProviders array. We will add our own custom config provider to this array.

<arguments>
    <argument name="configProviders" xsi:type="array">
        ...
    </argument>
</arguments>

Next, define your custom checkout provider within the configProviders argument.

<item name="macademy_customcheckouts_checkoutconfigprovider" xsi:type="object">
    Macademy\\CustomCheckout\\Model\\CheckoutConfigProvider
</item>

Creating the Checkout Config Provider Class

Create a new class for the checkout config provider. Under CustomCheckout, create a new file at Model/CheckoutConfigProvider.php.

<?php

declare(strict_types=1);

namespace Macademy\\CustomCheckout\\Model;

use Magento\\Checkout\\Model\\ConfigProviderInterface;

class CheckoutConfigProvider implements ConfigProviderInterface{
    public function getConfig(): array
    {
        return [
            'myKey' => 'myValue',
        ];
    }
}

This class implements the ConfigProviderInterface which requires the getConfig() method to be implemented. In this method, you can return an array of values that you wish to add to the window.checkoutConfig object.

Testing the Changes

After refreshing your checkout, you can inspect the window.checkoutConfig object in your browser’s console. You should now see a new property called myKey with the value "myValue".

You can also nest the array as deeply as you wish, just like the payment object, and it will be converted into a deeply nested object.