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

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.