Checkout · fetaUI

Installation

Terminal· bash

1 npx shadcn add @fetaui/checkout

A real form with fieldsets, legends and autocomplete on card fields. Use test card fills demo values.
Plan options are native radios.
The form sets aria-busy while paying.
This component only shows fields. Send card data to your payment provider, never your own server.

The total tweens over 240 ms as options change.
Pay holds its width and shows Processing payment.
The panel fades in and rises 8 px over 400 ms, once.
Rows fade in over 240 ms with a 40 ms stagger.
Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
With reduced motion, the panel appears in place and values swap at once.

Totals are plain arithmetic in render, with no effects.
Prices tween by writing text directly, so a change of plan or seats does not render per frame.

Give your coding assistant the Markdown reference instead of screenshots.

Import Checkout from @/components/fetaui/checkout. It composes Tabs, Radio, Checkbox, Field, Input, Select and Button with Panel, Stepper and Tween from data-kit.
onPay receives the total and the order: plan, cycle, seats, add-ons, subtotal, tax, billing and card. Pay stays loading until it settles, and every field locks while paying and after a success. A second submit is ignored, and a rejection shows failedMessage under Pay.
It charges nothing. Replace the card fields with your payment provider's before going live, and never send card data to your own server.
Wire onWalletPay, onBankPay and onAddCoupon. defaultBilling replaces the sample billing values, testCard={false} hides Use test card and note replaces the no card is charged line. Every line rounds to cents, so the summary adds up to Due today. The demo's onPay waits 1.6 s.