I was created module for add step in checkout. In here i want to add one dynamic form using form fields from my database.

My Table structure

--Field Id --Field Name --Field Type

My checkout_index_index.xml file

    <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="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">Custommodule_Giftmessage/js/view/checkout/my-checkout-view</item>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">


My form_view.phtml file

<div id="block-customer-list" data-bind="scope:'customer-list'" class="block">

  <!-- ko template: getTemplate() --><!-- /ko -->

  <script type="text/x-magento-init">


          "#block-customer-list": {

              "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>




My form_view.html file

<li id="step_code" data-bind="fadeVisible: isVisible">
<div id="checkout-step-title" class="step-content" data-role="content">


My my-checkout-view.js file

function (
) {
    'use strict';
    * mystep - is the name of the component's .html template, 
    * <Vendor>_<Module>  - is the name of the your module directory.
    var listFormFields = ko.observableArray([]);

    return Component.extend({           
        defaults: {
            template: 'Custommodule_Giftmessage/checkout/form_view'

        //add here your logic to display step,
        isVisible: ko.observable(true),

        * @returns {*}
        initialize: function () {
            // register your step
                //step code will be used as step content id in the component template
                //step alias
                //step title value
                'Gift Message',
                //observable property with logic when display step or hide step

                _.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

            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 () {


        * @returns void
        navigateToNextStep: function () {


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.