shadcn.io is not affiliated with official shadcn/ui
Payment Link Generator Billing Block for React
Make a payment link: an amount, what it is for, one-time or monthly and an expiry, beside a drawn checkout page that updates as you type, then the link with a copy button and a QR code.
Installation
Overview
Let someone ask for a payment without an invoice, with this payment link generator for React with Base UI. A hairline frame with a plus mark on each corner, ruled by Guides, holds a form at the end (an amount in a Number Input, what it is for in an Input, a Segment Group for one-time or every month, and a Native Select for when the link expires) and, at the start on a wide screen, a drawn greyscale checkout page that reads "Pay $120.00 to Tutorloop" and follows what you type. The Shine Button creates the link and swaps the page for the link in a read-only field with a Copy Button, a QR Code of it, the day it expires and a New link button that starts over. On a phone the form comes first and the page under it. For tutors, freelancers, clinics and any product that sends a person to pay.
FAQ
How do I change the amounts, the options and the address?
Edit START (the values the form opens with), MIN_AMOUNT and MAX_AMOUNT, FREQUENCIES, EXPIRIES and HOST. The tokens at the end of each link come from TOKENS, in order; in your app they come from your payments provider. The expiry date is worked out from the typed AS_OF day.
What is the drawn page?
A picture of the page the payer will see, with your amount, your description and the billing cadence in it. It is hidden from assistive technology and cannot be used; it only shows what the link will ask for. Swap it for a small preview of your real hosted page.
What is checked before a link is made?
The amount must be between $1 and $5,000 and the description cannot be empty. Each problem sits under its field in a slot that is always there, and the first one takes focus. Pressing Create link again makes another link with a new token.
What stays local, and how do I wire it for real?
Copy and the QR code are real. The link is a sample on an .example host and no page exists behind it, and nothing is saved. Replace the end of submit with a call that creates the link with your payments provider and show the address it returns.
How does it work with a keyboard and a screen reader?
Each field has a label and its problem tied to it, the segment group is named "How often", and one polite status line announces the result of Create link and of New link. The copy button says "Payment link copied" when it works, and the QR code has a text name.