Koala UICheckout
Complete payment and checkout screens, ready to drop in. Two finished layouts: a SaaS billing page and an ecommerce one-page checkout, each pairing a form with the order summary that never disappears on mobile.
Built from#
The screen is a composition of shipped components, never re-styled inline. The totals read-out is the OrderSummary in its flush plain variant; the billing fields pair Field with Input and a CountrySelect; the billing-type toggle is a pair of RadioCards; and the discount field is an InputGroup. The two-column shell is the same SplitLayout the auth screens use, here with two content panes instead of a media pane.
Responsive#
Each preview renders inside an iframe, so the screen's own breakpoints respond to the frame width, not the browser. Below lg the two panes stack into a single column, the form first and the summary beneath it (kept visible, not dropped like an auth photo pane). Drag the handle or pick Mobile to see it recompose, and switch the site theme top-right to check it in dark or moonlight.