Billing Paypal Integration
A status card for a linked PayPal account, meant to sit next to card payment options in a billing settings page. It shows whether an account is connected, not yet linked, or needs attention, and swaps the action button and messaging to match. Built for SaaS billing pages that support PayPal alongside cards so users who prefer a digital wallet have a clear, low-friction path.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-paypal-integration.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing91.tsx instead.
Usage
The file also exports billing91Demo, 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 { Billing91, billing91Demo } from "@/components/blocks/billing/billing91"; export default function Page() { return <Billing91 {...billing91Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "PayPal" | Heading shown next to the wallet icon. |
| status | "connected" | "not_connected" | "error" | none | Drives the badge color, the message shown, and the action button's label. |
| accountEmail | string | none | Linked PayPal account email, shown only when status is "connected". |
| linkedDate | string | none | Date the account was linked, shown under the header when status is "connected". |
| errorMessage | string | none | Custom message for the "error" status; falls back to a default explanation if omitted. |
| manageHref | string | "#" | Link target for the action button, whatever it's labeled. |
| className | string | none | Extra classes for the outer card. |
Types
export type PayPalConnectionStatus = "connected" | "not_connected" | "error";
Behavior notes
- The status prop is the only thing that switches the card between its three states; there's no internal connection logic, just conditional rendering off a value you control.
- Connected shows the linked account email and date, not_connected shows a short explanation, and error shows an amber warning box with a message plus a Reconnect action.
- The action button's variant and label both change with status: outline "Manage" when connected, solid "Connect PayPal" when not connected, solid "Reconnect" on error.
- The button renders as a next/link, so wiring it to a real PayPal connect or reconnect flow means pointing manageHref at that route or handler.
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.