magento2: How to remove zipcode from billing address in checkout process

Question

I want to remove zipcode and Street Address field from billing address from checkout process.

I am able to remove the above field from shipping address successfully using this article

Please help me how to remove these field from billing address.

Answer 1

I have a solution for your issue. You need to setup the checkout option in the configuration so that billing address is on payment page. There is a possibility to work it out otherwise, however, my solution only caters for this specific scenario.

Once the above is setup,

you may create a plugin, see below:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="layout_checkout_process" type="Mbs\RemoveCheckoutField\Plugin\CheckoutLayoutProcess" />
    </type>
</config>

and the plugin needs to remove the fields (do bear in mind, the backend may need further changes as streets fields are mandatory in billing details..)

namespace Mbs\RemoveCheckoutField\Plugin;

use Magento\Checkout\Block\Checkout\LayoutProcessor;
use Magento\Framework\App\Config\ScopeConfigInterface;

class CheckoutLayoutProcess
{
    /**
     * @var ScopeConfigInterface
     */
    private $scopeConfig;

    public function __construct(
        ScopeConfigInterface $scopeConfig
    ) {
        $this->scopeConfig = $scopeConfig;
    }

    public function afterProcess(LayoutProcessor $subject, $jsLayout)
    {
        if ($this->isBillingOnPaymentPage()) {
            unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']
                ['children']['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['postcode']);

            unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']
                ['children']['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']['children']['street']);
        }

        return $jsLayout;
    }

    private function isBillingOnPaymentPage()
    {
        return $this->scopeConfig->getValue('checkout/options/display_billing_address_on');
    }
}