Gsyfuy

I successfully added custom shipping method like this:

app/etc/config.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">

    <default>

        <carriers>

            <lime>

                <active>1</active>

                <allowed_methods>delivery</allowed_methods>

                <methods>delivery</methods>

                <type>NAMESPACE</type>

                <sallowspecific>0</sallowspecific>

                <model>NamespaceModuleModelCarrier</model>

                <name>Namespace_Module custom Shipping</name>

                <title>Namespace_Module custom Shipping</title>

                <handling_type>F</handling_type>

            </lime>

        </carriers>

    </default>

</config>

app/code/Namespace/Module/Model/Carrier.php

public function collectRates(RateRequest $request)

{

    if (!$this->getConfigFlag('active')) {

        return false;

    } 

    $result = $this->_rateResultFactory->create(); 

    $method = $this->_rateMethodFactory->create(); 

    $method->setCarrier('HILO');

    $method->setCarrierTitle('HILO'); 

    $method->setMethod('Fast');

    $method->setMethodTitle('Fast'); 

    $amount = $this->getConfigData('price'); 

    $method->setPrice($amount);

    $method->setCost($amount); 

    $result->append($method);

    return $result;

}

It shows up at checkout page, but I want to show custom text area input data when the user choose my custom shipping method, and I can save the custom input text area data.

here's what I want it to look like:

In order to show a custom input field after selecting your custom shipping method, you have to add a js block subscribing to select method event:

Add a custom phtml to layout checkout_index_index.xml

Then add the next block to your phtml:

<script type="text/javascript">

    require([

        'jquery',

        'Magento_Checkout/js/model/quote',

    ], function (jQuery, quote) {

        jQuery(document).ready(function () {

            quote.shippingMethod.subscribe(function (value) {

                if (quote.shippingMethod() && quote.shippingMethod().carrier_code == 'your_custom_shipping_method_code') {

                    var customBlock = "<div class ='custom-information'><input type="text" id="your_custom_id"></div>";

                    if((!$('.custom-information').length > 0)) {

                        $('#checkout-shipping-method-load').append(customBlock);

                    }

                });

            });

        });

    });

</script>

With the above code, you will add the input you want below your custom shipping method.

After that, you should have to create a plugin to save your custom value.

Check: MagentoCheckoutModelGuestShippingInformationManagement

I hope it helps you.
Regards,
Pablo