code개발자 도구

결제·인증·인프라·배포 — 복붙 한 번으로 완성

💳 PayPal 결제

1. 패키지 설치

npm install @paypal/react-paypal-js

2. 환경변수 (.env.local)

NEXT_PUBLIC_PAYPAL_CLIENT_ID=AfVfIr... (본인 키)
PAYPAL_SECRET=EIERq... (서버 전용)

3. 결제 컴포넌트

import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export function PayPalCheckout({ amount }: { amount: string }) {
  return (
    <PayPalScriptProvider
      options={{ clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID! }}
    >
      <PayPalButtons
        createOrder={(_data, actions) =>
          actions.order.create({
            intent: "CAPTURE",
            purchase_units: [{ amount: { currency_code: "USD", value: amount } }],
          })
        }
        onApprove={async (_data, actions) => {
          const order = await actions.order?.capture();
          console.log("결제 완료:", order?.id);
        }}
      />
    </PayPalScriptProvider>
  );
}

4. Webhook (app/api/webhook/paypal/route.ts)

export async function POST(req: Request) {
  const body = await req.json();
  const eventType = body.event_type;
  if (eventType === "PAYMENT.CAPTURE.COMPLETED") {
    // 결제 완료 처리
    const orderId = body.resource.id;
    console.log("PayPal 결제 완료:", orderId);
  }
  return new Response("OK");
}

🟦 토스페이먼츠

open_in_new토스페이먼츠 개발자 센터

1. 패키지 설치

npm install @tosspayments/tosspayments-sdk

2. 환경변수 (.env.local)

NEXT_PUBLIC_TOSS_CLIENT_KEY=test_ck_0RnYX2w... (테스트)
TOSS_SECRET_KEY=test_sk_24xLea... (서버 전용)

3. 결제 요청 함수

import { loadTossPayments } from "@tosspayments/tosspayments-sdk";

async function requestPayment(orderId: string, amount: number) {
  const toss = await loadTossPayments(process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY!);
  const payment = toss.payment({ customerKey: "ANONYMOUS" });
  await payment.requestPayment({
    method: "CARD",
    amount: { currency: "KRW", value: amount },
    orderId,
    orderName: "NatasAI Pro 플랜",
    successUrl: `${window.location.origin}/payment/success`,
    failUrl: `${window.location.origin}/payment/fail`,
  });
}

4. 결제 승인 (app/api/toss/confirm/route.ts)

export async function POST(req: Request) {
  const { paymentKey, orderId, amount } = await req.json();
  const res = await fetch("https://api.tosspayments.com/v1/payments/confirm", {
    method: "POST",
    headers: {
      Authorization: `Basic ${btoa(process.env.TOSS_SECRET_KEY + ":")}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ paymentKey, orderId, amount }),
  });
  const data = await res.json();
  return Response.json(data, { status: res.status });
}