Magento2 how to set checkbox value?

Question

I have added a custom checkbox in shipping address section on checkout page, i have used Plugin to observe the checkbox value but it is not returning the checkbox value rather it is simply showing

subscribe:on

Can anyone suggest. how to get checkbox value.

. I have used below code for displaying the checkbox,

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
                    ['shippingAddress']['children']['shipping-address-fieldset']['children']['newsletter_subscribe'] = [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'ui/form/element/checkbox',
                    'options' => [],
                    'id' => 'delivery-date'
                ],
                'dataScope' => 'shippingAddress.newsletter_subscribe',
                'label' => $label,
                'provider' => 'checkoutProvider',
                'visible' => true,
                'checked' => true,
                'value' => 1,
                'validation' => [],
                'sortOrder' => 250,
                'id' => 'nesletter-subscribe'
            ];

Please see below for my Plugin to get the Checkbox value,

class ShippingInformationManagementPlugin
{
    protected $quoteRepository;
    protected $logger;
    public function __construct(
        \Magento\Quote\Model\QuoteRepository $quoteRepository,\Psr\Log\LoggerInterface $logger
    ) {
        $this->quoteRepository = $quoteRepository;
        $this->logger = $logger;
    }
    /**
     * @param \Magento\Checkout\Model\ShippingInformationManagement $subject
     * @param $cartId
     * @param \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
     */
    public function beforeSaveAddressInformation(
        \Magento\Checkout\Model\ShippingInformationManagement $subject,
        $cartId,
        \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
    ) {
        $this->logger->info('Nagamani');

        $extAttributes = $addressInformation->getExtensionAttributes();
        $NewsletterSubscribe = $extAttributes->getSubscribe();

        $quote = $this->quoteRepository->getActive($cartId);
        $quote->setNewsletterSubscribe($NewsletterSubscribe);
    }
}

Answer 1

For passing value you need to overwrite 'Magento_Checkout/js/model/shipping-save-processor/default.js'

Create Vendor/Module/view/frontend/requirejs-config.js

var config = {
    "map": {
        "*": {
            'Magento_Checkout/js/model/shipping-save-processor/default': 'Vendor_Module/js/model/shipping-save-processor/default'
        }
    }
};

Create Vendor/Module/view/frontend/web/js/model/shipping-save-processor/default.js

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/resource-url-manager',
        'mage/storage',
        'Magento_Checkout/js/model/payment-service',
        'Magento_Checkout/js/model/payment/method-converter',
        'Magento_Checkout/js/model/error-processor',
        'Magento_Checkout/js/model/full-screen-loader',
        'Magento_Checkout/js/action/select-billing-address'
    ],
    function (
        $,
        ko,
        quote,
        resourceUrlManager,
        storage,
        paymentService,
        methodConverter,
        errorProcessor,
        fullScreenLoader,
        selectBillingAddressAction
    ) {
        'use strict';

        return {
            saveShippingInformation: function () {
                var payload;

                if (!quote.billingAddress()) {
                    selectBillingAddressAction(quote.shippingAddress());
                }
                var subscribe = $('[name="newsletter_subscribe"]').is(':checked') ? 1 : 0
                payload = {
                    addressInformation: {
                        shipping_address: quote.shippingAddress(),
                        billing_address: quote.billingAddress(),
                        shipping_method_code: quote.shippingMethod().method_code,
                        shipping_carrier_code: quote.shippingMethod().carrier_code,
                        extension_attributes:{
                            subscribe: subscribe
                        }
                    }
                };

                fullScreenLoader.startLoader();

                return storage.post(
                    resourceUrlManager.getUrlForSetShippingInformation(quote),
                    JSON.stringify(payload)
                ).done(
                    function (response) {
                        quote.setTotals(response.totals);
                        paymentService.setPaymentMethods(methodConverter(response.payment_methods));
                        fullScreenLoader.stopLoader();
                    }
                ).fail(
                    function (response) {
                        errorProcessor.process(response);
                        fullScreenLoader.stopLoader();
                    }
                );
            }
        };
    }
);

Create Extension Attributes Vendor/Module/etc/extension_attributes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="Magento\Checkout\Api\Data\ShippingInformationInterface">
        <attribute code="subscribe" type="string"/>
    </extension_attributes>
</config>

Here is an example module

Answer 2

You can see on app/code/Magento/CheckoutAgreements/view/frontend/layout/checkout_index_index.xml.

<item name="payments-list" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="before-place-order" xsi:type="array">
            <item name="children" xsi:type="array">
                <item name="agreements" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
                    <item name="sortOrder" xsi:type="string">100</item>
                    <item name="displayArea" xsi:type="string">before-place-order</item>
                    <item name="dataScope" xsi:type="string">checkoutAgreements</item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                </item>
            </item>
        </item>
    </item>

And add your checkbox in the same way using xml. To sent your checkbox value you can create your own js-mixin. Please see as example place-order-mixin.js(app/code/Magento/CheckoutAgreements/view/frontend/web/js/model/place-order-mixin.js)