Commerce

Payment

PaymentStateIcon

Shows a payment moving through processing and completion.

States

4 total

Payment

Ready to payment.

Payment

"idle"

Ready to payment.

Processing payment

"processing"animated

Processing payment is in progress.

Payment complete

"success"

Payment complete successfully.

Payment failed

"error"

The payment action failed.

Implementation

Pass your current state.

The component stays presentational. Your application remains in control of async work and business logic. The state prop is a TypeScript string literal union — pass an invalid state and you'll get a type error at build time.

Source: Lucide
License: ISC
States: idle · processing · success · error

example.tsx

import { PaymentStateIcon } from "@stateglyph/react";
<PaymentStateIcon state="idle" decorative />