Hyvä Checkout · 2026-06-12 · 5 min
The clean way to add a custom field to Hyvä Checkout
Magewire components make checkout fields dramatically simpler than Luma's KnockoutJS — once you know the pattern. A delivery-date example.
In Luma, adding a checkout field meant a LayoutProcessor plugin, a KnockoutJS component, a template override and a prayer. In Hyvä Checkout it is one Magewire component and one Blade-like template. The pattern below adds a delivery-date field that persists to the order.
The Magewire component
class DeliveryDate extends \Magewirephp\Magewire\Component
{
public ?string $deliveryDate = null;
public function updatedDeliveryDate(string $value): string
{
$this->validate(['deliveryDate' => 'date|after:today']);
$quote = $this->sessionCheckout->getQuote();
$quote->setData('delivery_date', $value);
$this->quoteRepository->save($quote);
return $value;
}
}Server-side validation, automatic re-render, no JavaScript written by you. The updatedX magic method fires on every change of the bound property.
Wiring it into the layout
Declare the component in hyva_checkout_components.xml, point it at a template with wire:model="deliveryDate" on the input, and add a fieldset entry to place it in the shipping step. Persist quote-to-order with a single fieldset.xml entry — the same mechanism Magento has used since 2.0.
Why this matters beyond one field
The Magewire pattern scales to conditional fields, fee calculators and address validators with the same shape: property, validation rule, quote write. Checkout customization stops being the scariest line in the estimate — which is exactly what checkout-heavy B2B stores need to hear before committing to Hyvä.