Conditional Checkout Fields in Magento 2 — Show Field A Only When B Is True

1. Rule one — Company VAT field only when Account type is Business

The merchant is a B2B-friendly storefront. The checkout has a radio: Personal · Business. The VAT input must vanish for personal accounts and become required for business accounts. The default account type comes from the customer record on logged-in checkout, or defaults to Personal on guest checkout.

Database column on quote

<!-- app/code/Panth/ConditionalCheckout/etc/db_schema.xml -->
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
    <table name="quote">
        <column xsi:type="varchar" name="account_type" length="16" nullable="true" default="personal"/>
        <column xsi:type="varchar" name="company_vat" length="32" nullable="true"/>
    </table>
    <table name="sales_order">
        <column xsi:type="varchar" name="account_type" length="16" nullable="true"/>
        <column xsi:type="varchar" name="company_vat" length="32" nullable="true"/>
    </table>
</schema>

Luma — Knockout subscribe

The Luma checkout exposes an observable for every form value through the checkoutData singleton. To gate visibility on account type, subscribe to the source and toggle a second observable.

// view/frontend/web/js/view/company-vat.js
define([
    'uiComponent',
    'ko',
    'Magento_Checkout/js/checkout-data',
    'mage/translate'
], function (Component, ko, checkoutData) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Panth_ConditionalCheckout/company-vat'
        },
        accountType: ko.observable(checkoutData.getAccountType() || 'personal'),
        companyVat: ko.observable(''),
        isVisible: ko.observable(false),

        initialize: function () {
            this._super();
            // Subscribe to the source observable.
            this.accountType.subscribe(function (next) {
                this.isVisible(next === 'business');
                if (next !== 'business') {
                    this.companyVat('');
                }
            }.bind(this));
            // Seed initial visibility from cached checkoutData.
            this.isVisible(this.accountType() === 'business');
            return this;
        },

        validate: function () {
            if (this.isVisible() && !this.companyVat()) {
                return false;
            }
            return true;
        }
    });
});

The trap that costs three hours on every fresh build — checkoutData.getAccountType() only exists once you register it via a checkout-data mixin. Without the mixin the observable starts undefined and the subscribe never fires on initial load.

Hyvä — Alpine x-show plus Magewire $reactive

On Hyvä Checkout, the visibility flip is pure Alpine. The validation and persistence are Magewire. Two files, clean separation.

<?php
// app/code/Panth/ConditionalCheckout/Magewire/Checkout/CompanyVat.php
namespace Panth\ConditionalCheckout\Magewire\Checkout;

use Magento\Checkout\Model\Session as CheckoutSession;
use Magewirephp\Magewire\Component;

class CompanyVat extends Component
{
    public string $accountType = 'personal';
    public ?string $companyVat = null;

    public array $rules = [
        'companyVat' => 'required_if:accountType,business|max:32'
    ];

    public function __construct(private CheckoutSession $checkoutSession) {}

    public function mount(): void
    {
        $quote = $this->checkoutSession->getQuote();
        $this->accountType = $quote->getAccountType() ?: 'personal';
        $this->companyVat = $quote->getCompanyVat();
    }

    public function updatedAccountType(string $value): void
    {
        // $reactive — when accountType changes, persist and clear VAT if Personal.
        $quote = $this->checkoutSession->getQuote();
        $quote->setAccountType($value);
        if ($value !== 'business') {
            $quote->setCompanyVat(null);
            $this->companyVat = null;
        }
        $quote->save();
    }

    public function updatedCompanyVat(?string $value): void
    {
        $this->checkoutSession->getQuote()->setCompanyVat($value)->save();
    }
}

<!-- view/frontend/templates/magewire/checkout/company-vat.phtml -->
<div wire:id="company-vat" x-data="{ accountType: @entangle('accountType').defer }" class="mt-4">
    <fieldset class="flex gap-4">
        <label class="inline-flex items-center">
            <input type="radio" value="personal" wire:model.live="accountType" />
            <span class="ml-2">Personal</span>
        </label>
        <label class="inline-flex items-center">
            <input type="radio" value="business" wire:model.live="accountType" />
            <span class="ml-2">Business</span>
        </label>
    </fieldset>

    <div x-show="accountType === 'business'" x-transition class="mt-3">
        <label for="company-vat-input" class="block text-sm font-medium">Company VAT number</label>
        <input type="text"
               id="company-vat-input"
               wire:model.live.debounce.500ms="companyVat"
               class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2" />
        <p wire:loading wire:target="companyVat" class="text-xs text-gray-500 mt-1">Saving…</p>
    </div>
</div>

wire:model.live on the radio round-trips to PHP on every click — the right default for keeping quote state in sync across abandoned tabs. The text input adds .debounce.500ms so keystrokes do not POST.

2. Rule two — Customs declaration only when shipping country is not the merchant's home country

The merchant ships from Belgium. EU customers do not need a customs declaration. Anywhere outside the EU does. The trigger is shipping_address.country_id resolved against a server-known merchant country — never hardcode the country in JavaScript or you cannot resell the module.

The REST endpoint that exposes merchant country

<!-- etc/webapi.xml -->
<route url="/V1/panth-checkout/merchant-country" method="GET">
    <service class="Panth\ConditionalCheckout\Api\MerchantCountryInterface" method="get"/>
    <resources><resource ref="anonymous"/></resources>
</route>

The resolver reads general/country/default from ScopeConfigInterface at SCOPE_STORE — one line of PHP behind the interface.

Luma — subscribe on shipping country

