shadcn.io is not affiliated with official shadcn/ui
Payment Request Chat Block for React
A thread where Request money swaps the composer for an amount and a note, posts a request card that reads Pending and then Paid with a receipt number, and shows Pay and Decline on a request from the other person.
Installation
Overview
Ask a friend for money inside the conversation, with this payment request chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Coinpost, a friends' payments chat: the top bar names Kofi Amponsah, and the log holds one request from you that is Pending and one from Kofi with Pay and Decline. The banknote button beside the field swaps the composer for an amount field with a dollar sign, a note and a Request Shine Button, the only colored control; the amount is parsed to whole cents and refused outside 0.01 to 500.00. A new request posts a card with the amount, the note and a Pending state, and after a short wait Kofi pays it and the card reads Paid with a receipt number. Pay on a request from Kofi shows "Visa ending 4242" and settles it with a system line. Every state has a glyph and a word, and the frame is ruled by Guides. It's the starting point for a splitting-costs or invoicing chat.
FAQ
What stays in the page, and how do I make it real?
Everything, and nothing is charged. Amounts are integer cents in local state, Kofi's payment is a timer, and the card shown is a typed "Visa ending 4242" with no number ever asked. To wire it for real, create the request on your payments provider when Request is pressed, collect the payer's card in the provider's hosted fields (never in this field), and update the card when its webhook reports Paid or Declined.
How does a request change state?
A request from you starts Pending and, after a short typed wait, flips to Paid with the next receipt number (the two seeded requests wait for you). A request from Kofi starts Pending with two buttons: Pay settles it as paid in this demo with a system line saying no money moved, and Decline marks it Declined. Each state is a glyph and a word, never only a colour.
How is the amount checked?
The field takes up to three digits and at most two decimals, turns them into integer cents with no floating point, and refuses zero or more than 500.00 with a message in the status line and an invalid field. Money is always shown as one left-to-right span so it reads the same in any language.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description tells a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit, Send stays quiet while there is nothing to send and says so if pressed, and focus returns to the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. Each request card is an article named with who asks and the amount, the amount field has a hidden label, and a settled request says so in the status line.