Hvordan koble til Stripe API med Next.js

Forutsetninger

Før vi starter, sørg for at du har:

  • En code editor (VS Code anbefales)
  • Node.js installert (lær hvordan her)
  • En konto hos Stripe

Steg-for-steg Guide

1. Hent API-nøkler

Logg inn på Stripe Dashboard og gå til Developers > API Keys. Du trenger både 'Publishable key' og 'Secret key'.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...

2. Installer Stripe SDK

Bruk npm eller yarn for å installere stripe-pakken og load-stripe for frontend.

npm install stripe @stripe/stripe-js

3. Initialiser Stripe (Server-side)

Opprett en lib/stripe.ts fil for å initialisere klienten.

import Stripe from 'stripe';

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

4. Opprett Payment Intent (API Route)

Lag et endepunkt som håndterer betalingsforespørselen.

import { NextResponse } from 'next/server';
import { stripe } from '@/lib/stripe';

export async function POST(req: Request) {
  const { amount } = await req.json();
  
  const paymentIntent = await stripe.paymentIntents.create({
    amount,
    currency: 'nok',
  });

  return NextResponse.json({ clientSecret: paymentIntent.client_secret });
}

Vanlige feil (Troubleshooting)

Her er noen kjente problemer du kan støte på: