0

I'm trying to add a checkbox in the payment selection process. The checkbox appears correctly. I can't get it to be handled as mandatory. What am I doing wrong? This is my code:

$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children']['before-place-order']['children']['privacy'] = [
    'component' => 'Magento_Ui/js/form/element/abstract',
    'config' => [
        'customScope' => 'billingAddress',
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/checkbox',
        'id' => 'privacy'
    ],
    'dataScope' => 'billingAddress',
    'label' => __(''),
    'description' => __('I agree with privacy policy.'),
    'provider' => 'checkoutProvider',
    'visible' => true,
    'validation' => ['required-entry' => true],
    'sortOrder' => 200,
    'id' => 'privacy'
];

Thank you

4
  • If I am not mistaken that validation is for in text field and will not work with checkbox and input fields.
    – Korbin
    Nov 16, 2022 at 18:29
  • in the contact and registration form those settings work for me Nov 17, 2022 at 7:14
  • @RobertoTorresani Default Magento checkout does not support validation for the checkbox field, we have to customize it to achieve that. I'll give you the solution soon.
    – Tu Van
    Nov 23, 2022 at 10:15
  • @TuVan thank you. Dec 6, 2022 at 22:08

1 Answer 1

0

Magento default does not support validation for the checkbox field on the checkout page, we should follow how Magento implements validation for the Term and Condition agreement checkbox field.

In this post, I'll write step by step how to create a new module to add a new privacy policy agreement checkbox and make it required on the checkout page.

Assume your the vendor name is TuVan, and your module name is Checkout. Take the following steps:

Step 1: Create the registration.php file:
File path: app/code/TuVan/Checkout/registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'TuVan_Checkout', __DIR__);

Step 2: Create the module.xml file:
File path: app/code/TuVan/Checkout/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="TuVan_Checkout">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Step 3: Create di.xml file:
File path: app/code/TuVan/Checkout/etc/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\Block\Checkout\LayoutProcessor">
        <plugin name="ModifyCheckoutField" type="TuVan\Checkout\Plugin\ModifyCheckoutField"/>
    </type>
</config>

Step 4: Create ModifyCheckoutField.php file:
File path: app/code/TuVan/Checkout/Plugin/ModifyCheckoutField.php

<?php

namespace TuVan\Checkout\Plugin;

class ModifyCheckoutField
{
    /**
     * Add privacy policy agreement checkbox
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        $paymentChildren = &$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']
        ['children']['payment']['children'];
        $paymentChildren['payments-list']['children']['before-place-order']['children']['privacy'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'billingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'TuVan_Checkout/checkout/privacy-agreement',
                'id' => 'privacy'
            ],
            'dataScope' => 'billingAddress',
            'description' => __('I agree with privacy policy.'),
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => ['required-entry' => true],
            'sortOrder' => 200,
            'id' => 'privacy'
        ];
        $paymentChildren['additional-payment-validators']['children']['privacy-agreement-validator']
        ['component'] = 'TuVan_Checkout/js/view/privacy-agreement-validation';

        return $jsLayout;
    }
}

Step 5: Create the privacy-agreement.html file:
File path: app/code/TuVan/Checkout/view/frontend/web/template/checkout/privacy-agreement.html

<div class="checkout-agreement privacy-checkout-agreement field choice required">
    <input type="checkbox" class="required-entry"
           data-bind="attr: {
                id: uid,
                disabled: disabled,
                name: inputName,
            }"/>
    <label class="label" data-bind="checked: value, attr: { for: uid }">
        <span data-bind="text: description"></span>
    </label>
</div>

Step 6: Create the privacy-agreement-validation.js file:
File path: app/code/TuVan/Checkout/view/frontend/web/js/view/privacy-agreement-validation.js

define([
    'uiComponent',
    'Magento_Checkout/js/model/payment/additional-validators',
    'TuVan_Checkout/js/model/privacy-agreement-validator'
], function (Component, additionalValidators, privacyAgreementValidator) {
    'use strict';

    additionalValidators.registerValidator(privacyAgreementValidator);

    return Component.extend({});
});

Step 7: Create the privacy-agreement-validator.js file:
File path: app/code/TuVan/Checkout/view/frontend/web/js/model/privacy-agreement-validator.js

define([
    'jquery',
    'mage/validation'
], function ($) {
    'use strict';

    return {
        /**
         * Validate checkout privacy agreement
         *
         * @returns {Boolean}
         */
        validate: function (hideError) {
            var isValid = true,
            element = $('.payment-method._active div.privacy-checkout-agreement input');

            if (!$.validator.validateSingleElement(element, {
                errorElement: 'div',
                hideError: hideError || false
            })) {
                isValid = false;
            }

            return isValid;
        }
    };
});

Step 8: Finally, run the setup:upgrade command to make your new module active, and then compile code, deploy static content:

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.