shadcn.io is not affiliated with official shadcn/ui
Crypto Payment Checkout Block for React
A coin payment step on invented coins: a segment group of three coins, the order's amount worked out from a typed rate table in whole base units, a QR code of a sample payment link, a fake address and the amount with copy buttons, and an I have sent it button that says nothing is watched.
Installation
Overview
Quote an order in a coin and show how to pay it, with this crypto checkout for React with Base UI. A compact header from Swallowtail, a shop of numbered digital editions, sits over a hairline frame with a plus mark on each corner. A Segment Group picks one of three invented coins (Pelagos, Gannetcoin and Paperdollar, each a two-letter tile and a name); the amount of the $72.00 order is worked out from a typed rate table in whole base units, with eight, six and two decimals. Under it a QR code holds a sample payment link, and the address and the amount each have a Copy Button; the address is obviously fake, and a line says a shop would hold the quote for 15 minutes while this one does not count down. A side cell lists the order and its total in dollars. I have sent it is the only Shine Button and says that nothing is watched here. For digital goods, tickets and any shop that takes a coin.
FAQ
How is the coin amount worked out?
From the order total in cents and the coin's typed rate (cents for one whole coin): unitsOf multiplies by ten to the power of the coin's decimals and divides by the rate, rounding to the smallest unit, so there is no floating-point dollar anywhere. amountText writes the units back with the coin's own number of decimals, and the same text feeds the QR code and the Copy Button, so what you see is what you copy.
Are the coins and the address real?
No. The coins are invented, the rates are typed with a date, and the addresses are marked TEST and FAKE and would not parse on any network. The QR code encodes a sample link in the same shape a wallet would read, so you can see a real scan flow without risking a payment. Nothing here opens a wallet or touches window.ethereum.
Why is there no countdown on the quote?
A countdown that nothing enforces is manufactured urgency. A shop that holds a quote would say so and enforce it on the server; the block says in words that this one does not count down. If you hold quotes, show the real expiry and fetch a new quote when it passes.
What does I have sent it do?
It marks the payment as sent and says in the status line that this demo does not watch for a payment and nothing arrives. In your app it would start a check of the coin's network for a transfer to the address with the exact amount, and show the order as paid only when that check, on your server, confirms it.
What changes on a phone?
The three coins share one row, hiding their tiles on the narrowest screens; the QR code stacks above the address and the amount, which wrap rather than truncate. The side cell with the order moves under the payment and the foot stays pinned.
What stays local in the demo, and how do I wire it up?
The rates, addresses and order are typed constants. In your app create a payment with your processor or node, receive a fresh address, the amount and an expiry from your server, and render them in the same places; never keep a private key in the page.