Consumer demo
Choose a checkout scenario
AndDone.js puts the power in your hands. Browse below to see different ways AndDone.js to make your checkout experience faster, more secure, and more flexible. Each scenario uses the same AndDone.js fragments, but in different ways to suit your needs.
Grouped
Card Grouped checkout
Uses card-payment and address-full multi-input fragments — fewer iframes,
consolidated fields.
Modular
Card Modular checkout
Uses individual card, cvv, expiration, and six address fragments —
maximum per-field layout flexibility.
ACH Grouped
ACH grouped checkout
Uses ach-payment and address-full multi-input fragments — consolidated ACH bank
payment fields in fewer iframes.
ACH Modular
ACH modular checkout
Uses individual account-holder-name, routing-number, account-number,
and more — maximum per-field layout flexibility for ACH payments.
ACH & Card Grouped
ACH & Card grouped checkout
Uses payment-method-selector, ach-payment, card-payment,
contact-information, and address-full fragments — choose your payment method at
checkout.
ACH & Card Modular
ACH & Card modular checkout
Uses individual card, cvv, account-holder-name,
routing-number, and more — a custom UI calls updatePaymentMethod() to switch
between ACH and card at the fragment level.
Full Card Checkout
Full card checkout
A single full-card-checkout fragment contains card payment, billing address, and contact
information — including an embedded submit button for the simplest card checkout integration.
Full ACH Checkout
Full ACH checkout
A single full-ach-checkout fragment contains ACH bank payment, billing address, and contact
information — including an embedded submit button for the simplest ACH checkout integration.
Full Multi-Channel Checkout
Full multi-channel checkout
A single full-multi-channel-checkout fragment supports card or ACH payment with an embedded
payment method selector — all fields and submit in one fragment.