Billing Payment Link Generator
A compact utility for generating a shareable payment link from an amount and an optional recurrence. Built for support and sales teams that need to send a customer a one-off or recurring charge link without opening a full billing dashboard. Generating a link reveals it with a copy button that gives instant visual feedback.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, input, label dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-payment-link-generator.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing86.tsx instead.
Usage
The file also exports billing86Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing86, billing86Demo } from "@/components/blocks/billing/billing86"; export default function Page() { return <Billing86 {...billing86Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Create a payment link" | Heading above the form. |
| description | string | (see source) | Supporting text under the heading. |
| currencySymbol | string | "$" | Symbol shown inside the amount field. |
| defaultAmount | string | "" | Initial value of the amount field. |
| defaultDescription | string | "" | Initial value of the optional description field. |
| defaultRecurrence | "one_time" | "monthly" | "yearly" | "one_time" | Which recurrence option is selected on first render. |
| linkBaseUrl | string | "https://pay.example.com/l/" | Prefix used when building the generated link. |
| generateLabel | string | "Generate link" | Label on the generate button. |
| copyLabel | string | "Copy" | Label on the copy button before copying. |
| copiedLabel | string | "Copied" | Label on the copy button for 2 seconds after copying. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- The Generate button is disabled until the amount field holds a positive number, so an empty or zero amount can't produce a link.
- The generated link is a demo string built client-side from the amount and a random suffix appended to linkBaseUrl, not a real payment URL from any provider.
- Description and recurrence are captured in local state but aren't encoded into the generated link string; wire your own backend call to actually apply them.
- Copying uses navigator.clipboard.writeText and flips the button to a checkmark with a "Copied" label for 2 seconds before reverting.
- Generating a new link while one is already showing replaces it and resets the copied state, so the button never shows a stale "Copied" label for a different link.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.