// view/frontend/web/js/view/customs-declaration.js
define([
    'uiComponent',
    'ko',
    'mage/storage',
    'Magento_Checkout/js/model/quote'
], function (Component, ko, storage, quote) {
    'use strict';
    return Component.extend({
        defaults: { template: 'Panth_ConditionalCheckout/customs-declaration' },
        customsText: ko.observable(''),
        merchantCountry: ko.observable(null),
        isVisible: ko.observable(false),

        initialize: function () {
            this._super();
            // Pull the merchant country once per session.
            storage.get('/rest/V1/panth-checkout/merchant-country').done(function (resp) {
                this.merchantCountry(resp);
                this.recompute();
            }.bind(this));

            // Quote.shippingAddress() is an observable. Subscribe to it.
            quote.shippingAddress.subscribe(this.recompute.bind(this));
            return this;
        },

        recompute: function () {
            var addr = quote.shippingAddress();
            var customerCountry = addr && addr.countryId;
            if (!customerCountry || !this.merchantCountry()) {
                this.isVisible(false);
                return;
            }
            this.isVisible(customerCountry !== this.merchantCountry());
        }
    });
});

Hyvä — Magewire $reactive with merchant-country resolved in PHP

<?php
// Magewire/Checkout/CustomsDeclaration.php
namespace Panth\ConditionalCheckout\Magewire\Checkout;

use Magento\Checkout\Model\Session as CheckoutSession;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Store\Model\ScopeInterface;
use Magewirephp\Magewire\Component;

class CustomsDeclaration extends Component
{
    public ?string $customsText = null;
    public ?string $shippingCountry = null;
    public string $merchantCountry = '';

    public function __construct(
        private CheckoutSession $checkoutSession,
        private ScopeConfigInterface $config
    ) {}

    public function mount(): void
    {
        $quote = $this->checkoutSession->getQuote();
        $address = $quote->getShippingAddress();
        $this->shippingCountry = $address ? $address->getCountryId() : null;
        $this->merchantCountry = (string)$this->config->getValue(
            'general/country/default',
            ScopeInterface::SCOPE_STORE
        );
        $this->customsText = $quote->getCustomsDeclaration();
    }

    public function getIsVisibleProperty(): bool
    {
        return $this->shippingCountry !== null
            && $this->shippingCountry !== $this->merchantCountry;
    }

    public function updatedCustomsText(?string $value): void
    {
        $this->checkoutSession->getQuote()
            ->setCustomsDeclaration($value)
            ->save();
    }
}

<!-- view/frontend/templates/magewire/checkout/customs-declaration.phtml -->
<div wire:id="customs-declaration">
    <?php if ($this->getIsVisibleProperty()): ?>
        <label class="block text-sm font-medium">Customs declaration</label>
        <textarea wire:model.live.debounce.500ms="customsText"
                  rows="3"
                  class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
                  placeholder="Describe the contents — e.g. apparel, books, gifts."></textarea>
        <p class="text-xs text-gray-500 mt-1">Required for shipments outside <?= $block->escapeHtml($this->merchantCountry) ?>.</p>
    <?php endif; ?>
</div>

The Magewire component re-renders on every shipping-country update because country is part of shared Hyvä Checkout state — no manual subscribe needed.

3. Rule three — Delivery instructions only when a specific SKU is in the cart

The merchant sells one fragile product line (SKU prefix FRG-). When any FRG- item is in the cart, the customer must provide delivery instructions. This rule is server-side authoritative — the cart contents live on the quote, not in the customer's browser, so the trigger comes from PHP.

Server-side guard — read quote items in PHP

<?php
// Magewire/Checkout/DeliveryInstructions.php
namespace Panth\ConditionalCheckout\Magewire\Checkout;

use Magento\Checkout\Model\Session as CheckoutSession;
use Magewirephp\Magewire\Component;

class DeliveryInstructions extends Component
{
    public ?string $deliveryInstructions = null;
    public bool $hasFragileItem = false;

    public array $rules = [
        'deliveryInstructions' => 'required_if:hasFragileItem,1|max:500'
    ];

    public function __construct(private CheckoutSession $checkoutSession) {}

    public function mount(): void
    {
        $quote = $this->checkoutSession->getQuote();
        $this->deliveryInstructions = $quote->getDeliveryInstructions();
        $this->hasFragileItem = $this->hasFragileItemInCart($quote);
    }

    public function refresh(): void
    {
        // Called via emit('cart-updated') from other Magewire components.
        $quote = $this->checkoutSession->getQuote();
        $this->hasFragileItem = $this->hasFragileItemInCart($quote);
        if (!$this->hasFragileItem) {
            $this->deliveryInstructions = null;
            $quote->setDeliveryInstructions(null)->save();
        }
    }

    private function hasFragileItemInCart($quote): bool
    {
        foreach ($quote->getAllItems() as $item) {
            if (str_starts_with((string)$item->getSku(), 'FRG-')) {
                return true;
            }
        }
        return false;
    }

    public function updatedDeliveryInstructions(?string $value): void
    {
        $this->checkoutSession->getQuote()
            ->setDeliveryInstructions($value)
            ->save();
    }
}

Alpine prop passed from PHP

<!-- view/frontend/templates/magewire/checkout/delivery-instructions.phtml -->
<div wire:id="delivery-instructions"
     x-data="{ hasFragile: @js($this->hasFragileItem) }"
     x-show="hasFragile"
     x-transition
     class="mt-4">
    <label class="block text-sm font-medium">Delivery instructions</label>
    <textarea wire:model.live.debounce.700ms="deliveryInstructions"
              rows="3"
              class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
              placeholder="Where should the courier leave the package if you are not home?"></textarea>
    <p class="text-xs text-gray-500 mt-1">Required because your cart contains fragile items.</p>
</div>

Luma — Knockout against the cart-items observable

On Luma the visibility comes from a ko.computed bound to quote.totals().items, scanning for the FRG- SKU prefix. Same backend guard runs on the submit plugin below.