외부 PG사 연동 시 리다이렉트 패턴 비교 - SDK vs Form POST vs GET

async function initiatePayment() {
  setLoading(true);
 
  try {
    // 1. 결제 준비 API 호출 - 모든 결제 수단에 공통
    const { paymentData } = await request("/api/payments/prepare", {
      method: "POST",
      body: {
        orderKey,
        userPlatform,
        payMethod: selectedMethod,
      },
    });
 
    // 2. 결제 수단별 분기 처리
    switch (selectedMethod) {
      case "EASY_PAY_A":
        // GET 리다이렉트 방식
        openEasyPayA(paymentData);
        break;
 
      case "CARD":
      case "EASY_PAY_B":
        // Form POST 방식 (단일 파라미터)
        submitPaymentForm(
          paymentData.gatewayUrl,
          paymentData.encryptedParams,
        );
        break;
 
      case "PHONE":
      case "VOUCHER":
        // Form POST 방식 (JSON 파라미터)
        submitPaymentForm(paymentData.gatewayUrl, paymentData.params);
        break;
    }
  } catch {
    setLoading(false);
  }
}

function openEasyPayA(paymentData: PaymentDataType) {
  const { paymentToken } = paymentData;
 
  // 환경에 따른 도메인 분기 (개발/운영)
  const pgDomain = isDev ? "https://test-pg-a.example.com" : "https://pg-a.example.com";
 
  // paymentToken를 URL 경로에 포함하여 결제창으로 이동
  window.location.href = `${pgDomain}/payments/${paymentToken}`;
}

// /payment/redirect/PaymentSubmitForm.tsx
"use client";
 
export default function PaymentSubmitForm() {
  // URL에서 pgUrl, payMethod, params, transactionKey 추출
  const searchParams = useSearchParams();
  const form = useRef<HTMLFormElement>(null);
 
  // 결제 수단별 파라미터 처리
  function validateAndSetParams() {
    switch (payMethod) {
      case "CARD":         // 암호화 파라미터 → 단일 input
      case "EASY_PAY_B":   // 트랜잭션ID → 단일 input
        setParamName(...); setParamValue(...);
        break;
      case "PHONE":        // JSON → 개별 input + encoding 설정
      case "VOUCHER":      // JSON → 개별 input + 암호화 필드 인코딩
        setJsonParams(JSON.parse(params));
        break;
    }
  }
 
  // 마운트 시 자동 제출
  useEffect(() => {
    if (validateAndSetParams()) form.current?.submit();
  }, [...]);
 
  return (
    <form action={pgUrl!} ref={form} method="POST">
      {/* PHONE/VOUCHER: 각 필드를 개별 input으로 생성 */}
      {/* CARD/EASY_PAY_B: 단일 hidden input */}
    </form>
  );
}

// /payment/callback/route.ts
import { NextRequest, redirect, RedirectType } from "next/server";
 
// PG사 A: GET 콜백
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const orderKey = searchParams.get("orderKey");
  const resultStatus = searchParams.get("resultStatus");
  // ... transactionKey, paymentToken 등 추출
 
  // 결제 실패 시 실패 페이지로 리다이렉트
  if (resultStatus !== "Success") {
    return redirect(`/payment/fail?orderKey=${orderKey}&resultStatus=UserCancel`);
  }
 
  // 결과 파라미터를 JSON으로 조합 후 통합 완료 페이지로 리다이렉트
  const pgResponse = JSON.stringify({ resultStatus, transactionKey, paymentToken });
  return redirect(
    `/payment/complete?payMethod=EASY_PAY_A&orderKey=${orderKey}&pgResponse=${encodeURIComponent(pgResponse)}`,
  );
}
 
// PG사 B: POST 콜백
export async function POST(request: NextRequest) {
  const formData = await request.formData();
  // ... orderKey, payMethod 등 쿼리 파라미터 추출
 
  let methodType = "CARD";
  let pgResponse: string | null = null;
 
  // 결제 수단별 파라미터 추출
  switch (payMethod) {
    case "giftcard":
      methodType = "VOUCHER";
      pgResponse = formData.get("encData")?.toString() ?? null;
      break;
    case "phone":
      methodType = "PHONE";
      pgResponse = JSON.stringify({ /* formData에서 필드 추출 */ });
      break;
    default: // card, easy-pay-b 등
      pgResponse = formData.get("pgResponse")?.toString() ?? null;
  }
 
  // 통합 완료 페이지로 리다이렉트
  return redirect(
    `/payment/complete?payMethod=${methodType}&orderKey=${orderKey}&pgResponse=${encodeURIComponent(pgResponse!)}`,
  );
}

// /api/payments/prepare/route.ts
export async function POST(request: Request) {
  const body = await request.json();
  const { orderKey, payMethod, userPlatform } = body;
 
  // 백엔드 API 호출
  const result = await fetchBackendAPI(`/api/v1/payments/${orderKey}/prepare`, {
    method: "POST",
    body: JSON.stringify({
      payMethod,
      userPlatform,
    }),
  });
 
  // PG사 A: 클라이언트 자격증명 주입
  if (payMethod === "EASY_PAY_A") {
    result.paymentData.apiKey = process.env.PG_A_API_KEY;
    result.paymentData.storeId = process.env.PG_A_STORE_ID;
  }
 
  return Response.json(result);
}