Skip to main content

​
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. Payments Feature Example

​
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

Ensure that your environment variables are correctly set up, including the client token for Paddle. Check your browser console for any errors.
Verify that your webhook URLs are correctly configured in your Paddle dashboard and that your webhook secrets match what’s in your environment variables.
Check that the user is authenticated and has an active subscription. Verify that the correct customer ID is being passed to the portal component.

Paddle Integration

Detailed guide on Paddle payment integration

Configuration

Learn how to customize your pricing and checkout experience
⌘I