Skip to main content
Instead of setting up everything from scratch, you can clone a template and have a working, production-ready, officially supported subscription system immediately!

​
Why Use Templates?

Instant Setup

Clone and set up a working subscription app right now

Best Practices

Security, error handling, and UX patterns already implemented

Production Ready

Tested patterns used in real applications, ready for deployment

Officially Supported

Templates are updated regularly, ensuring that everything just works

​
Available Templates

​
Next.js Template

Our flagship template built with Next.js 14, TypeScript, and the App Router. Tech stack:
  • Next.js 14 (App Router)
  • TypeScript
  • Tailwind CSS
  • utilsio React SDK
What’s included:
  • Complete subscription flow (subscribe, manage, cancel)
  • Secure signing endpoint with HMAC-SHA256
  • User authentication setup instructions for Supabase (requires separate configuration)
  • Success and cancellation pages
  • Environment variable configuration
  • Type-safe components and hooks
Perfect for:
  • SaaS applications
  • Subscription-based web apps
  • Content platforms with paywalls
  • Premium feature gating
View Next.js Template → GitHub Repository: utilsio/templates/nextjs

​
What’s Inside a Template?

Every utilsio template includes:

​
1. Backend Signing Route

Secure API endpoint that signs requests with your app secret: 
// src/app/api/sign/route.ts
- HMAC-SHA256 request signing
- Input validation
- Error handling
- Security headers

​
2. Provider Setup

Configured context provider for your app: 
// src/app/layout.tsx
- UtilsioProvider configuration
- Environment variables setup
- Auth header action implementation

​
3. Subscription Components

Pre-built UI components for subscriptions: 
// src/components/SubscriptionWidget.tsx
- Subscribe button with redirect
- Subscription status display
- Cancel subscription with confirmation
- Loading and error states

​
4. Success & Cancellation Pages

Redirect pages for subscription flows: 
// src/app/success/page.tsx
// src/app/cancelled/page.tsx
- User-friendly success messages
- Navigation back to app
- Clear next steps

​
5. Environment Configuration

Ready-to-use environment setup: 
# .env.example
- All required variables documented
- Public vs. secret variables clearly marked
- Example values provided

​
Using a Template

​
Quick Start

# 1. Clone the template
git clone https://github.com/utilsio/templates.git
cd templates/nextjs

# 2. Install dependencies
bun install

# 3. Configure environment
cp .env.example .env.local
# Edit .env.local with your credentials

# 4. Start development
bun dev

# 5. Deploy
# Push to GitHub and deploy to Vercel/Netlify

​
Customization

Templates are designed to be customized:
  • Styling - Replace Tailwind classes with your design system
  • Components - Modify UI components to match your brand
  • Features - Add your application-specific functionality
  • Pricing - Update subscription amount and pricing logic

​
Template vs. SDK vs. API

When to use what?
ApproachBest ForSetup TimeFlexibility
TemplateNew projects, MVPs, learning5-10 minutesMedium
SDKExisting apps, custom UI15 minutesHigh
Direct APINon-JS apps, full control30+ minutesMaximum
Recommendation:
  • Starting fresh? → Use a template
  • Have an existing app? → Use the SDK
  • Using a different language? → Use the API

​
Template Features Comparison

All templates include these core features:
  • ✅ User authentication setup with Supabase (requires separate configuration)
  • ✅ Subscription management (view and cancel)
  • ✅ Subscription redirect flow (to create new subscriptions)
  • ✅ Secure request signing
  • ✅ Device tracking
  • ✅ TypeScript support
  • ✅ Environment variable configuration
  • ✅ Error handling
  • ✅ Loading states
  • ✅ Success/cancellation flows
  • ✅ Documentation

​
Learning from Templates

Templates are excellent learning resources: Study the code to understand:
  • How to structure a subscription app
  • Security best practices for API keys
  • User flow design for subscriptions
  • Error handling patterns
  • Loading state management
  • TypeScript integration
Pro tip: Even if you’re building from scratch, clone a template to see how all the pieces fit together.

​
Next Steps

Next.js Template

Clone and set up the Next.js template with our guide

React SDK

Learn about the React SDK used in templates

SDKs Overview

Explore all available SDKs for different frameworks

API Reference

Dive into the REST API for custom integrations