How to Move Billing Address Before the Payment Method in checkout Magento 2?

By Default, the Billing address will be display with the Payment method, and the second OOTB option to display payment method is on the Payment page.

The payment page Options used to display the Billing address after the payment method. OOTB Billing address Display Options

You have a custom requirement like, Display the Billing address before all the payment methods you need to do customization for that.

In Magento, the Checkout page is rendered using JS Layout, You need to create a Plugin for the afterProcess to change the position of the billing address.

Class Magento\Checkout\Block\Checkout\LayoutProcessor used to render all the checkout stuff and we have to use process() method from the class.

create a di.xml file at the location,
app/code/Jesadiya/BillingAddressBeforePayment/etc/frontend/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">
    <!-- Set Billing address above the payment method plugin -->
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="move_billing_address_above_payment_method"
                type="Jesadiya\BillingAddressBeforePayment\Plugin\Block\Checkout\LayoutProcessor"/>
    </type>
</config>

Based on the XML file, Create a Plugin Class, app/code/Jesadiya/BillingAddressBeforePayment/Plugin/Block/Checkout/LayoutProcessor.php

<?php declare(strict_types=1);

namespace Jesadiya\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;
    }
}

In this plugin, We have set the js layout of the Billing address afterMethods with the beforeMethods.

before methods section will be used to display content before the payment methods.

Clear the cache and go to the checkout page to see the billing address will be top of the payment page.