Components
Installation
Install individual registry items or the common component set.
The registry is served from your vantezzen/pay deployment. If you use the hosted
instance, commands start with https://pay.vantezzen.io/r/.... If you self-host,
replace the domain with your own.
If you are following the beginner flow, create your vantezzen/pay project and publishable key first. See Set up vantezzen/pay and Stripe.
Common install
npx shadcn@latest add \
https://pay.vantezzen.io/r/pay-provider.json \
https://pay.vantezzen.io/r/pay-credits.json \
https://pay.vantezzen.io/r/pay-purchase.json \
https://pay.vantezzen.io/r/pay-gate.json \
https://pay.vantezzen.io/r/pay-wallet.jsonRaw client only
If you are building your own UI, install only the client:
npx shadcn@latest add https://pay.vantezzen.io/r/pay-client.jsonServer-side (external auth)
If your app has its own user accounts, install the secret-key server client instead of the browser components. See createPayServerClient.
npx shadcn@latest add https://pay.vantezzen.io/r/pay-server.jsonWhere files are installed
| Item | Target file |
|---|---|
pay-client | lib/pay/index.ts |
pay-server | lib/pay/server.ts |
pay-provider | components/pay/provider.tsx |
pay-credits | components/pay/remaining-credits.tsx |
pay-gate | components/pay/credit-gate.tsx |
pay-purchase | components/pay/purchase-dialog.tsx |
pay-wallet | components/pay/wallet-button.tsx and related wallet files |
Each component page shows the imports it expects after installation.