결제 연동

import { createStorefrontClient } from "@sayren/storefront-sdk";
import { createPayments } from "@sayren/storefront-sdk/payments";

// 1) 클라이언트 — 회원이면 accessToken을 넘깁니다(적립금은 회원만 사용합니다)
const sdk = createStorefrontClient({
  baseUrl: "https://api.sayren.io/storefront/v1",
  storeCode: "{상점 코드}",
  accessToken: () => session.accessToken,
});
const payments = createPayments({ client: sdk, returnUrl: `${location.origin}/checkout/return` });

// 2) 장바구니 담기
const cart = await sdk.cart.addItem({ productId: "prod_001", optionId: "var_001", quantity: 1 });

// 3) 주문서 — 결제 옵션(paymentOptions)과 적립금 안내(points)가 같이 옵니다
const checkout = await sdk.checkout.create({ cartItemIds: cart.items.map((item) => item.cartItemId) });

// 4) (쿠폰·적립금을 쓰면) 금액 미리보기 — 결제 금액과 결제 필요 여부는 서버가 정합니다
const coupons = [{ code: "WELCOME10" }];
const pointAmount = 3000;
const pricing = await sdk.checkout.pricing(checkout.checkoutId, { coupons, pointAmount });
showAmounts(pricing.amounts); // totalAmount·pointAmount를 그대로 표시

// 5) 결제 시작 — 클릭 핸들러에서 바로 부릅니다
async function onPayClick(option, shippingAddress) {
  const result = await payments.start(checkout.checkoutId, {
    option: pricing.paymentRequired ? option : undefined, // false면(적립금 전액) 결제수단을 보내지 않습니다
    shippingAddress,
    coupons,
    pointAmount,
  });
  settle(result);
}

// 모바일·리다이렉트 결제는 복귀 화면(/checkout/return)에서 같은 결과를 읽습니다
settle(await payments.result());

// 6) 결과 분기는 하나입니다 — 결제창 결제와 적립금 전액 결제가 같은 결과를 돌려줍니다
function settle(result) {
  if (result.status === "COMPLETED") return location.replace(`/orders/${result.orderId}`);
  if (result.status === "PROCESSING") return waitForResult(result.paymentId);
  return showRetry(result); // CANCELED·FAILED·INVALID
}

import { createStorefrontClient, paymentOptionKey } from "@sayren/storefront-sdk";
import { createPayments } from "@sayren/storefront-sdk/payments";

const sdk = createStorefrontClient({ baseUrl: "https://api.sayren.io/storefront/v1", storeCode: "{상점 코드}" });
const payments = createPayments({ client: sdk, returnUrl: `${location.origin}/checkout/return` });

// 1) 주문서 — 결제 옵션 목록이 같이 온다
const checkout = await sdk.checkout.create({ cartItemIds: ["ci_1"] });
renderOptions(checkout.paymentOptions); // 라디오 value = paymentOptionKey(option)

// 2) 결제 시작 — 클릭 핸들러에서 바로 부른다
async function onPayClick(option, shippingAddress, guest) {
  settle(await payments.start(checkout.checkoutId, { option, shippingAddress, guest }));
}

// 4) 복귀 화면(/checkout/return)
settle(await payments.result());

function settle(result) {
  switch (result.status) {
    case "COMPLETED":
      return location.replace(`/orders/${result.orderId}`);
    case "CANCELED": // 구매자가 결제창을 닫음
    case "FAILED": // 카드 거절 등. result.code·result.message
      return showRetry(result.paymentId); // 5) payments.retry(result.paymentId, { option })
    case "PROCESSING": // 결과 확인 중 — 실패로 단정하지 않는다
      return waitForResult(result.paymentId);
    case "INVALID": // 결제 정보가 없는 주소
      return location.replace("/cart");
  }
}

const checkout = await sdk.checkout.create({ cartItemIds: ["ci_1", "ci_2"] });
// 바로구매: { directItem: { productId: "prod_001", optionId: "var_001", quantity: 1 } }

// checkout.paymentOptions — PG 우선순위순
// [
//   { pg: "tosspayments", method: "CARD",                          label: "신용·체크카드", pgName: "토스페이먼츠" },
//   { pg: "tosspayments", method: "EASY_PAY", provider: "NAVERPAY", label: "네이버페이",   pgName: "토스페이먼츠" },
//   { pg: "portone",      method: "EASY_PAY", provider: "KAKAOPAY", label: "카카오페이",   pgName: "포트원" },
// ]

await payments.start(checkoutId, { option: { pg: "tosspayments", method: "EASY_PAY", provider: "NAVERPAY" }, shippingAddress });

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

const quote = await sdk.checkout.quoteDelivery(checkout.checkoutId, { zipCode: "63000" });
// quote.amounts.totalAmount — 이 배송지로 결제할 금액
// quote.delivery.remoteSurcharge · remoteAreaLabel — 추가 배송비와 지역 이름

const result = await payments.start(checkout.checkoutId, {
  option,
  shippingAddress: { receiverName, phone, zipCode, address1, address2, deliveryMemo },
  guest: isGuest ? { name, phone, email, orderPassword } : undefined,
  // shippingAddress — checkout.requiresShipping이 false면 생략
  // returnUrl — 기본은 createPayments에 준 값, mode — 기본 "auto"
});

const pricing = await api.checkout.pricing(checkout.checkoutId, { coupons, pointAmount });
const result = await payments.start(checkout.checkoutId, {
  option: pricing.paymentRequired ? option : undefined,
  shippingAddress,
  coupons,
  pointAmount,
});

const paymentWindow = payments.prepareWindow(); // 클릭 핸들러에서. paymentWindow.mode로 실제 방식(popup·redirect)을 안다
try {
  const start = await startPaymentOnServer({ checkoutId, option, shippingAddress }); // 서버 함수
  settle(await payments.open(start, { window: paymentWindow }));
} catch (error) {
  paymentWindow.close(); // 결제 시작 실패 — 빈 팝업을 닫는다
  throw error;
}

await payments.start(checkout.checkoutId, {
  option: { pg: "tosspayments", method: "BANK_TRANSFER" },
  shippingAddress,
  cashReceipt: { type: "INCOME_DEDUCTION", identityNumber: "010-1234-5678" },
});

async function waitForResult(paymentId: string) {
  for (let i = 0; i < 20; i += 1) {
    await new Promise((resolve) => setTimeout(resolve, 2000));
    const status = await payments.getStatus(paymentId);
    if (status.result === "COMPLETED") return location.replace(`/orders/${status.orderId}`);
    if (status.result === "FAILED" || status.result === "EXPIRED") return showRetry(paymentId);
  }
  showNotice("결제 결과를 확인하고 있습니다. 잠시 뒤 주문 내역에서 확인해 주십시오.");
}

const result = await payments.retry(paymentId, { option: { pg: "portone", method: "CARD" } });