Want to show text message for specific shipping method on checkout in magento2

Question

I have a custom shipping method. If I select that custom shipping method, I need to render the custom message below shipping method list. How can I do this?

Answer 1

Copy file from

vendor/magento/module-checkout/view/frontend/web/template/shipping.html

and paste into your theme as shown in the following path

app/design/frontend/namespace/theme/Magento_Checkout/web/template/shipping.html

Now find following table tag

<table class="table-checkout-shipping-method">
    .
    .
    .
</table>

Add your message after this table as shown in following code

<table class="table-checkout-shipping-method">
    .
    .
    .
</table>
<div class="custom-shipping-method-message" style="display: none;">This is custom shipping method message</div>

Now Add following jQuery code your page.

<script type="text/javascript">
    require(["jquery"], function($) {
        jQuery(document).ready(function(){
            jQuery('body').on('click', '.table-checkout-shipping-method input[type="radio"]', function(){
                var code = 'your_custom_shipping_method_code';
                // you can check your custom shipping method code using inspect element
                // you can see the code in the value of input type radio

                if(jQuery(this).val() == code){
                    jQuery('.custom-shipping-method-message').show();
                } else {
                    jQuery('.custom-shipping-method-message').hide();
                }
            });
        });
    }
</script>

Run the following command

php bin/magento setup:static-content:deploy -f