Koala UI

Payment Form

Pro

A complete card-checkout block. The number, expiry and CVC are masked as you type, the card brand is detected live, and the billing country shows circular flags. Accept promo codes to roll the total.

Payment details

Enter your card to complete the purchase. Your details are encrypted end to end.

Total due$49.00

Try KOALA20 for 20% off, or WELCOME10 for $10 off.

Payments are secure and encrypted

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add payment-form

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

API reference#

PaymentForm

A card checkout built from Field, Input and CountrySelect. Masking and brand detection are presentation only: never store an unmasked card number. Forwards native <div> props; accepts className, merged last.

PropTypeDefaultDescription
onSubmit(data: PaymentFormData) => void | Promise<void>-Called with { cardNumber, expiry, cvc, name, country, promoCode? }, masked as shown. Return a promise to hold the spinner until it settles.
amountstring-The display total, e.g. "$49.00". Shows the summary row and labels the Pay button.
promoCodesRecord<string, PaymentPromoCode>-Accepted codes, matched case-insensitively, each { percentOff?, amountOff?, label? }. Reveals the promo row; needs a parseable amount.
promoHintReact.ReactNode-A caption under the promo field, e.g. "Try KOALA20".
defaultCountrystring"US"The billing country preselected, as ISO2.
titleReact.ReactNode"Payment details"The heading above the form.
descriptionReact.ReactNode"Enter your card to complete…"The line under the heading.
density"comfortable" | "compact"-Spacing, 24 or 16px. Inherits the nearest DensityProvider (compact with none).

FAQ#

No. The masking and live brand detection are presentation only, and PaymentForm never touches a network. Wire your `onSubmit` handler to a provider like Stripe, and never store the unmasked card number yourself.