[2025]How to Integrate Stripe Payments for your website: Step-By-Step Guide

dante — Thu, 27 Feb 2025 13:22:56 +0000

Implementing payment processing is often one of the most challenging aspects of building a SaaS application. In this guide, I'll walk you through integrating Stripe with ShipNowKit, a powerful Next.js SaaS starter kit that makes payment integration surprisingly straightforward.

Getting Started with Stripe

Before diving into the code, you'll need to set up your Stripe account:

Sign up for a Stripe account and activate payments
Access your API keys from the Developer Console

Tip: Always start with the test environment during development.

Setting Up Stripe Webhooks

Webhooks are crucial for receiving real-time event notifications from Stripe, such as payment confirmations and subscription updates. ShipNowKit also relies on webhooks for price synchronization.

To set up your Webhook:

Navigate to the Webhooks section in your Stripe Dashboard
Click "Add destination"
Select the events you want to listen for (ShipNowKit needs events as screenshot chose)
Enter your webhook URL > For ShipNowKit, it's always the endpoint like https://[YOUR_DOMAIN]/api/payment/stripe/webhooks
Save your webhook signing secret

Configuring ShipNowKit with Your Stripe Keys

After completing the steps above, you'll have three important keys:

SECRET_KEY=sk_test_51Qdxxxxx
PUBLISHABLE_KEY=pk_test_51Qxxxx
WEBHOOK_SECRET=whsec_ytScyxxxx

Now let's configure ShipNowKit:

Set Stripe as your payment provider in config/index.ts:

export const paymentConfig: PaymentConfig = {
    paymentProvider: "stripe",
    ...
}

Add your Stripe environment variables to your .env file:

STRIPE_SECRET_KEY=sk_test_51Qdxxxxx
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51Qxxxx
STRIPE_WEBHOOK_SECRET=whsec_ytScyxxxx

Remember to restart your development server after updating environment variables for the changes to take effect.

Price Configuration

Now it's time to create your products and pricing tiers:

Create Product in Stripe Dashboard
Save and get the Price ID

Important: After updating a product, the price will automatically synchronize to your project database through the webhook you configured earlier.

Configure price components ShipNowKit offers many kinds of price components. Each price component has a priceId field. Let’s take ShipNow price component as an example.

// components/price/ShipNow.tsx
...
interface PriceCardProps {
    title: string;
    description: string;
    features: string[];
    price: {
        priceId: string;
        isSubscription: boolean;
    };
    buttonText: string;
}

export interface ShipNowPriceProps {
    title: string;
    subTitle: string;
    card: PriceCardProps;
}
...

After configuring, update the code and restart the service, you can see the updated amount and currency on the page.

Best Practice: It's recommended to configure the priceId variable as an environment variable, so you don't need to modify the code when switching priceId.

Handling Payment Events

ShipNowKit provides a convenient EventEmitter class that abstracts Stripe's complex event system into simple, easy-to-understand events:

// Register event handlers in app/api/payment/eventEmitter.ts
eventEmitter.on('subscription.succeeded', async (eventId: string, subscriptionId: string) => {
  // Handle new subscription
  console.log(`Subscription ${subscriptionId} succeeded`);
});

eventEmitter.on('subscription.renewed', async (eventId: string, subscriptionId: string) => {
  // Handle subscription renewal
  console.log(`Subscription ${subscriptionId} renewed`);
});

eventEmitter.on('subscription.plan_updated', async (eventId: string, data) => {
  // Handle plan upgrades/downgrades
  console.log(`Subscription ${data.subscriptionId} updated: ${data.oldPriceId} -> ${data.newPriceId}`);
});

eventEmitter.on('payment.succeeded', async (eventId: string, paymentId: string) => {
  // Handle successful one-time payment
  console.log(`Payment ${paymentId} succeeded`);
});

eventEmitter.on('subscription.canceled', async (eventId: string, subscriptionId: string) => {
  // Handle subscription cancellation
  console.log(`Subscription ${subscriptionId} canceled`);
});

This approach is significantly more developer-friendly than handling Stripe's raw webhook events directly.

About ShipNowKit

ShipNowKit is a comprehensive Next.js 15 & React 19 SaaS starter kit designed to help developers ship products faster. If you've ever spent days or even weeks setting up the "basics" for your SaaS application, ShipNowKit was built with you in mind.

What's Included in ShipNowKit:

Next.js 15 Framework with the latest App Router architecture
Flexible Authentication supporting multiple providers including social login and magic links
Unified Payment System that works with both Stripe and Paddle
Ready-to-Use Templates for landing pages, auth flows, and payment screens
Email Integration with professional React-powered templates
SEO Optimization built-in for better discoverability
TypeScript Enhanced for end-to-end type safety
Multiple Database Support via Prisma ORM

"Ship Now, Earn Now" - get your SaaS off the ground quickly so you can start generating revenue faster.

For more information about ShipNowKit, visit documentation or check out available templates.

(2025) How to Get Your Paddle Account Approved in 48 Hours?

dante — Sun, 09 Feb 2025 09:44:12 +0000

the article first published in ShipNowKit

Getting approved for a Paddle merchant account might seem daunting for individual developers. But with the right preparation, you can complete the process in just 1-2 days. This guide walks you through every step to ensure a smooth approval process.

Why Choose Paddle for Your Payment Processing?

Before diving into the application process, let's understand why Paddle is an excellent choice for developers:

Individual Developer Friendly: Unlike many payment processors, Paddle actively welcomes individual developers
Global Payment Support: Accept payments worldwide with multiple payment methods
Tax Handling: Automated VAT/GST handling and compliance
Quick Integration: Simple API and ready-to-use checkout solutions

What You Need Before Applying

To ensure a smooth approval process, prepare these essentials:

A professional website with:
- Clear product/service description
- Terms of Service page
- Privacy Policy page
Business domain email address
Valid passport for identity verification
Verify that your product complies with Paddle's acceptable use policy.

Helpful Resources:

Need Terms of Service and Privacy Policy templates? Check our policy generation guide

Looking for a free business email? Follow our Zoho Mail setup guide

Phase 1: Registration (15-20 minutes)

Initial Sign-up

Visit the Paddle registration page
Select your product type (e.g., SaaS subscription software)

Account Information

Enter your name (matching your passport)
Use your business domain email

Business Details

Enter your business name (this will be visible to customers)
Select "Individual" for Business Type
Complete remaining fields as applicable

Address Information

Provide your accurate physical address

Phase 2: Account Verification (1-2 business days)

Email Verification

Check your business email for verification message
Click "Confirm Your Account" link

Website Verification

Navigate to "Verify account" in the dashboard
Click "Submit website" > Ensure your website includes Terms of Service and Privacy Policy pages.

After submission, you'll need to wait for PADDLE to conduct an initial review of your website. They will typically notify you via email within one business day.

Phase 3: Identity Verification (2-3 business days)

Identity Check

Wait for identity verification email from Paddle
Click "Verify my identity" link
Follow the verification process with your passport

Final Review

If the identity verification is successful, Paddle will send a confirmation email. We no longer need to fill in any information, just wait for Paddle's final review.

Once approved, you'll receive a confirmation email and can begin integrating Paddle payments

Ready to start accepting global payments? Follow this guide to set up your Paddle account today. For any questions, feel free to comment below or reach out to us directly.

DEV Community: dante