> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paymint.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Vibe Coding Prompts

> Example prompts to quickly setup payments with AI agents.

# Vibe Coding Prompts

Stop writing boilerplate. Use these prompts with your favorite AI agent (Cursor, Windsurf, Bolt, etc.) to integrate Paymint in seconds.

<Info>
  **AI Context:** When using these prompts, give your AI agent the URL to our [Next.js SDK Documentation](https://docs.paymint.dev/sdks/nextjs) or [React SDK Documentation](https://docs.paymint.dev/sdks/react) so it has the latest API reference.
</Info>

## Quick Setup (Next.js)

### 1. The "Full Integration" Prompt

Use this to set up the core API route and the Paymint Provider.

```text theme={null}
"I want to integrate Paymint for subscription billing using the @paymint/nextjs SDK. 
Please refer to the documentation at https://docs.paymint.dev/sdks/nextjs for the latest API reference.
1. Create a dynamic API route at 'app/api/paddle/route.ts' using 'nextRouteHandler' from '@paymint/nextjs/server'.
2. Integrate Clerk for authentication to get the customer email securely from the session. 
3. Wrap the application in 'PaymintProvider' in 'app/providers.tsx', setting the 'apiRoute' to '/api/billing'."
```

### 2. The "Pricing Page" Prompt

Use this to generate a high-converting pricing UI that connects to Paymint.

```text theme={null}
"Create a pricing page component for my Next.js app using Tailwind CSS. 
Refer to the @paymint/nextjs hooks documentation at https://docs.paymint.dev/sdks/nextjs#hooks.
Use 'useBilling' to fetch products and 'useCheckout' for the payment flow. 
Map through 'products' and display pricing cards with 'product.name', 'product.description', and 'price.unitPrice'. 
Add a 'Subscribe' button that calls 'openCheckout(price.id)' when clicked. 
Make the design feel premium with subtle micro-animations and hover effects."
```

## Advanced Actions

### 3. The "Customer Portal" Prompt

Help users manage their own subscriptions.

```text theme={null}
"Create a 'Manage Subscription' section for the user dashboard. 
Refer to the 'useSubscription' documentation at https://docs.paymint.dev/sdks/nextjs#usesubscription.
Show the current 'subscription.productName' and status. 
Add action buttons for 'cancel', 'pause', and 'resume'. 
Ensure to handle 'isMutating' state to show loading spinners on buttons during the request."
```

### 4. The "Success Verification" Prompt

Verify the payment on a success page.

```text theme={null}
"Create a server-side success page at 'app/checkout/success/page.tsx'. 
Use 'PaymintServer' (refer to https://docs.paymint.dev/sdks/nextjs#server-side-usage) to fetch the latest billing state for the user's email. 
If 'billing.hasActiveSubscription' is true, show a success message with the product name. 
Otherwise, show a 'Processing payment...' message and suggest a page refresh."
```

***

<Tip>
  **Pro Tip:** You can copy-paste these directly into your AI coding assistant. Make sure your `PAYMINT_API_KEY` is already in your `.env.local` file!
</Tip>