Magento2 - Reposition billing address form to customer-email region

Question

I'm trying to reposition the billing-address-form below the authentication form. But I can't figure it out.

Preferred result:

What I have done so far

I have found this question, and made a module for it.

<vendor>/<module>/Block/Checkout/LayoutProcessor.php

namespace <vendor>\<module>\Checkout\Block\Checkout; //<-- I think the first Checkout needs to be removed.

use Magento\Checkout\Block\Checkout\LayoutProcessor as LayoutProcessor;

class LayoutProcessorPlugin
{
    public function afterProcess(LayoutProcessor $layoutProcessor, callable $proceed): float
    {
        $jsLayout = $proceed();

        // get billing address form at billing step
        $billingAddressForm = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form'];

        // move address form to shipping step
        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['billing-address-form'] = $billingAddressForm;

        // remove form from billing step
        unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form']);

        return $jsLayout;
    }
}

<vendor>/<module>/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">
    <preference for="Magento\Checkout\Block\Checkout\LayoutProcessor" type="<vendor>\<module>\Block\Checkout\LayoutProcessor" />
</config>

But after the compilation I get the following error on the checkout page:

Cannot declare class <vendor>\<module>\Block\Checkout\LayoutProcessorPlugin, because the name is already in use in /app/code/<vendor>/<module>/Block/Checkout/LayoutProcessor.php on line 6

Answer 1

First, it looks like you've literally used "<vendor>" and "<module>" in your namespace and as directory names. These are meant as parameters, placeholders to be filled with your own values. For example "Frank\Checkout" instead of "<vendor>\<module>". The same applies for the directory names.

Second, there is a configuration setting that's used to point where the billing address form is rendered at the path checkout/options/display_billing_address_on. It can be found in the admin Stores > Configuration > Sales > Checkout > Checkout Options: Set Display Billing Address On Display Billing Address On to Payment Page.

This will normally render billing address below the payment-method selection, but the Plugin you've made for the LayoutProcessor will removed it from below the payment-method selection and add it on the shipping step.

Note: I don't think you'd want it to be moved to the shipping step, because you're selling virtual products - they don't get shipped so the shipping step is not shown on the checkout. You may way to move it somewhere else by changing the afterProcess method in the plugin to:

public function afterProcess(LayoutProcessor $subject, $jsLayout)
{
    // get billing address form at billing step
    $billingAddressForm = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form'];

    // move address form to before the payment methods
    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['beforeMethods']['children']['billing-address-form'] = $billingAddressForm;

    // remove form from billing step
    unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form']);

    return $jsLayout;
}