Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Bank Transfer Billing Block for React Aria

Wire details for paying a Warpmill invoice by bank transfer, each with a copy button, and a fee choice ($0, $15 or $25) that works out the amount to send so the full invoice arrives.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a customer how to pay by wire, with this bank transfer panel for React with React Aria. It is the payment page of Warpmill, freight-forwarding software, for an invoice of 1,250.00. A hairline frame with a plus mark on each corner lists the sample wire details, the beneficiary, the account number, the IBAN, the SWIFT code and the payment reference TRX-8829 in a monospaced face, each with its own Copy Button named for what it copies. A Toggle Group asks what fee your bank takes ($0, $15 or $25) and the panel works out the amount to send, "Send $1,265.00 so that $1,250.00 arrives", with a button that copies it and a line for the arrival time. The Shine Button reads "I've sent it" and is the only colored control. It's built from Copy Button, Toggle Group, Shine Button and Guides, with a CSS entrance only. For invoices paid by wire, B2B checkouts and billing pages in apps that sell across borders.

FAQ

How do I change the details, the amount or the fees?

Edit the constants at the top of the file. DETAILS lists the rows (a label and the value that is shown and copied), AMOUNT is the invoice in cents, REFERENCE and DUE are the reference and the date, and FEES lists the fees the toggle offers. The amount to send is the invoice plus the chosen fee.

Are these real bank details?

No. The IBAN, the account number and the SWIFT code are sample values with a test bank code, so nothing can be sent to them. In your app the details come from your payment provider, often a virtual account per invoice, which is what lets it match the payment to the invoice by its reference.

What stays local, and what does I've sent it do?

It only notes the transfer: the status line says "We will look for TRX-8829 (in this demo nothing is checked)". Nothing is matched, emailed or stored. In your app the payment arrives at your provider, which matches it to the reference and marks the invoice paid; the button can record that the customer says they sent it and show the invoice as pending.

How do the copy buttons work?

Each one copies exactly the text beside it through the clipboard and announces "Copied the IBAN" in the status line. If the clipboard is refused, for example on a page not served over HTTPS, the button says it could not copy, and the value stays selectable in the list.

Why does the bank's fee change the amount?

International transfers often have a fee taken from the amount that arrives. Choosing the fee your bank takes shows what to send so that the full invoice still lands, and the copy button gives you the number without the dollar sign.

How does it look on a phone?

Each detail is a row with its copy button at the end, the fee choice and the amount stack, and the I've sent it button is pinned at the bottom with a status line that keeps room for two lines.

All 167 billing blocks