이해하기
결제위젯이란?
결제위젯은 토스페이먼츠만의 기본 결제서비스로, 수많은 상점을 분석해서 만든 최적의 주문서 결제 UI예요. 결제 영역을 노코드로 운영할 수 있는 어드민도 상점관리자에서 제공해요.
최초 1회 개발 연동이 끝나면 코드 없이 결제수단을 추가하고, UI 디자인을 쉽게 수정할 수 있어요.
결제위젯 체험하기
오른쪽 화면은 결제위젯의 기본 설정값이 적용된 모바일 화면이에요. 어드민에서는 더 다양한 기능을 적용하고, 디자인을 편집할 수 있어요.
어드민에서 제공하는 모든 기능을 만나보세요.
어드민 체험하기 >결제위젯을 사용해야 하는 이유
1️⃣ 높은 구매 전환율
구매자의 결제 과정에서 PG사 제공 화면을 없애면 구매 전환율이 더 높아져요. 다음과 같은 장점 때문이에요.
- 이동하는 화면의 수가 줄면 구매자의 결제 시간, 이탈률도 줄어요.
- PG사가 노출되지 않아서 일관된 브랜딩이 가능해요.
- 주문서에서 바로 사용 가능한 결제수단, 구매 혜택을 안내할 수 있어요.
이런 주문서를 만들기 위해서는 개발 및 디자인 전문 인력이 필요해요. 그래서 토스페이먼츠가 대신 만들어드려요. 결제위젯으로 내 상점만의 최적의 주문서를 최소한의 코드로 만들어 보세요.
2️⃣ 코드 없는 운영
디자인, 개발 전문 인력이 없어도 어드민에서 자유롭게 주문서의 결제 영역을 수정할 수 있습니다. 테마, 결제수단 목록, 레이아웃 등 다양한 옵션을 직접 커스터마이징하세요.
3️⃣ 간편한 연동
브라우저 스크립트에 결제위젯 SDK를 추가하면 바로 SDK 메서드를 사용할 수 있습니다. 더 자세한 설치 가이드는 결제위젯 JavaScript SDK에서 확인하세요.
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
어드민 기능
코드 없이 UI에서 자유롭게 수정할 수 있는 결제위젯 어드민을 제공해요.
결제수단
- 결제수단: 카드, 가상계좌, 계좌이체, 휴대폰, 상품권, 간편결제를 지원합니다.
- 레이아웃: 결제수단은 버튼으로 표시됩니다. 버튼 레이아웃을 변경할 수 있습니다.
- 디자인: 결제위젯 컴포넌트의 색상, 크기, 테두리 등 디자인을 자유롭게 변경할 수 있습니다.
더 자세한 결제수단 연동 가이드는 결제위젯 JavaScript SDK에서 확인하세요.
가상계좌
- 환불 계좌: 결제위젯에서 고객의 환불 계좌 은행, 예금주, 계좌번호를 입력받을 수 있습니다.
- 입금기한: 가상계좌 입금기한을 자유롭게 설정할 수 있습니다.
결제 연동 과정에서 환불 계좌 정보를 확인하는 방법을 알아보세요.
프로모션
프로모션 혜택을 강조해서 구매 전환율을 높일 수 있습니다.
- 프로모션 배지: 결제수단 버튼에 프로모션 배지를 추가할 수 있습니다.
- 카드사 노출: 특정 카드사를 버튼으로 노출할 수 있습니다.
- 프로모션 안내: 무이자 할부 및 프로모션 안내를 주문서에서 바로 확인할 수 있고, 내용을 별도로 관리할 필요가 없습니다.
어드민 체험하기에서 직접 프로모션 영역을 커스터마이징하세요.
이용약관
완성된 약관으로 법적인 리스크를 줄이고, 개발 비용을 절약합니다.
- 이용약관 UI: 이용약관 체크박스 스타일, 약관 순서를 설정할 수 있습니다.
- 상점 추가 이용약관: PG 필수 이용약관을 제공합니다. 내 상점의 필수 이용약관, 회원·비회원 이용약관도 직접 추가할 수 있습니다.
더 자세한 사용 방법은 결제위젯 이용약관 메서드를 확인하세요.
자주 묻는 질문
호스팅 이용 가맹점은 아직 결제위젯을 이용할 수 없어요. 하지만 일부 호스팅사와 결제위젯을 지원하는 방향으로 협의하고 있으니 조금만 기다려주세요.
결제위젯 연동이 더 쉽고, 공수도 적게 들어요. 결제위젯은 한번에 모든 결제수단(카드, 간편결제, 가상계좌 등)을 연동할 수 있어요. 서버 개발에 드는 공수는 결제창과 비슷하지만, 클라이언트 개발 공수와 운영 비용은 결제위젯이 훨씬 적어요. 결제위젯을 쓰면, 코드 없이 어드민에서 다양한 커스텀(UI 디자인, 프로모션, 결제수단별 기능)까지 할 수 있어서 운영이 편해져요.
계약 전에 제공되는 '개발자용 테스트상점' 키로 결제위젯을 연동하면 발생하는 에러입니다. 계약 전에는 아래 테스트 키로 결제위젯을 연동하세요. 커스터마이징 기능은 어드민 체험하기에서 직접해 볼 수 있지만 아래 테스트 키와 연동되지 않습니다.
test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq test_sk_zXLkKEypNArWmo50nX3lmeaxYG5R 토스페이먼츠 결제연동팀(techsupport@tosspayments.com, 디스코드)으로 문의하거나, 상점관리자 > 결제 UI 설정 어드민의 의견 보내기를 통해 알려주세요. 가맹점에서 보내주시는 의견을 적극적으로 제품에 반영하고 있어요.