Route
/payments/[paymentId]결제 상세/영수증사용자 모바일 · P0Payment scaffoldP0 31/70
/payments/[paymentId]
결제 상세/영수증
Toss sandbox 연결 전 결제·환불·쿠폰 상태 화면
결제 성공/실패/환불/쿠폰·포인트 화면은 상태머신에 맞춰 먼저 나누고, 실제 결제키는 계정 수령 후 주입합니다.
서툰 우리의 옆자리Concept C — Social Event
안전한 결제/혜택 흐름
결제 화면은 신뢰 우선, 쿠폰과 포인트는 이벤트 참여 혜택처럼 보조한다.
결제 상세
영수증과 결제 상태를 확인합니다
결제 상세는 영수증, 상태 기록, 환불 이동을 한 줄 흐름으로 이어줍니다.
상세 확인공식 로고 반영카드 정보 보관 안 함
서툰 우리의 옆자리결제 금액79,000원ASBU 금요일 디너
04 결제 상세
영수증과 상태 기록
결제 금액과 처리 상태를 분리해 사용자가 문의 전에 필요한 정보를 확인하게 합니다.
상세 확인서버 금액 대조카드 정보 미보관
영수증상태 기록환불률
환불 신청하기
실제 결제창은 고객 결제 계정 연결 후 열립니다.
영수증
영수증 확인 위치를 먼저 둡니다.
상태 기록
승인·취소·환불 처리 상태를 시간순으로 보여줍니다.
환불 기준
환불 신청 가능 여부를 정책 문구와 함께 연결합니다.
ASBU TICKET영수증
결제 금액79,000원
- 항목
- ASBU 금요일 디너
- 상태
- 상세 확인
안전 결제 확인
결제 기록과 환불 기준을 함께 봅니다
영수증, 승인 상태, 환불 요청 시점 기준의 예상 환불률을 한 카드에서 확인합니다.
- 영수증 링크결제 흐름 확인 정보
- 환불률 미리보기결제 흐름 확인 정보
- 환불 신청 이동결제 흐름 확인 정보
입력 정보
상세 확인 항목
결제 상세에서는 원문 결제 정보 대신 사용자에게 필요한 상태와 이동 버튼만 노출합니다.
- 주문 ID비공개 · 필수
- 결제 금액숫자 · 필수
Template family
paymentFlow
Toss sandbox key 및 운영 정책 대기
01PaymentRow
02Amount summary
03Result state
04ConfirmDialog
UI primitives
공통 컴포넌트 슬롯
MobileShellPageHeaderPaymentRowSummaryCardStatusBadgeConfirmDialog
State contract
로딩·빈값·오류·차단·주요 행동
디자인과 실데이터를 기다리는 동안에도 모든 route가 같은 실패/대기/빈값 골격을 유지하도록 화면별 상태 계약을 고정합니다.
Loading
결제 상세/영수증 불러오는 중
결제 상세/영수증 화면은 사용자 데이터와 공통 primitive 계약을 동시에 기다리는 로딩 상태를 노출합니다.
Empty
결제 상세/영수증에 표시할 항목이 없습니다
실제 사용자 데이터가 비어 있어도 레이아웃이 무너지지 않도록 안내문과 다음 행동을 유지합니다.
Error
결제 상세/영수증 데이터를 확인하지 못했습니다
실제 계정·정책·결제 연동 전에는 외부 요청을 만들지 않고, 재시도·문의·뒤로가기 위치만 계약으로 고정합니다.
Blocked
결제 상세/영수증 고객 입력 대기
brandSkin, tossAccount, pricePolicy, refundPolicy, firebaseProject 항목이 확정되기 전까지 디자인과 실데이터를 잠그지 않습니다.
Success
결제 상세/영수증이 완료됐어요
결제, 환불, 쿠폰, 포인트 흐름을 이어서 확인할 수 있습니다. 다음 단계는 환불 신청에서 이어서 확인할 수 있어요.
Primary action
결제 상태 흐름 확인/refunds/newcustomer input requiredRequired data
paymentIntentpricePolicyrefundPolicyprimitive:MobileShellprimitive:PageHeaderprimitive:PaymentRowprimitive:SummaryCardprimitive:StatusBadgeprimitive:ConfirmDialog
Customer input
brandSkintossAccountpricePolicyrefundPolicyfirebaseProject
Next routes
/refunds/new/meAction/Form contract
버튼·폼·상태전이 바인딩
`screen-action-contract.json` 기준 primary CTA, form field, 상태전이, provider 차단, audit requirement를 화면에 직접 표시합니다. 현재 경계는 fixture-only-no-provider-call이며 no provider calls before customer accounts 정책을 유지합니다.
Primary CTA
결제 상태 흐름 확인
결제 상세/영수증 화면의 주 CTA를 submitForm contract로 고정합니다.
submitForm결제 상태 흐름 확인/refunds/newProvider block
no-provider-call-before-customer-accounts
Firebase·Toss·Storage·Auth production call은 고객 계정 수령 전까지 차단합니다.
Toss PaymentsCloud Firestore
Audit requirement
audit log not required
none
none결제 상태 흐름 확인을 누르면 결제 또는 혜택 확인으로 자연스럽게 이어집니다.
잠시만 기다리면 결제 상세/영수증 상태가 화면에 정리됩니다.
결제, 환불, 쿠폰, 포인트 흐름을 이어서 확인할 수 있습니다. 다음 단계는 환불 신청에서 이어서 확인할 수 있어요.
입력한 내용과 화면 안내를 확인한 뒤 결제 상태 흐름 확인을 다시 눌러 주세요.
결제 정책과 혜택 운영 기준 확인이 필요합니다. 준비되면 결제 상태 흐름 확인을 다시 진행할 수 있습니다.
사용자가 primary action을 실행합니다.
외부 provider 호출 없이 fixture 성공 상태를 표시합니다.
검증/fixture 오류 상태를 표시합니다.
고객 로고/계정/정책 blocker가 남아 있으면 blocked 상태를 유지합니다.
필수 입력이 해결되면 기본 상태로 돌아갑니다.
Fixture interaction runner
role·CTA·form·provider·audit 시뮬레이션
실 provider 호출 없이 primary CTA, role decision, form submit, state transition, audit requirement를 fixture-only로 점검합니다.
Role access
user6 denied rolesPrimary flow
결제 상태 흐름 확인/refunds/newForm submit
submitFixture2 required fields provided by fixtureAudit/provider
audit not required2 blocked providers, 0 callsFixture payload
화면별 최소 DTO preview
실제 Firebase/Toss/정책 원문 대신 사용할 최소 payload입니다. 화면 구조와 DTO 슬롯을 먼저 맞추고, 고객 계정·정책 수령 후 실제 데이터로 교체합니다.
Payload contract
paymentFlowpayload-payments-payment-idpaymentSummary
결제 상세/영수증 화면에 표시할 최소 payment fixture payload입니다. 실제 provider 호출 없이 layout과 DTO 슬롯만 확인합니다.
route-payments-payment-id-fixture금액
환불 정책
데모 결제건
Toss 실제 호출 전 금액/상태 표시
amount:79000method:fixtureprovider:no-call
Form fields
주문 ID · hidden · required결제 금액 · number · required
toss-sandbox-needed
idempotency planned
no raw card data