define(\n [\n 'ko',\n 'uiComponent',\n 'underscore',\n 'Magento_Checkout\/js\/model\/quote',\n 'Magento_Checkout\/js\/model\/step-navigator',\n 'mage\/translate'\n ],\n function (\n ko,\n Component,\n _,\n quote,\n stepNavigator,\n $t\n ) {\n 'use strict';\n\n return Component.extend({\n defaults: {\n template: 'Webkul_CheckoutCustomization\/view\/billing-step'\n },\n\n \/\/add here your logic to display step,\n isVisible: ko.observable(quote.isVirtual()),\n isVirtual: quote.isVirtual(),\n\n \/**\n *\n * @returns {*}\n *\/\n initialize: function () {\n this._super();\n if (!quote.isVirtual()) { \/\/update condition if you need to enable for virtual products\n \/\/ register your step\n stepNavigator.registerStep(\n 'custom-billing-step',\n 'custom-billing-step',\n $t('Billing Address'),\n this.isVisible, _.bind(this.navigate, this),\n 11\n );\n }\n\n },\n\n \/**\n * The navigate() method is responsible for navigation between checkout step\n * during checkout. You can add custom logic, for example some conditions\n * for switching to your custom step\n *\/\n navigate: function () {\n\n },\n\n \/**\n * @returns void\n *\/\n navigateToNextStep: function () {\n stepNavigator.next();\n }\n });\n }\n);<\/pre>\n\n\n\n2. Now we need to create html template file (billing-step.html) defined in above file.<\/strong>
File: Webkul\/CheckoutCustomization<\/strong>\/view\/frontend\/web\/template\/billing-step.html<\/strong><\/p>\n\n\n\n<!--The 'step_code' value from the .js file should be used-->\n<li id="custom-billing-step" data-bind="fadeVisible: isVisible">\n <div class="step-title" data-bind="i18n: 'Billing Information'" data-role="title"><\/div>\n <div id="checkout-step-title" class="step-content" data-role="content">\n <form data-bind="submit: navigateToNextStep" novalidate="novalidate">\n <!-- ko foreach: getRegion('afterMethods') -->\n <!-- ko template: getTemplate() -->\n <!-- \/ko -->\n <!-- \/ko -->\n <div class="actions-toolbar">\n <div class="primary">\n <button data-role="opc-continue" type="submit" class="button action continue primary">\n <span>\n <!-- ko i18n: 'Next'-->\n <!-- \/ko -->\n <\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n<\/li><\/pre>\n\n\n\n3. Create Webkul\/CheckoutCustomization<\/strong>\/view\/frontend\/layout\/checkout_index_index.xml<\/strong><\/p>\n\n\n\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <head>\n <css src="Webkul_CheckoutCustomization::css\/style.css"\/>\n <\/head>\n <body>\n <referenceBlock name="checkout.root">\n <arguments>\n <argument name="jsLayout" xsi:type="array">\n <item name="components" xsi:type="array">\n <item name="checkout" xsi:type="array">\n <item name="children" xsi:type="array">\n <item name="steps" xsi:type="array">\n <item name="children" xsi:type="array">\n <!-- The new step you add -->\n <item name="custom-billing-step" xsi:type="array">\n <item name="component" xsi:type="string">uiComponent<\/item>\n <item name="sortOrder" xsi:type="string">2<\/item>\n <item name="children" xsi:type="array">\n <item name="custom-billing" xsi:type="array">\n <item name="component" xsi:type="string">Webkul_CheckoutCustomization\/js\/view\/billing-address-step<\/item>\n <item name="config" xsi:type="array">\n <item name="title" xsi:type="string" translate="true">Billing Address<\/item>\n <\/item>\n <item name="children" xsi:type="array">\n <item name="customer-email" xsi:type="array">\n <item name="component" xsi:type="string">Magento_Checkout\/js\/view\/form\/element\/email<\/item>\n <item name="displayArea" xsi:type="string">customer-email<\/item>\n <item name="tooltip" xsi:type="array">\n <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.<\/item>\n <\/item>\n <item name="children" xsi:type="array">\n <item name="before-login-form" xsi:type="array">\n <item name="component" xsi:type="string">uiComponent<\/item>\n <item name="displayArea" xsi:type="string">before-login-form<\/item>\n <item name="children" xsi:type="array">\n <!-- before login form fields -->\n <\/item>\n <\/item>\n <item name="additional-login-form-fields" xsi:type="array">\n <item name="component" xsi:type="string">uiComponent<\/item>\n <item name="displayArea" xsi:type="string">additional-login-form-fields<\/item>\n <item name="children" xsi:type="array">\n <!-- additional login form fields -->\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <!-- merge your payment methods here -->\n <item name="afterMethods" xsi:type="array">\n <item name="component" xsi:type="string">uiComponent<\/item>\n <item name="displayArea" xsi:type="string">afterMethods<\/item>\n <item name="children" xsi:type="array">\n \n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/argument>\n <\/arguments>\n <\/referenceBlock>\n <\/body>\n<\/page><\/pre>\n\n\n\nNow,<\/strong> add css file: Webkul\/CheckoutCustomization\/view\/frontend\/web\/css\/style.css<\/strong><\/p>\n\n\n\n@media (min-width: 768px), print {\n #custom-billing-step .actions-toolbar .primary {\n float: right;\n margin: 0;\n }\n}\n#custom-billing-step > .actions-toolbar > .primary .action.primary{\n line-height: 2.2rem;\n padding: 14px 17px;\n font-size: 1.8rem;\n}\n@media (min-width: 768px), print{\n #custom-billing-step .actions-toolbar .action-update {\n margin: 6px 20px 0 0;\n }\n}\n#custom-billing-step .checkout-billing-address{\n margin-bottom: 10px;\n}<\/pre>\n\n\n\n
4. Create Webkul\/CheckoutCustomization\/Block\/Checkout\/LayoutProcessor.php to insert Billing Address form in the xml.<\/strong><\/p>\n\n\n\n<?php\n\nnamespace Webkul\\CheckoutCustomization\\Block\\Checkout;\n\nuse Magento\\Checkout\\Helper\\Data;\nuse Magento\\Framework\\App\\ObjectManager;\n\nclass LayoutProcessor\n{\n \/**\n * @var \\Magento\\Customer\\Model\\AttributeMetadataDataProvider\n *\/\n private $attributeMetadataDataProvider;\n\n \/**\n * @var \\Magento\\Ui\\Component\\Form\\AttributeMapper\n *\/\n protected $attributeMapper;\n\n \/**\n * @var AttributeMerger\n *\/\n protected $merger;\n\n \/**\n * @var \\Magento\\Customer\\Model\\Options\n *\/\n private $options;\n\n \/**\n * @var Data\n *\/\n private $checkoutDataHelper;\n\n \/**\n * @param \\Magento\\Customer\\Model\\AttributeMetadataDataProvider $attributeMetadataDataProvider\n * @param \\Magento\\Ui\\Component\\Form\\AttributeMapper $attributeMapper\n * @param AttributeMerger $merger\n *\/\n public function __construct(\n \\Magento\\Customer\\Model\\AttributeMetadataDataProvider $attributeMetadataDataProvider,\n \\Magento\\Ui\\Component\\Form\\AttributeMapper $attributeMapper,\n \\Magento\\Checkout\\Block\\Checkout\\AttributeMerger $merger\n ) {\n $this->attributeMetadataDataProvider = $attributeMetadataDataProvider;\n $this->attributeMapper = $attributeMapper;\n $this->merger = $merger;\n }\n\n \/**\n * @deprecated\n * @return \\Magento\\Customer\\Model\\Options\n *\/\n private function getOptions()\n {\n if (!is_object($this->options)) {\n $this->options = ObjectManager::getInstance()->get(\\Magento\\Customer\\Model\\Options::class);\n }\n return $this->options;\n }\n\n \/**\n * @return array\n *\/\n private function getAddressAttributes()\n {\n \/** @var \\Magento\\Eav\\Api\\Data\\AttributeInterface[] $attributes *\/\n $attributes = $this->attributeMetadataDataProvider->loadAttributesCollection(\n 'customer_address',\n 'customer_register_address'\n );\n\n $elements = [];\n foreach ($attributes as $attribute) {\n $code = $attribute->getAttributeCode();\n if ($attribute->getIsUserDefined()) {\n continue;\n }\n $elements[$code] = $this->attributeMapper->map($attribute);\n if (isset($elements[$code]['label'])) {\n $label = $elements[$code]['label'];\n $elements[$code]['label'] = __($label);\n }\n }\n return $elements;\n }\n\n \/**\n * Convert elements(like prefix and suffix) from inputs to selects when necessary\n *\n * @param array $elements address attributes\n * @param array $attributesToConvert fields and their callbacks\n * @return array\n *\/\n private function convertElementsToSelect($elements, $attributesToConvert)\n {\n $codes = array_keys($attributesToConvert);\n foreach (array_keys($elements) as $code) {\n if (!in_array($code, $codes)) {\n continue;\n }\n $options = call_user_func($attributesToConvert[$code]);\n if (!is_array($options)) {\n continue;\n }\n $elements[$code]['dataType'] = 'select';\n $elements[$code]['formElement'] = 'select';\n\n foreach ($options as $key => $value) {\n $elements[$code]['options'][] = [\n 'value' => $key,\n 'label' => $value,\n ];\n }\n }\n\n return $elements;\n }\n\n \/**\n * Process js Layout of block\n *\n * @param array $jsLayout\n * @return array\n *\/\n public function process($jsLayout)\n {\n $attributesToConvert = [\n 'prefix' => [$this->getOptions(), 'getNamePrefixOptions'],\n 'suffix' => [$this->getOptions(), 'getNameSuffixOptions'],\n ];\n\n $elements = $this->getAddressAttributes();\n $elements = $this->convertElementsToSelect($elements, $attributesToConvert);\n \/\/ The following code is a workaround for custom address attributes\n if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']\n ['payment']['children']\n )) {\n $jsLayout['components']['checkout']['children']['steps']['children']['custom-billing-step']['children']\n ['custom-billing']['children'] = $this->processNewStepsChildrenComponents(\n $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']\n ['payment']['children'],\n $jsLayout['components']['checkout']['children']['steps']['children']['custom-billing-step']['children']\n ['custom-billing']['children'],\n $elements\n );\n\n }\n return $jsLayout;\n }\n\n \/**\n * Appends billing address form component to payment layout\n *\n * @param array $paymentLayout\n * @param array $elements\n *\n * @return array\n *\/\n private function processNewStepsChildrenComponents(\n array $paymentLayout,\n array $newStepsLayout,\n array $elements\n ) {\n if (!isset($paymentLayout['payments-list']['children'])) {\n $paymentLayout['payments-list']['children'] = [];\n }\n\n if (!isset($newStepsLayout['afterMethods']['children'])) {\n $newStepsLayout['afterMethods']['children'] = [];\n }\n\n $component['billing-address-form'] = $this->getBillingAddressComponent(\n 'shared',\n $elements\n );\n\n $newStepsLayout['afterMethods']['children'] = array_merge_recursive(\n $component,\n $newStepsLayout['afterMethods']['children']\n );\n\n return $newStepsLayout;\n }\n\n \n \/**\n * Gets billing address component details\n *\n * @param string $paymentCode\n * @param array $elements\n *\n * @return array\n *\/\n private function getBillingAddressComponent($paymentCode, $elements)\n {\n return [\n 'component' => 'Magento_Checkout\/js\/view\/billing-address',\n 'displayArea' => 'billing-address-form-' . $paymentCode,\n 'provider' => 'checkoutProvider',\n 'deps' => 'checkoutProvider',\n 'dataScopePrefix' => 'billingAddress' . $paymentCode,\n 'sortOrder' => 1,\n 'children' => [\n 'form-fields' => [\n 'component' => 'uiComponent',\n 'displayArea' => 'additional-fieldsets',\n 'children' => $this->merger->merge(\n $elements,\n 'checkoutProvider',\n 'billingAddress' . $paymentCode,\n [\n 'country_id' => [\n 'sortOrder' => 115,\n ],\n 'region' => [\n 'visible' => false,\n ],\n 'region_id' => [\n 'component' => 'Magento_Ui\/js\/form\/element\/region',\n 'config' => [\n 'template' => 'ui\/form\/field',\n 'elementTmpl' => 'ui\/form\/element\/select',\n 'customEntry' => 'billingAddress' . $paymentCode . '.region',\n ],\n 'validation' => [\n 'required-entry' => true,\n ],\n 'filterBy' => [\n 'target' => '${ $.provider }:${ $.parentScope }.country_id',\n 'field' => 'country_id',\n ],\n ],\n 'postcode' => [\n 'component' => 'Magento_Ui\/js\/form\/element\/post-code',\n 'validation' => [\n 'required-entry' => true,\n ],\n ],\n 'company' => [\n 'validation' => [\n 'min_text_length' => 0,\n ],\n ],\n 'fax' => [\n 'validation' => [\n 'min_text_length' => 0,\n ],\n ],\n 'telephone' => [\n 'config' => [\n 'tooltip' => [\n 'description' => __('For delivery questions.'),\n ],\n ],\n ],\n ]\n ),\n ],\n ],\n ];\n }\n}<\/pre>\n\n\n\nLets call our custom Webkul\/CheckoutCustomization\/Block\/Checkout\/LayoutProcessor Block.
5. create file# Webkul\/CheckoutCustomization\/etc\/frontend\/di.xml.<\/strong><\/p>\n\n\n\n<?xml version="1.0"?>\n<!--\n\/**\n * Webkul Software\n *\n * @category Webkul\n * @package Webkul_MarketplaceCustomization\n * @author Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n -->\n\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n <type name="Magento\\Checkout\\Block\\Onepage">\n <arguments>\n <argument name="layoutProcessors" xsi:type="array">\n <item name="customization_billing" xsi:type="object">Webkul\\CheckoutCustomization\\Block\\Checkout\\LayoutProcessor<\/item>\n <\/argument>\n <\/arguments>\n <\/type>\n<\/config><\/pre>\n\n\n\n6. Now overwrite https:\/\/github.com\/magento\/magento2\/blob\/2.1.9\/app\/code\/Magento\/Checkout\/view\/frontend\/web\/js\/view\/payment.js file to stop Payment Page Step before our Billing Address Step<\/strong><\/p>\n\n\n\nCreate File Webkul\/CheckoutCustomization<\/strong>\/view\/frontend\/requirejs-config.js<\/strong><\/p>\n\n\n\nvar config = {\n map: {\n '*': {\n "Magento_Checkout\/js\/view\/payment": "Webkul_CheckoutCustomization\/js\/view\/payment"\n }\n }\n};<\/pre>\n\n\n\nNow,<\/strong> create this file in our CheckoutCustomization Module.
#File: Webkul\/CheckoutCustomization\/view\/frontend\/web\/js\/view\/payment.js<\/strong><\/p>\n\n\n\n\/*jshint browser:true jquery:true*\/\n\/*global alert*\/\ndefine(\n [\n 'jquery',\n "underscore",\n 'uiComponent',\n 'ko',\n 'Magento_Checkout\/js\/model\/quote',\n 'Magento_Checkout\/js\/model\/step-navigator',\n 'Magento_Checkout\/js\/model\/payment-service',\n 'Magento_Checkout\/js\/model\/payment\/method-converter',\n 'Magento_Checkout\/js\/action\/get-payment-information',\n 'Magento_Checkout\/js\/model\/checkout-data-resolver',\n 'mage\/translate'\n ],\n function (\n $,\n _,\n Component,\n ko,\n quote,\n stepNavigator,\n paymentService,\n methodConverter,\n getPaymentInformation,\n checkoutDataResolver,\n $t\n ) {\n 'use strict';\n\n \/** Set payment methods to collection *\/\n paymentService.setPaymentMethods(methodConverter(window.checkoutConfig.paymentMethods));\n\n return Component.extend({\n defaults: {\n template: 'Magento_Checkout\/payment',\n activeMethod: ''\n },\n isVisible: ko.observable(false),\n quoteIsVirtual: quote.isVirtual(),\n isPaymentMethodsAvailable: ko.computed(function () {\n return paymentService.getAvailablePaymentMethods().length > 0;\n }),\n\n initialize: function () {\n this._super();\n checkoutDataResolver.resolvePaymentMethod();\n stepNavigator.registerStep(\n 'payment',\n null,\n $t('Review & Payments'),\n this.isVisible,\n _.bind(this.navigate, this),\n 20\n );\n return this;\n },\n\n navigate: function () {\n var self = this;\n getPaymentInformation().done(function () {\n self.isVisible(true);\n });\n },\n\n getFormKey: function () {\n return window.checkoutConfig.formKey;\n }\n });\n }\n);<\/pre>\n\n\n\n7. Finally copy https:\/\/github.com\/magento\/magento2\/tree\/2.1.9\/app\/code\/Magento\/Checkout\/view\/frontend\/web\/js\/view\/payment directory and place in our Billing Step Module
Webkul\/CheckoutCustomization<\/strong>\/view\/frontend\/web\/js\/view<\/strong><\/p>\n\n\n\nNote:<\/strong> Here, we have copied the js files of payment directory from Magento 2.1.9. So, you can manage this as per your magento version.
<\/strong><\/p>\n\n\n\nNow Clear the cache.
It will look like this:
![\"Checkout\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Checkout.png\")
<\/p>\n\n\n\n
Should you need technical help, feel free to email us at support@webkul.com<\/a>. Additionally, discover various options to enhance your store’s capabilities by visiting the Adobe Commerce modules<\/a> page.<\/p>\n\n\n\n<\/ol>\n\n\n\nIf you need specialized advice or want to develop unique custom features, Hire Adobe Commerce Developers<\/a> for your needs.<\/p>\n\n\n\nThanks<\/p>\n","protected":false},"excerpt":{"rendered":"