By Default, In Magento2 Billing address is displayed with the Payment method, and the second option to display billing address is on the Payment page.
If you have a custom requirement like, Display the Billing address before all the payment methods you need to do customization for that.
Create a di.xml file at the location,
app/code/Magemonkeys/BillingAddressBeforePayment/etc/frontend/di.xml
1 2 3 4 5 6 7 8 9 | <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <!-- Set Billing address above the payment method plugin --> <type name="Magento\Checkout\Block\Checkout\LayoutProcessor"> <plugin name="move_billing_address_above_payment_method" type="Magemonkeys\BillingAddressBeforePayment\Plugin\Block\Checkout\LayoutProcessor"/> </type> </config> |
Based on the XML file, Create a Plugin Class, app/code/Magemonkeys/BillingAddressBeforePayment/Plugin/Block/Checkout/LayoutProcessor.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?php declare(strict_types=1); namespace Magemonkeys\BillingAddressBeforePayment\Plugin\Block\Checkout; use Magento\Checkout\Block\Checkout\LayoutProcessor as CheckoutLayoutProcessor; /** * Move Billing address to top */ class LayoutProcessor { /** * @param CheckoutLayoutProcessor $subject * @param array $jsLayout * @return array */ public function afterProcess( CheckoutLayoutProcessor $subject, array $jsLayout ): array { $paymentLayout = $jsLayout['components']['checkout']['children']['steps'] ['children']['billing-step']['children']['payment']['children']; if (isset($paymentLayout['afterMethods']['children']['billing-address-form'])) { $jsLayout['components']['checkout']['children']['steps'] ['children']['billing-step']['children']['payment']['children'] ['beforeMethods']['children']['billing-address-form'] = $paymentLayout['afterMethods']['children']['billing-address-form']; unset($jsLayout['components']['checkout']['children']['steps'] ['children']['billing-step']['children']['payment'] ['children']['afterMethods']['children']['billing-address-form']); } return $jsLayout; } } |
before method is used to display content before the payment methods.
Clear the cache and go to the checkout page to see the billing address. It will be at the top of the payment page.
