플랫폼 · Pay

결제

가맹점이 원하는 PG사를 골라 연결하는 ON:GI의 통합 결제 플랫폼입니다. QR 주문 · 앱 · 결제 링크의 결제가 모두 이곳을 거쳐 연결된 PG로 전달되고, 고객은 어떤 PG를 쓰든 같은 화면에서 결제 · 송금합니다. 돈이 오가는 화면이므로 ‘금액이 틀림없다’는 확신을 주는 것이 최우선입니다.

사용자: 결제 · 송금하는 고객 (회원 · 비회원)
기기: 모바일 브라우저 · 앱 웹뷰
기준 해상도: 320 – 480px
도메인: pay.ongi.site

대표 화면 — 결제 · 이용 내역

결제 수단을 바꾸거나 내역 탭을 눌러 보세요.

9:41

결제하기

온기카페 성수점

테이블 12 · 주문 A-142

결제할 금액

14,500원

결제 수단

결제 정보는 암호화되어 안전하게 처리돼요

9:41

이용 내역

총 17건

이번 달 쓴 금액

438,200원

9월 28일 (월)

9월 27일 (일)

기부 · 후원 결제 — 일시 · 정기

단체 QR · 결제 링크로 들어온 후원자가 결제 종류 · 금액 · 주기 · 결제 수단을 한 화면에서 고르고 결제합니다. 결제 수단을 눌러 계좌 · 카드 · 카드 등록(PIN) 흐름을 확인해 보세요.

9:41

온기 나눔센터

결제 종류

어디에 쓰일지 골라 주세요

결제 금액

30,000원

최소 1,000원 · 최대 2,000,000원

응원 메시지

결제 수단

결제 정보는 암호화되어 안전하게 처리돼요

9:41

정기 결제가 등록됐어요

온기 나눔센터에 마음이 전달됐어요

결제 종류: 정기 후원
정기 결제 금액: 30,000원
결제 주기: 매월 25일 · 12개월
결제 수단: 계좌결제
기부금 영수증: 발행 신청 완료
결제 일시: 2026.09.28 14:05

화면 구성

화면	진입	핵심 요소
결제	QR 주문 · 결제 링크 · 앱	가맹점 · 주문 요약 → 34px 금액 → 결제 수단 → 동의 → 하단 고정 CTA
결제 결과	결제 직후	성공: 금액 · 승인 시각 · 영수증 / 실패: 사유 + 다른 수단으로 재시도
송금	하단 탭	받는 사람 → 금액(NumberPad) → 확인 · 일회 송금 / 정기 송금 탭
이용 내역	하단 탭	월 합계 카드 · 전체/결제/송금 세그먼트 · 날짜 그룹 목록
QR 만료	만료된 링크	만료 사유 · 매장에 새 QR 요청 안내 · 홈으로
마이 · 고객지원	상단 우측	회원 정보 · 결제 수단 관리 · 공지 · FAQ · 1:1 문의

플랫폼 토큰

항목	값
data-platform	`"pay"`
밀도	Mobile
기본 컨트롤 높이 (md)	48px
기본 본문 크기	15px
최소 터치 영역	44px
금액 표기	결제 34px · 목록 15px · tabular 숫자 · 단위 ‘원’은 한 단계 작게

핵심 패턴

상황	처리
PG 차이 숨기기	연결된 PG가 달라도 결제 화면 · 문구 · 흐름은 동일. PG사 이름은 영수증 · 실패 사유에만 노출
결제 수단 선택	가맹점에 연결된 PG가 지원하는 수단만 노출. 선택 카드 전체를 누를 수 있게, 선택 시 브랜드 윤곽 + 연한 배경
중복 결제 방지	CTA를 누르면 즉시 로딩 상태로 잠금, 응답 전 재요청 차단
결제 취소 표기	취소 건은 취소선 + 회색. 빨간색(오류)으로 표시하지 않음
충전 · 입금	+ 부호와 브랜드 텍스트 색, 지출은 − 부호와 기본 텍스트 색
송금 확인	받는 사람 이름 · 은행 · 금액을 한 화면에서 다시 확인 후 PIN

금액이 바뀌는 순간을 숨기지 마세요

쿠폰 · 포인트 적용으로 결제 금액이 바뀌면 금액 영역을 짧게 강조하고, CTA 문구의 금액도 함께 바꿉니다.

이렇게 하세요

CTA에 결제 금액을 그대로 표기
보안 안내는 CTA 바로 위 한 줄로
실패 시 입력값 · 선택한 수단 유지

이렇게 하지 마세요

결제 버튼 근처에 광고 · 배너
결제 중 뒤로가기로 이중 결제 유발
지출 금액을 빨간색으로 표시