About this block

Billing Address Toggle is step 3 of 3 in the checkout, a working Switch from ui/switch that keeps the billing address matched to shipping or reveals the full billing form. Defaulted on, it lists the shipping lines as the billing address; flipped off, it swaps in a Full name, Street, City, Postcode, and Country grid built on ui/input and ui/label. A CreditCard row names the card on file, Visa ending 4242, and a helper line under the street field asks for the address exactly as the bank has it.

The matches boolean is the only state, toggling between the read only shipping lines and the input grid. The footer explains why the field exists at all, that banks check this address against the card and a mismatch is the second most common reason for a decline, used for that check and nothing else.

When to use

Reach for this block at the payment stage wherever a card is charged, especially for markets where address verification drives approval. The card on file row should reflect the real selected method so the toggle sits with its context rather than floating on its own.

A natural flow around it on an Ecommerce Pro page:

Before

• Payment form

After

• Order review step
• Order confirmation page

What you can display

One strong use is the default matched state with the form one switch away. Other billing configurations:

• Saved billing addresses. The off state opening a short list of stored addresses before the blank form.
• Company billing. A VAT or tax id field added to the grid for business buyers.
• Separate billing email. An email field for the receipt when it differs from the account on file.

Tip: stating that a billing mismatch is a top reason for declines turns the switch from friction into the buyer's own safeguard against a failed charge.