결제 플로우

[쇼핑몰 프론트엔드]              [sayren API]                  [결제 팝업]            [PG]
1. POST /checkout            →  가격·재고 확정 검증, 주문서(30분)
2. POST /checkout/{id}/payment→ 결제 세션 생성(pending, 10분)
                                스토어 결제 설정으로 결제창 준비
                             ←  { paymentId, pgProvider, pgParams: { popupUrl, … } }
3. window.open(빈 팝업 먼저)
   → popupUrl 로드                                             4. 결제 세션 조회
                                                               5. 결제창에서 인증    → 인증 완료
                                                               6. 결제 승인 요청
                                ← 금액 재검증 → PG 승인
                                  주문 생성(PAID)·재고 차감
                                                               7. opener.postMessage(결과)
8. message 수신 (origin·source 검증) → 완료 페이지로 이동

// 장바구니에서
const session = await sdk.checkout.create({ cartItemIds: ["ci_1", "ci_2"] });

// 또는 바로구매 (cartItemIds와 directItem 중 하나만)
const direct = await sdk.checkout.create({
  // optionId = 상품 상세의 variantId. 옵션 없는 상품은 생략 가능
  directItem: { productId: "prod_001", optionId: "var_001", quantity: 1 },
});

// session: {
//   checkoutId,
//   items: [{ productId, productName, optionId, optionName, quantity, unitPrice, totalPrice }],
//   amounts: { productAmount, deliveryFee, totalAmount },
//   testPayment,   // 지금 결제하면 테스트 결제인지. 최종 값은 결제 요청 응답
//   expiresAt,
// }

const store = await sdk.store.get();
if (!store.guestCheckout && !isLoggedIn) {
  // "로그인하고 주문하기" — 로그인할 때 cartToken을 보내면 담아 둔 장바구니가 합쳐집니다
}

async function onPayClick(values: CheckoutFormValues) {
  // 1) 사용자 클릭 콜스택에서 동기적으로 빈 팝업을 연다 (차단 회피)
  const popup = window.open("", "sayren-payment", "width=480,height=720");

  // 2) 배송지/결제수단 확정 → 결제 세션 생성
  const params = await sdk.checkout.requestPayment(session.checkoutId, {
    shippingAddress: values.shippingAddress,
    paymentMethod: values.paymentMethod, // "CARD" | "BANK_TRANSFER" | ...
    guest: isGuest ? values.guest : undefined, // 비회원: 이름/연락처/주문 비밀번호
  });

  // 3) 열려 있는 빈 팝업을 결제 페이지로 이동
  const popupUrl = params.pgParams.popupUrl;
  if (popup) {
    popup.location.href = popupUrl;
  } else {
    showOpenPaymentButton(popupUrl); // 차단됨 → "결제창 열기" 버튼 노출
  }
}

import { ApiError } from "@sayren/storefront-sdk";

try {
  const params = await sdk.checkout.requestPayment(session.checkoutId, body);
  // …
} catch (error) {
  popup?.close();
  if (
    error instanceof ApiError &&
    (error.code === "PAYMENT_NOT_CONFIGURED" || error.code === "PAYMENT_PROVIDER_UNAVAILABLE")
  ) {
    onPaymentUnavailable(error.code); // 503은 잠시 후 같은 주문서로 다시 요청 가능
  }
}

/** 팝업 → 부모 페이로드 */
interface PaymentCompletedMessage {
  type: "payment:completed";
  paymentId: string;
  orderId: string;
  approvedAt: string | null;
}
interface PaymentFailedMessage {
  type: "payment:failed";
  paymentId?: string;
  code?: string;
  message?: string;
}

const popupOrigin = new URL(popupUrl).origin;
window.addEventListener("message", (event) => {
  if (event.origin !== popupOrigin || event.source !== popup) return; // 필수 검증
  if (event.data?.type === "payment:completed") onCompleted(event.data.orderId);
  if (event.data?.type === "payment:failed") onFailed(event.data.code);
});

const payment = await sdk.payments.getStatus(params.paymentId);
// { paymentId, status, orderId, testPayment, expiresAt }

async function watchPayment(paymentId: string, signal: AbortSignal) {
  let payment = await sdk.payments.getStatus(paymentId);
  while (!signal.aborted && Date.now() < Date.parse(payment.expiresAt)) {
    if (payment.status === "completed" || payment.status === "failed" || payment.status === "expired") break;
    await new Promise((resolve) => setTimeout(resolve, 2000)); // pending·processing·모르는 값
    payment = await sdk.payments.getStatus(paymentId);
  }
  if (signal.aborted) return;
  if (payment.status !== "completed" && payment.status !== "failed") {
    payment = await sdk.payments.getStatus(paymentId); // 상한에서 한 번 더 확인
  }
  switch (payment.status) {
    case "completed":
      return onCompleted(payment.orderId, payment.testPayment);
    case "failed":
    case "expired":
      return onFailed();
    default:
      return onStillProcessing(); // 승인 결과 미확정. 주문 내역에서 다시 확인
  }
}