결제 플로우

[쇼핑몰 프론트엔드]              [shop24 API]                  [결제 팝업]            [PG (Toss)]
1. POST /checkout            →  가격·재고 확정 검증, 세션(30분)
2. POST /checkout/{id}/payment→ 결제 세션 생성(pending)
                             ←  { paymentId, 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({
  directItem: { productId: "prod_001", optionId: "opt_001", quantity: 1 },
});

// session: { checkoutId, items[], amounts: { productAmount, deliveryFee, totalAmount }, expiresAt }

async function onPayClick(values: CheckoutFormValues) {
  // 1) 사용자 클릭 콜스택에서 동기적으로 빈 팝업을 연다 (차단 회피)
  const popup = window.open("", "shop24-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 as string;
  if (popup) {
    popup.location.href = popupUrl;
  } else {
    showOpenPaymentButton(popupUrl); // 차단됨 → "결제창 열기" 버튼 노출
  }
}

/** 팝업 → 부모 페이로드 */
interface PaymentCompletedMessage {
  type: "payment:completed";
  paymentId: string;
  orderId: string;
}
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") goToComplete(event.data.orderId);
  if (event.data?.type === "payment:failed") showError(event.data.message);
});