Ringkasan pembayaran
Perhentian terakhir sebelum uang keluar — berapa dan kenapa harus muat di satu layar.
Pratinjau langsung
Sumber
<div class="dc-pay">
<header class="dc-pay__bar">
<button class="dc-pay__back" type="button">
<span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
</button>
<h1 class="dc-pay__bartitle">결제하기</h1>
</header>
<div class="dc-pay__body">
<section class="dc-pay__sec">
<h2 class="dc-pay__h2">주문 상품 2개</h2>
<div class="dc-pay__item">
<span class="dc-pay__thumb" aria-hidden="true">🧤</span>
<span class="dc-pay__itxt">
<span class="dc-pay__iname">겨울 작업 장갑 5켤레</span>
<span class="dc-pay__imeta">L 사이즈 · 1개</span>
</span>
<span class="dc-pay__iprice">12,900원</span>
</div>
<div class="dc-pay__item">
<span class="dc-pay__thumb" aria-hidden="true">🥾</span>
<span class="dc-pay__itxt">
<span class="dc-pay__iname">안전화 265mm</span>
<span class="dc-pay__imeta">검정 · 1개</span>
</span>
<span class="dc-pay__iprice">25,900원</span>
</div>
</section>
<section class="dc-pay__sec">
<h2 class="dc-pay__h2">결제 수단</h2>
<button class="dc-pay__pick" type="button">
<span class="dc-pay__picklbl">신한카드 1234 · 일시불</span>
<span class="dc-pay__pickgo" aria-hidden="true">›</span>
</button>
</section>
<section class="dc-pay__sec">
<h2 class="dc-pay__h2">결제 금액</h2>
<dl class="dc-pay__rows">
<div class="dc-pay__row">
<dt class="dc-pay__k">상품 금액</dt>
<dd class="dc-pay__v">38,800원</dd>
</div>
<div class="dc-pay__row">
<dt class="dc-pay__k">배송비</dt>
<dd class="dc-pay__v">3,000원</dd>
</div>
<div class="dc-pay__row dc-pay__row--minus">
<dt class="dc-pay__k">쿠폰 할인</dt>
<dd class="dc-pay__v">-5,000원</dd>
</div>
<div class="dc-pay__row dc-pay__row--minus">
<dt class="dc-pay__k">포인트 사용</dt>
<dd class="dc-pay__v">-800원</dd>
</div>
</dl>
<p class="dc-pay__total">
<span class="dc-pay__tk">총 결제 금액</span>
<span class="dc-pay__tv">36,000원</span>
</p>
</section>
<label class="dc-pay__agree" for="dc-pay-agree">
<input class="dc-pay__check" id="dc-pay-agree" type="checkbox" />
<span class="dc-pay__agreetxt">주문 내용을 확인했고 결제에 동의합니다</span>
</label>
</div>
<div class="dc-pay__bottom">
<button class="dc-pay__go" type="button">36,000원 결제하기</button>
</div>
</div>.dc-pay { display:flex; flex-direction:column; height:660px; overflow:hidden; background:var(--dc-sunken); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); font-family:var(--dc-font); }
.dc-pay__bar { flex:0 0 auto; display:flex; align-items:center; gap:var(--dc-1); padding:calc(var(--dc-safe-top) + var(--dc-2)) var(--dc-2) var(--dc-2); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-pay__back { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-text); font-size:22px; line-height:1; }
.dc-pay__back:active { background:var(--dc-sunken); }
.dc-pay__bartitle { margin:0; font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-pay__body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--dc-3); padding:var(--dc-3); }
.dc-pay__sec { padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); }
.dc-pay__h2 { margin:0 0 var(--dc-3); font-size:14px; font-weight:800; color:var(--dc-text); }
.dc-pay__item { display:flex; align-items:center; gap:var(--dc-3); padding:var(--dc-2) 0; }
.dc-pay__item + .dc-pay__item { border-top:1px solid var(--dc-line); }
.dc-pay__thumb { flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px; border-radius:var(--dc-r-sm); background:var(--dc-sunken); font-size:22px; }
.dc-pay__itxt { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dc-pay__iname { font-size:14px; font-weight:700; line-height:1.4; color:var(--dc-text); }
.dc-pay__imeta { font-size:12px; color:var(--dc-text-mute); }
.dc-pay__iprice { flex:0 0 auto; font-size:14px; font-weight:700; color:var(--dc-text); }
.dc-pay__pick { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); width:100%; min-height:48px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:inherit; font-size:15px; font-weight:600; text-align:left; }
.dc-pay__pick:active { background:var(--dc-sunken); }
.dc-pay__picklbl { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-pay__pickgo { flex:0 0 auto; color:var(--dc-text-mute); font-size:18px; }
.dc-pay__rows { display:flex; flex-direction:column; gap:var(--dc-2); margin:0; }
.dc-pay__row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--dc-3); }
.dc-pay__k { margin:0; font-size:14px; color:var(--dc-text-sub); }
.dc-pay__v { margin:0; font-family:var(--dc-mono); font-size:14px; color:var(--dc-text); }
.dc-pay__row--minus .dc-pay__v { color:var(--dc-ok); }
.dc-pay__total { display:flex; align-items:baseline; justify-content:space-between; gap:var(--dc-3); margin:var(--dc-3) 0 0; padding-top:var(--dc-3); border-top:1px solid var(--dc-line-bold); }
.dc-pay__tk { font-size:15px; font-weight:800; color:var(--dc-text); }
.dc-pay__tv { font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); }
.dc-pay__agree { display:flex; align-items:flex-start; gap:var(--dc-3); min-height:44px; padding:var(--dc-2); }
.dc-pay__check { flex:0 0 auto; width:20px; height:20px; margin-top:2px; accent-color:var(--dc-brand); }
.dc-pay__agreetxt { font-size:13px; line-height:1.6; color:var(--dc-text-sub); }
.dc-pay__fold { border:1px solid var(--dc-line); border-radius:var(--dc-r-sm); background:var(--dc-surface); }
.dc-pay__foldsum { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); min-height:48px; padding:0 var(--dc-3); font-size:14px; font-weight:700; color:var(--dc-text); cursor:pointer; }
.dc-pay__foldbody { padding:0 var(--dc-3) var(--dc-3); }
.dc-pay__bottom { flex:0 0 auto; padding:var(--dc-3) var(--dc-4) calc(var(--dc-safe-bottom) + var(--dc-3)); background:var(--dc-surface); border-top:1px solid var(--dc-line); }
.dc-pay__go { width:100%; min-height:54px; border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-family:inherit; font-size:17px; font-weight:800; }
.dc-pay__go:active { background:var(--dc-brand-hi); }Cara memakainya
- Cantumkan jumlahnya di tombol — "Bayar 36.000 won" mencegah kekeliruan yang tak dicegah "Bayar"
- Total paling besar, rincian lebih kecil — mata harus mendarat di total lebih dulu
- Tulis potongan beserta tandanya, seperti -5.000 won, agar terbaca sebagai pengurangan
- Biarkan metode pembayaran diubah di sini — kartu yang ditolak jangan memaksa orang mundur selayar
Hal yang perlu diwaspadai
- Pakai --dc-mono untuk angka uang agar digitnya tidak bergeser antarbaris
- Beri tombol bayar --dc-safe-bottom — tombol di bawah home bar mudah tertekan dua kali
- Jangan pernah melipat total. Rinciannya boleh dilipat, totalnya selalu terlihat