Component

Payment

A styled card surface for building checkout and payment forms. It provides the framed container and a disabled state; you compose the fields and actions inside. Built on the headless @refraction-ui/payment core.

Basic

Wrap your form fields and a pay action inside Payment. The component owns the card framing; the inner markup is entirely yours.

Payment details

Enter your card to complete the purchase.

Card number

ExpiryCVC

Installation

$pnpm add @refraction-ui/react-payment

Usage

tsx

import { Payment } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <Payment>
      <h3 className="text-xl font-semibold">Payment details</h3>
      <p className="text-sm text-muted-foreground">Enter your card to continue.</p>
      <input placeholder="Card number" />
      <button>Pay $49.00</button>
    </Payment>
  )
}

Disabled

Pass disabled while a payment is processing to dim the surface and block interaction.

Payment details

Enter your card to complete the purchase.

Card number

ExpiryCVC

Props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Dims the surface and blocks pointer interaction with its contents.
`children`	`React.ReactNode`	--	The payment form / content rendered inside the styled card surface.
`className`	`string`	--	Additional CSS classes for the card container.