Monetization: Adding Payments and Making Money

1. User clicks "Subscribe to Pro"
2. Server creates Stripe Checkout session
3. Redirect to Stripe payment page
4. User enters card information
5. Payment complete → Return to our site
6. Webhook confirms payment → Update DB

Create a Next.js API route.

/api/checkout:
- Create Stripe Checkout session
- Use logged-in user's email
- Redirect to /dashboard on success
- Redirect to /pricing on cancel

// /api/checkout.ts
import Stripe from 'stripe';
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
 
export async function POST(req: Request) {
  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [{
      price: process.env.STRIPE_PRICE_ID,
      quantity: 1,
    }],
    success_url: `${origin}/dashboard?success=true`,
    cancel_url: `${origin}/pricing`,
    customer_email: user.email,
  });
 
  return Response.json({ url: session.url });
}

Create an API to handle Stripe Webhook.

/api/webhook:
- Handle checkout.session.completed event
- Change user's subscription_status to 'pro'
- Include signature verification

Track link count per user.
Count active links from the links table for each user.
Free users limited to 5.

async function canAddLink(userId: string) {
  const user = await getUser(userId);
 
  // Pro users are unlimited
  if (user.subscription_status === 'pro') {
    return { allowed: true };
  }
 
  // Free users get 5 links
  const count = await getActiveLinkCount(userId);
  if (count >= 5) {
    return {
      allowed: false,
      reason: 'You have reached your free plan link limit.',
      remaining: 0
    };
  }
 
  return { allowed: true, remaining: 5 - count };
}

// Create Customer Portal session
const session = await stripe.billingPortal.sessions.create({
  customer: stripeCustomerId,
  return_url: `${origin}/dashboard`,
});

Handle subscription cancellation Webhook.

customer.subscription.deleted event:
- Change subscription_status to 'free'
- Maintain features until cancellation point

Implement subscription payments with Paddle.
Use @paddle/paddle-js.
Checkout Overlay method.

// Paddle client example
import { initializePaddle } from '@paddle/paddle-js';
 
const paddle = await initializePaddle({
  environment: 'sandbox', // or 'production'
  token: process.env.NEXT_PUBLIC_PADDLE_TOKEN!,
});
 
// Start checkout
paddle.Checkout.open({
  items: [{ priceId: 'pri_xxxxx', quantity: 1 }],
  customer: { email: user.email },
});

Implement payments with Lemon Squeezy.
Use @lemonsqueezy/lemonsqueezy.js.
Checkout link method.

// Lemon Squeezy example
import { createCheckout } from '@lemonsqueezy/lemonsqueezy.js';
 
// Create checkout link
const checkout = await createCheckout(storeId, variantId, {
  checkoutData: {
    email: user.email,
    custom: { user_id: userId },
  },
});
 
// Redirect to payment page
window.location.href = checkout.data.attributes.url;

Implement payments with Toss Payments.
Use @tosspayments/payment-sdk.
Support card payments and easy-pay.

// Toss Payments example
import { loadTossPayments } from '@tosspayments/payment-sdk';
 
const tossPayments = await loadTossPayments(clientKey);
 
// Request payment
await tossPayments.requestPayment('카드', {
  amount: 10000,
  orderId: 'order_xxxxx',
  orderName: 'LinkHub Pro Subscription',
  customerEmail: user.email,
  successUrl: `${origin}/api/payments/success`,
  failUrl: `${origin}/api/payments/fail`,
});

Implement payments with PortOne.
Use @portone/browser-sdk.

// PortOne example
import * as PortOne from '@portone/browser-sdk/v2';
 
const response = await PortOne.requestPayment({
  storeId: 'store-xxxxx',
  paymentId: `payment-${Date.now()}`,
  orderName: 'LinkHub Pro',
  totalAmount: 10000,
  currency: 'KRW',
  payMethod: 'CARD',
});