shadcn.io is not affiliated with official shadcn/ui
PayPal Integration Billing Block for React Aria
Link a wallet to an account with its consent in plain sight: what linking allows, switches for renewals and one-time purchases, and a sentence for the next renewal that says which method pays it and what disconnecting changes.
Installation
Overview
Let a customer pay with a wallet without guessing what they agreed to, with this wallet integration section for React with React Aria. It shows the account of Patternbarn, a surface-pattern marketplace. A hairline frame with a plus mark on each corner holds a connection row: the wallet's name, PayPal, in text with a neutral two-letter tile, an outline Badge that says Linked or Not linked, a masked address once linked and the one Shine Button, Connect, which becomes an outline Disconnect on the same button so focus never leaves it. Under it a list ruled by Guides says what linking allows, and two Switch rows choose where the wallet is used, for renewals and for one-time purchases, off until it is linked. A closing sentence is derived: which method pays the Nov 12 renewal now, with the card as the fallback, and what happens to it if you disconnect. Connect waits a moment, then flips local state. For payment settings, checkout preferences and any subscription app.
FAQ
What happens when I press Connect, and what stays local?
Connect waits 600 milliseconds with the button busy, then marks the wallet as linked, shows a masked address, turns the switches on and says "PayPal linked in this demo. Nothing left this page." in a polite status message. Disconnect reverses it at once. No window opens, no account is touched and no network is called. In your app Connect starts the provider's own sign-in and consent flow in its window or page, and your page shows the result the provider reports.
Why is PayPal only text with two letters?
A real service appears the way it should in a UI that doesn't license a logo: its name in text, with a neutral tile holding two typed letters (Pp) that is hidden from assistive technology because the name beside it already says it. No logo, brand color or wordmark is used. Swap the tile for the provider's approved button or mark if your agreement allows.
How is the next renewal worked out?
renewalLine reads two facts, whether the wallet is linked and whether Renewals is on, and returns the sentence: the card alone before linking, the wallet with the card as fallback when both are true, or the card with the wallet kept for one-time purchases only. A second line, shown once linked, says what Disconnect would do. Both reserve their height so toggling never moves the page.
Is it accessible?
The status of the wallet is a word beside a small dot, never only a color. Each switch is named for what it does ("Use PayPal for renewals"), and while nothing is linked the switches are disabled and their line says to link the wallet first. The Connect button keeps its size while it waits and focus returns to it when the wait ends.