Magento2: Adding custom fields on checkout are not associated with the form

Question

I'm trying to add some custom fields on the checkout.

I looked around the internet and always I found an example adding some information on shipping address. But what I want is a fieldset independent of all checkout.

This is what I'm trying to do:

Adding some fields above the paymethod selection.

The problem is, that fields are not 'linked' with the checkout form

They are just appearing here, but when I place the order They are not anywhere, neither are following the validation rules, like 'validation' => ['required-entry' => true]

This is the layoutProcessor:

public function afterProcess(
    \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
    array $jsLayout
)
{
    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
    ['payment']['children']['beforeMethods']['children']['delivery_date'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'dataScope' => 'checkout',
        'config' => [
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/date',
        ],
        'label' => __('Deliver from'),
        'provider' => 'checkoutProvider',
        'options' => [],
        'validation' => ['required-entry' => true]
    ];

    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
    ['payment']['children']['beforeMethods']['children']['reference'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/input',
        ],
        'label' => __('Reference'),
        'provider' => 'checkoutProvider',
    ];

    return $jsLayout;
}

I think the key is dataScope or customScope but I tried everything and it's not working. How I can add my fields on the submit form?

I would like having something like that when I submit: This is the original

{
    "cartId":"91b932803feba53a90438efd42660630",
    "billingAddress":{
        "countryId":"ES",
        "regionId":"132",
        "regionCode":"Albacete",
        "region":"Albacete",
        "street":[
            "blabla, 
            1",
            ""
        ],
        "company":"bla",
        "telephone":"666666666",
        "postcode":"17003",
        "city":"Girona",
        "firstname":"bla",
        "lastname":"bla",
        "saveInAddressBook":null
    },
    "paymentMethod":{
        "method":"checkmo",
        "po_number":null,
        "additional_data":null
    },
    "email":"[email protected]"
}

This is what I wanted, for example:

{
    "cartId":"91b932803feba53a90438efd42660630",
    "billingAddress":{
        "countryId":"ES",
        "regionId":"132",
        "regionCode":"Albacete",
        "region":"Albacete",
        "street":[
            "blabla, 
            1",
            ""
        ],
        "company":"bla",
        "telephone":"666666666",
        "postcode":"17003",
        "city":"Girona",
        "firstname":"bla",
        "lastname":"bla",
        "saveInAddressBook":null
    },
    "paymentMethod":{
        "method":"checkmo",
        "po_number":null,
        "additional_data":null
    },
    "email":"[email protected]"
    "customFields": {
        "reference": "12345",
        "deliveryFrom": "2018-01-01",
        "(...)": "(...)"
    }
}

I guess, after I can see my custom fields on the submit json, I will have to add them though observer after place order for saving them into ddbb?

EDIT: Only changing the dataScope for shippingAddress.custom_attributes.delivery_date and customScope for shippingAddress.custom_attributes

it's working appending into shipping address like that:

{
    "cartId":"91b932803feba53a90438efd42660630",
    "billingAddress":{
        "countryId":"ES",
        "regionId":"132",
        "regionCode":"Albacete",
        "region":"Albacete",
        "street":[
            "blabla, 
            1",
            ""
        ],
        "company":"bla",
        "telephone":"666666666",
        "postcode":"17003",
        "city":"Girona",
        "firstname":"bla",
        "lastname":"bla",
        "customAttributes":{
            "delivery_date":"06/01/2017",
            "reference":"ddddddddddddddddddddddddd"
        }
        "saveInAddressBook":null
    },
    "paymentMethod":{
        "method":"checkmo",
        "po_number":null,
        "additional_data":null
    },
    "email":"[email protected]"
}

But this is not exactly what I want... also only works if I fill this information on the 2nd page then going back and forward just for saving that information.

Why that works? and everything I tried don't? What despairs me is that it's the only example you can find on the internet. Okay it works, but only for that! If you wanna do something a bit different like that you find a lot of new troubles.

Also what I discovered is, if you change that custom_attributes text in data or custom Scope it stops working.

Only doing this:

'dataScope' => 'shippingAddress.custom_attributess.delivery_date',

'customScope' => 'shippingAddress.custom_attributess',

Why the name custom_attributes is the only what works? Before defining it it doesn't even appeared on submitted form json.