The Prince Academy株式会社 | Protecting Your Server-Side Integration | Securing Your Payment Integration | Stripe for Next.js: A Developer's Guide to Seamless Payments

As crucial as securing your client-side integration is, protecting your server-side logic is paramount. This is where sensitive operations like creating payment intents, fulfilling orders, and handling webhooks reside. A compromised server-side can lead to financial losses, data breaches, and reputational damage. Let's explore the key strategies for fortifying your Next.js server-side Stripe integration.

Securely Manage API Keys and Secrets: Never expose your Stripe API keys, especially your secret key, in client-side code or public repositories. Utilize environment variables to store these sensitive credentials. In a Next.js application, you can leverage .env.local (for local development) and your deployment platform's environment variable management system (for production).

STRIPE_SECRET_KEY=sk_test_YOUR_SECRET_KEY
STRIPE_PUBLISHABLE_KEY=pk_test_YOUR_PUBLISHABLE_KEY

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: '2023-10-16',
});

// Use stripe object for server-side operations

Implement Robust Webhook Handling: Stripe webhooks are essential for receiving real-time notifications about events like successful payments, disputes, and refunds. These endpoints must be secured to prevent unauthorized access and ensure the integrity of the data received.

a. Verify Webhook Signatures: Stripe signs every webhook event with a signature. Your server-side endpoint must verify this signature using your webhook signing secret to confirm that the request originated from Stripe and hasn't been tampered with. This is a critical security measure.

import { buffer } from 'micro';

export default async function handler(req, res) {
  const signature = req.headers['stripe-signature'];
  let event;

  try {
    event = stripe.webhooks.constructEvent(
      await buffer(req),
      signature,
      process.env.STRIPE_WEBHOOK_SECRET
    );
  } catch (err) {
    console.error(`Webhook signature verification failed: ${err.message}`);
    return res.status(400).send(`Webhook Error: ${err.message}`);
  }

  // Handle the event
  switch (event.type) {
    case 'payment_intent.succeeded':
      const paymentIntent = event.data.object;
      console.log(`PaymentIntent for ${paymentIntent.amount} was successful!`);
      // Fulfill the order, send email, etc.
      break;
    // ... handle other event types
    default:
      console.log(`Unhandled event type ${event.type}`);
  }

  res.json({ received: true });
}

b. Use a Dedicated Endpoint: Create a specific API route (e.g., /api/webhooks/stripe) for handling Stripe webhooks. This isolates webhook logic and makes it easier to manage and secure.

import { buffer } from 'micro'; export default async function handler(req, res) { const signature = req.headers['stripe-signature']; let event; try { event = stripe.webhooks.constructEvent( await buffer(req), signature, process.env.STRIPE_WEBHOOK_SECRET ); } catch (err) { console.error(`Webhook signature verification failed: ${err.message}`); return res.status(400).send(`Webhook Error: ${err.message}`); } // Handle the event switch (event.type) { case 'payment_intent.succeeded': const paymentIntent = event.data.object; console.log(`PaymentIntent for ${paymentIntent.amount} was successful!`); // Fulfill the order, send email, etc. break; // ... handle other event types default: console.log(`Unhandled event type ${event.type}`); } res.json({ received: true }); }