Payment Button

Pro

Wallet and card pay buttons with the official marks in their own colours. While paying, the label turns into loading dots and then a check, and the button never changes size.

Preview

Installation

npx @lumioui/cli add pro/payment-button

Usage

import { PaymentButton } from "@/components/ui/payment-button/payment-button";
<PaymentButton />

Examples

Express checkout

Express checkout at the top of a cart, ink.

Ride booking

The confirm sheet of a ride app, teal.

API reference

Prop Type Default
method PaymentMethod

Wallet / rail. Default "apple".

 "apple"
type PaymentButtonType

Lead verb — "buy" → "Buy with", "plain" → wordmark only. Default "plain".

 "plain"
appearance PaymentAppearance

Colourway. "auto" picks the wallet default for the scheme (black on light, white on dark for Apple/Google; gold for PayPal; accent for card). Default "auto".

 "auto"
label string

Card only: the full label — "Pay $64.20". Default "Pay with card".

 —
size "md" | "lg"

Height: md 44 · lg 52. Default "lg".

 "lg"
radius "md" | "pill"

Corner radius: "md" 12 · "pill" fully round. Default "md".

 "md"
onPress
((e: GestureResponderEvent) => void) … ((e: GestureResponderEvent) => void) | ((e: GestureResponderEvent) => Promise<unknown>) | null

Press handler. A returned Promise shows the processing state until it settles.

 —
status PaymentStatus

Controlled status. Omit to derive from an async onPress.

 —
successLabel string

Label shown on success. Default "Done".

 "Done"
successDuration number

Return an auto (uncontrolled) success to idle after this many ms. Omit and the button keeps its paid state — the button is the receipt.

 —
onSettled () => void

Fires once the success has held (~700ms) and the button has settled paid.

 —
className string —