Billing Address Toggle
A working switch keeps billing matched to shipping or reveals the full billing form, with the decline warning that explains why banks care.
A working switch keeps billing matched to shipping or reveals the full billing form, with the decline warning that explains why banks care.
Search blocks by description or jump to a page.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the default matched state with the form one switch away. Other billing configurations:
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.