recur-quickstart

```bash

pnpm add recur-tw

# or

npm install recur-tw

```

API keys are available in the Recur dashboard at app.recur.tw → Settings → Developers.

Key formats:

• pk_test_xxx - Publishable key (frontend, safe to expose)
• sk_test_xxx - Secret key (backend only, never expose)
• pk_live_xxx / sk_live_xxx - Production keys

Environment variables to set:

```bash

RECUR_PUBLISHABLE_KEY=pk_test_xxx

RECUR_SECRET_KEY=sk_test_xxx

```

Wrap your app with RecurProvider:

```tsx

import { RecurProvider } from 'recur-tw'

export default function App({ children }) {

return (

config={{

publishableKey: process.env.NEXT_PUBLIC_RECUR_PUBLISHABLE_KEY,

}}

>

{children}

)

}

```

```tsx

import { useRecur } from 'recur-tw'

function PricingButton({ productId }: { productId: string }) {

const { checkout } = useRecur()

const handleCheckout = async () => {

await checkout({

productId,

onPaymentComplete: (subscription) => {

console.log('Payment successful!', subscription)

},

onPaymentFailed: (error) => {

console.error('Payment failed:', error)

},

})

}

return Subscribe

}

```

Create a webhook endpoint to receive payment notifications. See the recur-webhooks skill for detailed instructions.

• [ ] SDK installed (pnpm list recur-tw)
• [ ] Environment variables set
• [ ] RecurProvider wrapping app
• [ ] Test checkout works in sandbox
• [ ] Webhook endpoint configured

"Invalid API key"

• Check key format: must start with pk_test_, sk_test_, pk_live_, or sk_live_
• Ensure using publishable key for frontend, secret key for backend

"Product not found"

• Verify product exists in Recur dashboard
• Check you're using correct environment (sandbox vs production)

Checkout not appearing

• Ensure RecurProvider wraps your app
• Check browser console for errors
• Verify publishable key is correct

• /recur-checkout - Learn checkout flow options
• /recur-webhooks - Set up payment notifications
• /recur-entitlements - Implement access control

• [Recur Documentation](https://recur.tw/docs)
• [SDK on npm](https://www.npmjs.com/package/recur-tw)
• [API Reference](https://recur.tw/docs/api)