app/code/Ktpl/Ordercomment/etc/frontned/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
<plugin name="sr_add_custom_field"
type="Ktpl\Ordercomment\Plugin\Checkout\Model\Checkout\LayoutProcessor" sortOrder="100"/>
</type>
</config>
app/code/Ktpl/Ordercomment/Plugin/Checkout/Model/Checkout/LayoutProcessor.php
<?php
namespace Ktpl\Ordercomment\Plugin\Checkout\Model\Checkout;
class LayoutProcessor
{
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
){
$jsLayout = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'customCheckoutForm',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
],
'provider' => 'checkoutProvider',
'dataScope' => 'customCheckoutForm.text_field',
'label' => 'Text Field',
'sortOrder' => 1,
'validation' => [
'required-entry' => true,
],
];
return $jsLayout;
}
}
app/code/Ktpl/Ordercomment/view/frontend/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<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="custom-checkout-form-container" xsi:type="array">
<item name="component" xsi:type="string">Ktpl_Ordercomment/js/view/ordercomment</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="sortOrder" xsi:type="string">2</item>
<item name="children" xsi:type="array">
<item name="custom-checkout-form-fieldset" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<!-- the following display area is used in template (see below) -->
<item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
<item name="children" xsi:type="array">
<item name="text_field" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
<item name="config" xsi:type="array">
<!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
<item name="customScope" xsi:type="string">customCheckoutForm</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/textarea</item>
</item>
<item name="provider" xsi:type="string">checkoutProvider</item>
<item name="dataScope" xsi:type="string">customCheckoutForm.ordercomment</item>
<item name="label" xsi:type="string">Order Comment</item>
<item name="sortOrder" xsi:type="string">1</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
app/code/Ktpl/Ordercomment/view/frontend/web/js/view/ordercomment.js
define(
[
'ko',
'Magento_Ui/js/form/form',
'underscore',
'Magento_Checkout/js/model/step-navigator'
],
function (
ko,
Component,
_,
stepNavigator
) {
'use strict';
/**
*
* mystep - is the name of the component's .html template,
* my_module - is the name of the your module directory.
*
*/
return Component.extend({
defaults: {
template: 'Ktpl_Ordercomment/ordercomment'
},
//add here your logic to display step,
isVisible: ko.observable(false),
initialize: function () {
this._super();
// register your step
stepNavigator.registerStep(
//step code will be used as step content id in the component template
'custom-checkout-form-container',
//step alias
'custom-checkout-form-container',
//step title value
'Order Comment',
//observable property with logic when display step or hide step
this.isVisible,
_.bind(this.navigate, this),
/**
* sort order value
* 'sort order value' < 10: step displays before shipping step;
* 10 < 'sort order value' < 20 : step displays between shipping and payment step
* 'sort order value' > 20 : step displays after payment step
*/
15
);
return this;
},
/**
* The navigate() method is responsible for navigation between checkout step
* during checkout. You can add custom logic, for example some conditions
* for switching to your custom step
*/
navigate: function () {
var self = this;
//getPaymentInformation().done(function () {
self.isVisible(true);
//});
},
navigateToNextStep: function () {
this.source.set('params.invalid', false);
this.source.trigger('customCheckoutForm.data.validate');
if (!this.source.get('params.invalid')) {
var formData = this.source.get('customCheckoutForm');
// do something with form data
console.dir(formData);
}
//stepNavigator.next();
}
});
}
);
app/code/Ktpl/Ordercomment/view/frontend/web/template/ordercomment.html
<li id="custom-checkout-form" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Order Comment'" data-role="title"></div>
<div id="checkout-step-title"
class="step-content"
data-role="content">
<form name="customCheckoutForm" id="customCheckoutForm" class="form" data-bind="submit: navigateToNextStep" ><!---->
<fieldset class="fieldset">
<legend data-bind="i18n: ' '"></legend>
<!-- ko foreach: getRegion('custom-checkout-form-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<button data-role="opc-continue" type="submit" class="button action continue primary">
<span><!-- ko i18n: 'Next'--><!-- /ko --></span>
</button>
</div>
</div>
</form>
</div>
</li>
this worked for me you can try this