I successfully added custom shipping method like this:


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
                <name>Namespace_Module custom Shipping</name>
                <title>Namespace_Module custom Shipping</title>


public function collectRates(RateRequest $request)
    if (!$this->getConfigFlag('active')) {
        return false;
    $result = $this->_rateResultFactory->create(); 
    $method = $this->_rateMethodFactory->create(); 
    $amount = $this->getConfigData('price'); 
    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:

enter image description here

  • 2
    hi, how did you add this field?can you please help me to get a code?
    – Mujahidh
    Sep 4, 2018 at 6:30

2 Answers 2


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">
    ], 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)) {

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: Magento\Checkout\Model\GuestShippingInformationManagement

I hope it helps you. Regards, Pablo

  • 2
    can you please explain this little more
    – Mujahidh
    Sep 5, 2018 at 6:31
  • While this may work in some fashion, this isn't best practice and definitely something to try and get away from doing. Specifically, the use of jQuery as a hammer to inject content into the page like this.
    – sdaugherty
    Oct 19, 2020 at 19:23


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                <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="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="carrier_custom" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/carrier_custom</item>


], function ($, ko, Component, quote) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/checkout/shipping/carrier_custom'

        initObservable: function () {

            this.selectedMethod = ko.computed(function() {
                var method = quote.shippingMethod();
                var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
                return selectedMethod;
            }, this);

            return this;


<div id="my-carrier-custom-block-wrapper" data-bind="visible: selectedMethod() == 'mycarrier_mymethod'">
    <p data-bind="i18n: 'This is custom block shown only when selected specific method'"></p>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.