Install the SDK

Now that vantezzen/pay has a project, Stripe connection, product, price, and publishable key, install the app-side pieces. The project Developers tab shows the same commands with your deployment URL and key.

vantezzen/pay ships as a shadcn registry. The files are copied into your app and use your local shadcn components.

Your project's Developers tab in the dashboard shows all of the snippets on this page with your real key and registry URL already filled in - you can copy from there instead.

1. Add your environment variables

Use the project publishable key. For example, in Next.js:

.env.local

NEXT_PUBLIC_PAY_URL=https://pay.vantezzen.io
NEXT_PUBLIC_PAY_KEY=pay_pk_your_key

If you self-host vantezzen/pay, use your own domain instead of pay.vantezzen.io.

2. Install the common components

One command installs the provider, balance display, purchase dialog, and credit gate:

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.json

You can install individual pieces later from the component installation page.

3. Add the provider

Put PayProvider above the pages that need balances or checkout.

app/layout.tsx

import { PayProvider } from "@/components/pay/provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <PayProvider
          baseUrl={process.env.NEXT_PUBLIC_PAY_URL!}
          publishableKey={process.env.NEXT_PUBLIC_PAY_KEY!}
        >
          {children}
        </PayProvider>
      </body>
    </html>
  );
}

The provider loads the current wallet balance, creates a wallet when needed, and resumes checkout confirmation when the user returns from Stripe.

Drop <RemainingCredits /> anywhere inside the provider. If you see a number, your keys, origin, and instance are wired correctly.

Next, gate your first paid feature.

1. Add your environment variables

2. Install the common components

3. Add the provider

On this page