shadcn.io is not affiliated with official shadcn/ui
Secure Checkout Badge Billing Block for Radix UI
Where card details go, told as three steps that each open one plain sentence, beside what the app keeps and what it never sees, with no certification badge claimed.
Installation
Overview
Earn trust at the payment step by explaining it, with this secure checkout section for React with Radix UI. A hairline frame with a plus mark on each corner holds Where your card details go for Pocketvault, a micro-donation tool. The path is an ordered list of three steps drawn in an Accordion: Your browser, The provider's hosted fields and Pocketvault, each with an icon, what it receives in a few words, and one honest sentence that opens when you choose it. A connector runs down the marks. Below, two lists on shared hairlines say what Pocketvault keeps (the brand, the last four digits, the expiry and a token that works only for its own account) and what it never sees (the full number and the security code). The foot says that this explains the arrangement and protects nothing by itself, beside Manage payment method, the only Shine Button, a link to your payment settings. No SSL, PCI or SOC badge is drawn, because the page cannot certify anything. For checkouts, donation pages and billing settings.
FAQ
Why is there no padlock or compliance badge?
A badge claims something, and a block cannot prove it. The page states how the payment travels and what is stored, which you can make true by using the payment provider's hosted fields. If you hold a certification, add it in your own words and link to the evidence.
How do I make the sentences true for my app?
They describe a hosted-fields integration, where the card number and code go from the browser to the payment provider and your server receives a token. If your integration differs, change HOPS, KEPT and NEVER to match it, and never keep a full number or a code yourself.
How does the Accordion behave?
One step is open at a time and one always stays open, so the panel keeps its height. Choosing another opens it and says which step is showing in a polite message.
What stays local in the demo?
All of it: it explains, it does not collect anything, and the product and its figures are made up. The link goes nowhere (#); point it at your payment method page.