Customize the length of Input field on Checkout form

Spread the love

Sometimes we need to limit the number of allowed characters on checkout forms. Let’s consider we want to limit the number of characters allowed for firstname on the Review & Payments page.

We need to add plugin to achieve this task.

Step1: Create Bluethink/Checkout/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="bluethink_checkout_block_checkout_layoutprocessor" type="Bluethink\Checkout\Plugin\Checkout\Block\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

<?xml version="1.0"?>

</type>

</config>

Step2: Create Bluethink/Checkout/Plugin/Checkout/Block/Checkout/LayoutProcessor.php

<?php

namespace Bluethink\Checkout\Plugin\Checkout\Block\Checkout;

class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        $configuration = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];
        foreach ($configuration as $paymentGroup => $groupConfig) {
            if (isset($groupConfig['component']) AND $groupConfig['component'] === 'Magento_Checkout/js/view/billing-address') {

                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentGroup]['children']['form-fields']['children']['firstname']['validation'] = [
                    'required-entry' => true, 'min_text_len‌gth' => 1, 'max_text_length' => 15
                ];

               }
        }

        return $jsLayout;
    }
}

<?php

namespace Bluethink\Checkout\Plugin\Checkout\Block\Checkout;

class LayoutProcessor

{

/**

* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject

* @param array $jsLayout

* @return array

public function afterProcess(

\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,

array $jsLayout

) {

$configuration = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];