// KASHA website — payment / checkout screen (토스페이먼츠 연동 흐름 목업) // 우리 결제수단 id → 토스페이먼츠 method 코드 매핑 (실연동 시 그대로 사용) const TOSS_METHOD = { card: { method: "CARD", label: "카드" }, toss: { method: "간편결제", label: "토스페이" }, kakao: { method: "간편결제", label: "카카오페이" }, transfer: { method: "TRANSFER", label: "계좌이체" }, }; // 예약 성공 시 전환 트래킹(GA4/픽셀) + 서버 SMS 알림 (설정 시에만 동작) function notifyBooking(pkgName, phone, total, status) { try { if (!window.KASHAIntegrations) return; window.KASHAIntegrations.track("Purchase", { value: total, currency: "KRW", content_name: pkgName }); window.KASHAIntegrations.notifySms({ to: phone, text: "[KASHA] " + pkgName + " 예약이 접수되었어요. (" + status + ") 확인 후 안내드릴게요." }); } catch (e) {} } function PaymentScreen({ order, onNavigate }) { const { Button, Card, Input, Checkbox, Icon, Badge } = window.DS; const pkg = window.PACKAGES.find((p) => p.id === (order && order.pkgId)) || window.PACKAGES[0]; const won = (n) => n.toLocaleString("ko-KR"); const addonList = window.effectiveAddons(pkg); // 상품 옵션 + 전역 옵션 템플릿 const [method, setMethod] = React.useState("card"); // 예약 단계에서 고른 옵션을 이어받아요 const [selAddons, setSelAddons] = React.useState((order && order.addonIds) || []); const [coupon, setCoupon] = React.useState(""); const [applied, setApplied] = React.useState(0); const [agree, setAgree] = React.useState({ terms: false, privacy: false }); const [done, setDone] = React.useState(false); const [paying, setPaying] = React.useState(false); const [payError, setPayError] = React.useState(""); const [receipt, setReceipt] = React.useState(null); const toggleAddon = (id) => setSelAddons((s) => s.includes(id) ? s.filter((x) => x !== id) : [...s, id]); const addonTotal = addonList.filter((a) => selAddons.includes(a.id)).reduce((s, a) => s + a.price, 0); const subtotal = pkg.priceNum + addonTotal; const total = Math.max(0, subtotal - applied); const canPay = agree.terms && agree.privacy; const applyCoupon = () => setApplied(coupon.trim() ? 20000 : 0); const pay = async () => { setPayError(""); const m = window.PAYMENT_METHODS.find((x) => x.id === method) || {}; const tm = TOSS_METHOD[method] || { method: "CARD", label: m.label || "카드" }; const addonLabels = addonList.filter((a) => selAddons.includes(a.id)).map((a) => a.label); // ── 계좌이체: 결제창 없이 예약 신청(대기) → 관리자 송금 확인 후 확정 ── if (method === "transfer") { window.KASHADB.addReservation({ name: order.name, phone: order.phone, email: order.email, pkg: pkg.name, date: order.date, time: order.time, place: order.place, amount: total, paid: false, status: "대기", addons: addonLabels, seed: pkg.seed, method: "TRANSFER", methodLabel: "계좌이체", memo: "계좌이체 입금 대기", }); setReceipt({ transfer: true }); notifyBooking(pkg.name, order.phone, total, "계좌이체 접수"); window.KASHANotify.send("received", { email: order.email, name: order.name, pkg: pkg.name, date: order.date, time: order.time, place: order.place, amount: total }); window.KASHASuccess.show({ title: "예약 신청 완료", message: "입금 확인 후 예약이 확정돼요." }); setDone(true); return; } // ── 카드결제·토스페이·네이버페이: 결제창으로 이동 → 승인 → 예약 확정 ── const tx = window.KASHADB.createPayment({ orderName: pkg.name + " 촬영", amount: total, method: tm.method, methodLabel: tm.label, customerName: order.name, customerPhone: order.phone, }); // 실제 토스 리다이렉트 복귀 시 예약 생성을 위한 주문 정보 const orderObj = { pkgId: pkg.id, pkgName: pkg.name, seed: pkg.seed, name: order.name, phone: order.phone, email: order.email, place: order.place, date: order.date, time: order.time, amount: total, addons: addonLabels, method: tm.method, methodLabel: tm.label, }; setPaying(true); try { const result = await window.KASHAPay.requestPayment({ orderId: tx.orderId, orderName: tx.orderName, method: tm.method, methodLabel: tm.label, amount: { currency: "KRW", value: total }, customerName: order.name, }, orderObj); if (result && result.redirecting) return; // 실제 토스 결제창으로 이동 중(페이지 전환) // 목업 결제 승인됨 → 예약 확정 window.KASHADB.addReservation({ name: order.name, phone: order.phone, email: order.email, pkg: pkg.name, date: order.date, time: order.time, place: order.place, amount: total, paid: true, status: "확정", addons: addonLabels, seed: pkg.seed, orderId: tx.orderId, paymentKey: result.paymentKey, method: tm.method, methodLabel: tm.label, }); setReceipt(result); notifyBooking(pkg.name, order.phone, total, "결제 완료"); window.KASHANotify.send("paid", { email: order.email, name: order.name, pkg: pkg.name, date: order.date, time: order.time, place: order.place, amount: total, method: tm.label, orderId: tx.orderId, paymentKey: result.paymentKey, approvedAt: window.KASHADB.fmtApprovedAt(result.approvedAt) }); window.KASHASuccess.show({ title: "결제가 완료되었어요", message: `${pkg.name} 촬영 예약이 확정되었어요.` }); setDone(true); } catch (e) { setPayError((e && e.message) || "결제에 실패했어요. 다시 시도해 주세요."); } finally { setPaying(false); } }; if (done) { const isTransfer = receipt && receipt.transfer; return (

{isTransfer ? "예약 신청이 접수되었어요" : "예약이 완료되었어요"}

{isTransfer ? <>{order.name || "고객"}님, 아래 계좌로 입금해 주세요.
입금이 확인되면 예약이 확정돼요. : <>{order.name || "고객"}님, {pkg.name} 촬영 예약이 확정되었어요.
확인 문자를 보내드렸어요.}

{isTransfer && (
)} {receipt && !isTransfer && (
)}
); } return (

결제

{/* Left: details */}
{/* Booking summary */}
{pkg.name} {pkg.popular && 인기}
{order.date} · {order.time}
{order.place}
{/* Add-ons */}
{addonList.map((a) => { const on = selAddons.includes(a.id); return ( ); })}
{/* Payment method */}
{window.PAYMENT_METHODS.map((m) => { const on = method === m.id; return ( ); })}
결제하기를 누르면 토스페이먼츠 결제창이 열려요. 카드·간편결제 정보는 결제창에서 안전하게 입력해요.
{/* Right: order summary (sticky) */}

결제 금액

setCoupon(e.target.value)} style={{ flex: 1 }} />
{addonTotal > 0 && } {applied > 0 && }
총 결제금액 {won(total)}원
setAgree((a) => ({ ...a, terms: v }))} label="이용약관 동의 (필수)" /> setAgree((a) => ({ ...a, privacy: v }))} label="개인정보 수집·이용 동의 (필수)" />
{payError &&

{payError}

}

토스페이먼츠로 안전하게 결제돼요 · 예약일 7일 전까지 100% 환불
); } function Section({ title, children }) { return (

{title}

{children}
); } function Row({ label, value, strong, accent }) { return (
{label} {value}
); } window.PaymentScreen = PaymentScreen;