💳 Mokėjimų integracija

Stripe integracija į Next.js svetainę: žingsnis po žingsnio gidas 2025

Kaip greitai ir saugiai integruoti Stripe mokėjimų sistemą į savo Next.js projektą – nuo API raktų iki Webhook konfigūracijos.

Sweetnet komanda

Web kūrėjai

📅 2025 kov. 15⏱ 8 min skaitymas

#Stripe#Next.js#mokėjimai#integracija#el. parduotuvė

Stripe yra viena populiariausių mokėjimų platformų pasaulyje – ir ne be reikalo. Ji siūlo paprastą API, puikią dokumentaciją ir saugų mokėjimų apdorojimą. Šiame straipsnyje parodysime, kaip integruoti Stripe į Next.js 14 projektą nuo nulio.

💡

Sweetnet per pastaruosius metus įdiegė Stripe integraciją daugiau nei 23 Lietuvos ir tarptautinių įmonių. Šis gidas remiasi mūsų realiu darbo patirtimi.

1. Prielaidos ir diegimas

Prieš pradedant, jums reikės: Next.js 14+ projekto, Stripe paskyros (galite susikurti nemokamą), ir Node.js 18+. Pradėkime nuo paketo diegimo:

bash

npm install stripe @stripe/stripe-js @stripe/react-stripe-js

2. Aplinkos kintamieji

Sukurkite .env.local failą projekto šaknyje ir pridėkite Stripe raktus. Juos rasite Stripe Dashboard → Developers → API keys:

bash

# .env.local
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

3. Checkout sesijos kūrimas

Sukurkite API maršrutą, kuris generuos Stripe Checkout sesiją. Next.js App Router atveju tai bus app/api/checkout/route.ts:

typescript

// app/api/checkout/route.ts
import Stripe from "stripe";
import { NextResponse } from "next/server";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2024-12-18",
});

export async function POST(req: Request) {
  const { priceId, quantity = 1 } = await req.json();

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [{ price: priceId, quantity }],
    mode: "payment",
    success_url: `${process.env.NEXT_PUBLIC_URL}/sekme?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/krepselis`,
    locale: "lt", // Lietuviška Stripe sąsaja
  });

  return NextResponse.json({ url: session.url });
}

4. Webhook – mokėjimo patvirtinimas

Webhook yra būtinas – jis informuoja jūsų serverį apie sėkmingus mokėjimus. Be jo negalėsite patikimai apdoroti užsakymų:

typescript

// app/api/webhook/route.ts
import Stripe from "stripe";
import { headers } from "next/headers";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: Request) {
  const body = await req.text();
  const sig = headers().get("stripe-signature")!;

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err) {
    return new Response(`Webhook klaida: ${err}`, { status: 400 });
  }

  if (event.type === "checkout.session.completed") {
    const session = event.data.object as Stripe.Checkout.Session;
    // Čia apdorokite sėkmingą mokėjimą
    await apdorotiUzsakyma(session);
  }

  return new Response(null, { status: 200 });
}

5. Klientinė dalis – mokėjimo mygtukas

typescript

// components/MokejimoMygtukas.tsx
"use client";
import { useState } from "react";

export default function MokejimoMygtukas({ priceId }: { priceId: string }) {
  const [loading, setLoading] = useState(false);

  const pradetiMokejima = async () => {
    setLoading(true);
    const res = await fetch("/api/checkout", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ priceId }),
    });
    const { url } = await res.json();
    window.location.href = url;
  };

  return (
    <button onClick={pradetiMokejima} disabled={loading}>
      {loading ? "Kraunama..." : "Mokėti dabar"}
    </button>
  );
}

Dažniausios klaidos

✓Naudojate sk_live_ raktą testavimo aplinkoje – visada naudokite sk_test_ kol sistema nepaleista.
✓Webhook nepasirašytas – be STRIPE_WEBHOOK_SECRET kiekvienas gali siųsti netikrus pranešimus.
✓Nenaudojate idempotency key – galimi dvigubi mokėjimai esant tinklo problemoms.
✓Nepatikrinate Stripe sesijos statuso – visada patikrinkite payment_status === 'paid'.

🚀

Reikia pagalbos integruojant Stripe į savo projektą? Sweetnet komanda gali tai padaryti per 1–3 darbo dienas. Susisiekite su mumis.

Norite profesionalios Stripe integracijos?

Sweetnet per 10 metų įdiegė mokėjimų sistemas daugiau nei 23 klientų. Susisiekite ir gaukite nemokamą konsultaciją.

Pasidalinkite šiuo straipsniu

Padėkite kitiems sužinoti apie šią temą

LinkedIn Facebook X (Twitter)