​
Payments Feature Overview

PreLaunch comes with comprehensive payment capabilities, allowing you to monetize your product even during the pre-launch phase. The template includes integration with Paddle, giving you a powerful system to handle transactions.

​
Key Features

  • Payment Processing: Support for both one-time purchases and recurring subscriptions
  • Customizable Pricing Plans: Create and display different pricing tiers
  • Checkout Flow: Streamlined checkout experience for customers
  • Customer Management: View and manage customer information and subscriptions
  • Webhook Integration: Automatically handle payment events
  • Mobile-Responsive Design: Payment flows work on all devices

​
Paddle Integration

PreLaunch includes a comprehensive integration with Paddle, which is particularly well-suited for SaaS businesses:

  • Advantages:
    • Handles VAT/tax calculations and compliance automatically
    • Built-in subscription management
    • Supports multiple currencies
    • Lower setup complexity

Learn more about Paddle integration

​
Implementing a Pricing Page

PreLaunch includes a ready-to-use pricing component that you can easily customize:

import { Pricing } from '@/components/landing/Pricing';

export default function PricingPage() {
  return (
    <div className="pricing-page">
      <h1>Choose Your Plan</h1>
      <p>Select the plan that best fits your needs</p>
      
      <Pricing />
    </div>
  );
}

​
Configuring Pricing Plans

All pricing plans are configured in the config.ts file. You can easily modify or add new plans:

// config.ts
paddle: {
  plans: [
    {
      priceId: "pri_xxxxxxxxxxxxxxxx",  // Paddle price ID
      id: "basic",
      name: "Basic Plan",
      description: "For individuals and small projects",
      price: 29,
      priceAnchor: 49,  // Original price (for showing discount)
      features: [
        "Feature 1",
        "Feature 2",
        "Feature 3"
      ],
    },
    {
      priceId: "pri_yyyyyyyyyyyyyyyy",  // Paddle price ID
      id: "pro",
      name: "Pro Plan",
      description: "For professional users",
      price: 79,
      features: [
        "Everything in Basic",
        "Feature 4",
        "Feature 5",
        "Feature 6"
      ],
      isFeatured: true,  // Highlight this plan
    },
    // Add more plans as needed
  ],
},

​
Checkout Components

PreLaunch provides pre-built checkout buttons for Paddle:

​
Paddle Checkout Button

import { ButtonCheckout } from '@/components/ButtonCheckout';

export default function PricingCard() {
  return (
    <div className="pricing-card">
      <h3>Pro Plan</h3>
      <p className="price">$79/month</p>
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      
      <ButtonCheckout priceId="pri_xxxxxxxxxxxxxxxx" />
    </div>
  );
}

​
Customer Portal

PreLaunch includes components for customer account management, allowing users to view and manage their subscriptions:

import { ButtonPaddleAccount } from '@/components/ButtonPaddleAccount';

export default function AccountPage() {
  return (
    <div className="account-page">
      <h1>Your Account</h1>
      
      <div className="account-management">
        <h2>Subscription Management</h2>
        <p>View or update your subscription</p>
        
        <ButtonPaddleAccount />
      </div>
    </div>
  );
}

​
Environment Configuration

To use the payment features, you need to set up your environment variables in the .env.local file:

​
For Paddle:

# Paddle Configuration
PADDLE_SANDBOX=true  # Set to false for production
PADDLE_API_KEY=your-api-key-here
PADDLE_NOTIFICATION_WEBHOOK_SECRET=your-webhook-secret-here
NEXT_PUBLIC_PADDLE_CLIENT_TOKEN=your-paddle-client-token-here

​
Best Practices for Payment Implementation

  • Test Thoroughly: Always test the checkout flow in sandbox/test mode before going live
  • Set Clear Expectations: Clearly communicate what users are paying for
  • Secure Environment Variables: Never expose your payment API keys in client-side code
  • Implement Proper Error Handling: Provide clear feedback when payment issues occur
  • Monitor Webhooks: Set up monitoring for payment webhooks to catch any issues

​
Troubleshooting Common Issues

Paddle Integration

Detailed guide on Paddle payment integration

Configuration

Learn how to customize your pricing and checkout experience