How To add a custom checkbox to the checkout page in Magento 2?

In this blog, We are going to learn, how to add a custom checkbox to the checkout page in Magento 2?

Add Our Custom Checkbox to Checkout Page Programmatically.

Step1. Create custom.js file under YourVendorName/ModuleName/view/frontend/web/js/view directory, and add following code.

define(
 [
 'ko',
 'uiComponent'
 ],
 function (ko, Component) 
{
 "use strict";

 return Component.extend({
 defaults: 
{
 template: 'VendorNameSpace_ModuleName/yourtemplatefileName'
 },
 isRegisterNewsletter: true
 });
 }
);

Step 2.Create templatefile.html under YourVendorName/ModuleName/view/frontend/web/template directory, add this code.

<div class="col-mp mp-12">
 <input type="checkbox" name="newsletter" data-bind="checked: isRegisterNewsletter, attr: {id: 'place-order-newsletter'}"/>
 <label data-bind="attr: {for: 'place-order-newsletter'}"><span data-bind="i18n: 'Custom checkbox'"></span></label>
</div>

Step 3. Add the component to checkout page layout YourVendorName/ModuleName/view/frontend/layout/checkout_index_index.xml, add this code.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <!-- Modifying an existing step-->
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="before-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="newsletter" xsi:type="array">
                                                                        <item name="component" xsi:type="string">YourVendorName_ModueName/js/view/yourcustom</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>

                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

Step 4. /view/frontend/layout/checkout_index_index.xml. (For your checkout customization to be applied correctly, your custom module should depend on the Magento_Checkout module. you must add composer.json to add the dependency.

{
 "name": "vendorname/modulename",
 "description": "custom checkout adding checkbox component",
 "license": "GPL-3.0",
 "type": "magento2-module",
 "version": "1.0.0",
 "authors": [
 {
 "email": "[email protected]",
 "name": "yourname"
 }
 ],
 "keywords": [
 "magento2-module"
 ],
 "minimum-stability": "dev",
 "require": {
 "php": "~5.5.0|~5.6.0|~7.0.0",
 "magento/framework": "*",
 "magento/module-checkout": ">100.0",
 },
 "autoload": {
 "files": [
 "registration.php"
 ],
 "psr-4": {
 "VendorName\\ModuleName\\": ""
 }
 }
 }

I hope that you found this Blog helpful. If you’ve any queries, please leave comments in the comment section.

Thanks for following and reading this blog.

.jexpoundsofttechsolution

How To add a custom checkbox to the checkout page in Magento 2?

ghb