Payment Processing Stepper Block for Svelte

The paying state turns off all four step buttons, Back and the primary, marks each panel aria-busy, makes the fields read-only and lets only the one-shot timer move on. Pressing Enter does nothing while it waits. When the timer ends the Receipt opens and focus goes to its heading, because a busy button drops focus.

No. It checks a card in the tab's memory (brand by the first digits, the Luhn sum, the expiry against a fixed month, the CVC length) so you can see the pattern. A real page never lets card digits reach its own code and uses the fields your payment provider hosts. The test card 4242 4242 4242 4242 passes with any future expiry; "Use the test card" fills it.

In integer cents: the deposit is DEPOSIT (7,500) and each method adds its own fee in cents. usd is the only place cents become dollars, so the method cards, the confirmation and the receipt always agree.

Everything. The 800 ms wait is a single timer and no payment is taken: the receipt says so. After paying, the card digits and bank details are wiped and only the method and its last digits are kept. To make it real, call your provider from the submit handler on Confirm, keep the busy state until it answers, and open the Receipt or an error from its result.

The bar is hidden and the foot line carries the whole message, so nothing depends on the animation. The wait is the same length.

The step line is one tab stop on the current step. Arrow keys move between reachable steps; Enter inside a field is Next. After a move, focus goes to the new step's heading, and a polite line in the foot says what is happening.