How to add custom select box in window.checkoutConfig on Checkout

Sometimes you need a custom variable add-in window.checkoutConfig dynamically and display on the checkout page according to requirement, follow steps to add custom select box in window.checkoutConfig on Checkout.

Step 1 : Create di.xml file and add below code

File : 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\DefaultConfigProvider">
<plugin name="CustomCheckoutModelDefaultConfigProvider"
type="Vendor\Module\Plugin\Checkout\Model\DefaultConfigProvider" sortOrder="100"/>
</type> 
</config>

Step 2 : Create AdditionalConfigVars.php file and add below code

File : Vendor/Module/Model/AdditionalConfigVars.php

namespace Vendor\Module\Plugin\Checkout\Model;

use Magento\Checkout\Model\Session as CheckoutSession;
use Magento\Customer\Model\Session as CustomerSession;
use Magento\Framework\Exception\LocalizedException;
use Magento\Quote\Model\QuoteIdMaskFactory;
use Magento\Sales\Api\OrderRepositoryInterface;
use Magento\Customer\Model\GroupRegistry;

class DefaultConfigProvider
{

protected $checkoutSession;

protected $customerSession;

protected $quoteIdMaskFactory;

protected $orderRepository;

/**
* @param CheckoutSession $checkoutSession
* @param CustomerSession $customerSession
* @param QuoteIdMaskFactory $quoteIdMaskFactory
* @param OrderRepositoryInterface $orderRepository
*/
public function __construct(
CheckoutSession $checkoutSession,
CustomerSession $customerSession,
QuoteIdMaskFactory $quoteIdMaskFactory,
OrderRepositoryInterface $orderRepository,
) {
$this->checkoutSession = $checkoutSession;
$this->customerSession = $customerSession;
$this->quoteIdMaskFactory = $quoteIdMaskFactory;
$this->orderRepository = $orderRepository;
}

/**
* @param CheckoutSession $subject
* @param array $configData
*/
public function afterGetConfig(
\Magento\Checkout\Model\DefaultConfigProvider $subject, $configData
) {

$configData['customvalue']['customdata'] = '['test1','test2','test2']';

return $configData;
}

}

Step 3 : Create custom.js file and add below code

File : Vendor/Module/view/frontend/web/js/view/payment/method-renderer/custom.js

define( [ 'Magento_Checkout/js/view/payment/default', 'jquery', 'mage/validation'],
    function (Component, $,) {
        'use strict';

	return Component.extend({
            defaults: {
                template: 'Vendor_Module/payment/custom',
                customdata: ''
            },

	initObservable: function() {
                this._super().observe([
                    'customdata'
                ]);


                if (
                    window.checkoutConfig.hasOwnProperty('customvalue')
                    && window.checkoutConfig.customvalue.hasOwnProperty('customdata')
                ) {
                    this.customdata = window.checkoutConfig.customvalue.customdata;

                }
                return this;
            }
        });
    }
);

Step 4 : Create custom.html file and add below code

File : Vendor/Module/view/frontend/web/template/payment/custom.html

<div class="field field-user-email required">
<label for="customdata" class="label">
<span><!-- ko i18n: 'customdata data'--><!-- /ko --></span>
</label>
<div class="control">
<select id="customdata" name="payment[customdata]"
data-bind="value: customdata, options: customdata">
</select>
</div>
</div>

Note : Run setup upgrade and deploy command, then check on browser console type window.checkoutConfig.customvalue.customdata

Related Post :Customer Login Programmatically In Magento

Like us on Facebook and Linkedin for more updates.