Loading the live preview…

More like this

Smart Checkout

The card beside the form is drawn as the visitor types, name first: digits drop into place, the network is recognised from its first digits (Visa, Mastercard, American Express, Discover and Meeza) and its colours flow in, a ring of light follows the field being edited, and the card turns over for the security code. Fields format themselves (the card number grouped with the caret kept in place, the expiry as MM / YY), check the Luhn digit and the date, and hand on to the next field when complete. Card, wallet (a scan-to-pay code or a request by phone) and cash on delivery each deal their own face onto the card with a quarter turn. Paying plays the whole story: processing, a declined card, a 3-D Secure code in six boxes that advance and accept a paste, then approval with confetti and a receipt that prints out of its slot. Light and dark themes, test cards that type themselves in, right-to-left layouts, and one column on phones. No prices on the page (the visitor has seen the total in the cart). Connect it with one function, onPay, to Paymob, Stripe, Fawry or any gateway: return approved, declined, a code to verify or a bank redirect, and the page plays the matching story. Choose the methods, every word (a complete Arabic set is included, with numbers that stay left to right) and the phone format. Card data stays put: nothing is sent or stored by the component, spell-check is off on every field, the security code shows only while typed and the card details are wiped once paid. Renders on the server as well as in the browser.

Forms & checkout
section
dark

Copy promptDownload source code

Get the prompt and source code

Buy this componentThis component and every future version of it.$19
Get all accessBest valueEvery component in the catalog, including new ones.$149

One-time payment · lifetime access

Checkout opens soon. Until then, every live preview is yours to try.

Details+

Identifier: smart-checkout
Version: 1.0.0
License: Commercial license

Read the license