Search
×
Log in or create an account
If you have an account with us, please log in.

You have no items in your shopping cart.

Frequently Asked Questions

How can we help you?

banner image

How to add a checkbox to checkout in Magento 2?

Say you want to add a newsletter checkbox to Magento 2 checkout. There are 2 ways how you can do it.

Warning: the code below is provided as an example only and requires further customization according to your business needs.

Method 1. Add a checkbox to Magento 2 checkout programmatically

For this, create and register your custom module that depends on the default Magento_Checkout plugin.

Next, create a checkout-form.js file in the <Vendor>/<Module>/view/frontend/web/js/view/ folder with the code like this:

/*global define*/
define([
    'Magento_Ui/js/form/form'
], function(Component) {
    'use strict';
    return Component.extend({
        initialize: function () {
            this._super();
            // component initialization logic
            return this;
        },
        /**
         * Form submit handler
         *
         * This method can have any name.
         */
        onSubmit: function() {
            // trigger form validation
            this.source.set('params.invalid', false);
            this.source.trigger('customCheckoutForm.data.validate');
            // verify that form data is valid
            if (!this.source.get('params.invalid')) {
                // data is retrieved from data provider by value of the customScope property
                var formData = this.source.get('customCheckoutForm');
                // do something with form data
                console.dir(formData);
            }
        }
    });
});

Then, go to the <Vendor>/<Module>/view/frontend/web/template folder and create a checkout-form.html file that adds knockout.js HTML template:

<div>
    <form id="checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset class="fieldset">
            <legend data-bind="i18n: 'Checkout Form'"></legend>
            <!-- ko foreach: getRegion('checkout-form-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </fieldset>
        <button type="reset">
            <span data-bind="i18n: 'Reset'"></span>
        </button>
        <button type="button" data-bind="click: onSubmit" class="action">
            <span data-bind="i18n: 'Submit'"></span>
        </button>
    </form>
</div>

Note that you can do it for a custom entity only.

After this, you need to add your custom form to the checkout page layout. Places, where you can insert custom fields, are marked in the default Checkout page layout file <Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml.

To add new content, create a checkout_index_index.xml layout update in the <Vendor>/<Module>/view/frontend/layout/.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
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">
                                        <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="checkout-form-container" xsi:type="array">
                                                                    <!-- Add this item to configure your js file  -->
                                                                    <item name="component"
                                                                    xsi:type="string">Vendor_Module/js/view/checkout-form</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <!-- And this to add your html template  -->
                                                                        <item name="template" xsi:type="string">Vendor_Module/checkout-form</item>
                                                                    </item>
                                                                    <item name="children" xsi:type="array">
                                                                        <!-- Here we will add the form fields  -->
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Next, clean up the pub/static/frontend and var/view_preprocessed folders and reload the pages.

A checkbox is a static form, so you can define it in the layout. The following code shows the settings of the form, defined above. It uses the checkoutProvider from the Magento_Checkout module:

...
    <item name="custom-checkout-form-container" xsi:type="array">
        ...
        <item name="children" xsi:type="array">
            <item name="checkout-form-fieldset" xsi:type="array">
                <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
                <item name="component" xsi:type="string">uiComponent</item>
                <!-- the following display area is used in template (see below) -->
                <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
                <item name="children" xsi:type="array">
                    <item name="checkbox_field" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
                        <item name="config" xsi:type="array">
                            <!--customScope is used to group elements within a single form (e.g. they can be validated separately)-->
                            <item name="customScope" xsi:type="string">customCheckoutForm</item>
                            <item name="template" xsi:type="string">ui/form/field</item>
                            <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
                        </item>
                        <item name="provider" xsi:type="string">checkoutProvider</item>
                        <item name="dataScope" xsi:type="string">customCheckoutForm.checkbox_field</item>
                        <item name="label" xsi:type="string" translate="true">Checkbox Field</item>
                        <item name="sortOrder" xsi:type="string">3</item>
                    </item>
                    </item>
                </item>
            </item>
        </item>
...


Method 2. Add a checkbox by using Magento 2 Custom Checkout Fields

If you need to create multiple additional fields and set up dependencies when they should be displayed, you can use our ready-made solution Custom Checkout Fields.  With its help, you can create new fields without programming skills right from your admin panel, and gather additional information about your customers. 

Rate the answer?

Total rating: 5.0

If you didn’t find the answer on your question, please, ask here:

Back to top