BirrJS

Full payment UI composable — channel selector, virtual bank card, reference input, and verify button.

Select Payment Method

Select a payment method to continue

Installation

birrjs add payment-block

This adds the component and all its dependencies to your project:

Non-Next.js users? If TypeScript reports Cannot find module './cbe.svg', add "globals.d.ts" to your tsconfig.json include array.

Component	Description
`payment-block`	Top-level composable: channel grid, card, order summary, input, verify button
`reference-input`	Animated input with bank logo transition on channel switch
`bank-payment-card`	Tilt-card with gradient/mono variants, account number copy
`utils`	`cn()` utility (`clsx` + `tailwind-merge`)

Props

Prop	Type	Default	Description
`channels`	`PaymentChannel[]`	required	Available payment channels
`selected`	`PaymentChannelType \| null`	required	Currently selected channel
`onSelect`	`(type: PaymentChannelType) => void`	required	Channel selection handler
`receiptUrl?`	`string`	—	Bound to reference input
`onReceiptUrlChange?`	`(value: string) => void`	—	Receipt URL input handler
`onVerify?`	`() => void`	—	Verify button click handler
`verifying?`	`boolean`	`false`	Shows spinner, disables input
`amount?`	`number`	—	Shows order summary card with ETB total
`className?`	`string`	—	Additional wrapper classes

`PaymentChannel`

interface PaymentChannel {
  type: "telebirr" | "cbe" | "awash";
  label: string;
  value: string;       // account number
  accountHolder?: string;
}