결제위젯 이해하기

결제위젯은 토스페이먼츠에서 수많은 상점을 분석하여 만든 최적의 주문서 UI입니다. 개발자가 최초 1회만 연동하면 결제수단 추가, 디자인 수정은 코드 없이 상점관리자만으로 가능해요.

결제위젯은 기본적으로 무료 제품이지만, 더 다양한 기능을 결제위젯 Pro 플랜으로 제공하고 있습니다. 결제위젯 Pro 플랜은 추가 수수료가 부과됩니다.

결제위젯을 사용해야 하는 이유

1️⃣ 높은 구매 전환율

결제 경험에서 PG사 제공 화면을 없애면 아래와 같은 장점이 있어요.

이동하는 화면이 적어져서 고객의 결제 시간, 이탈이 줄어요.
PG사가 노출되지 않아서 일관된 브랜딩이 가능해요.
주문서에서 바로 사용 가능한 결제수단, 구매 혜택을 안내할 수 있어요.

결과적으로 구매 전환율이 더 높지만, 주문서를 잘 만들려면 개발 및 디자인 전문 인력이 필요해요. 그래서 토스페이먼츠가 대신 만들어드려요. 결제위젯으로 내 상점만의 최적의 주문서, 최소한의 코드로 만들어보세요.

2️⃣ 코드 없는 운영

디자인, 개발 전문 인력이 없어도 상점관리자에서 자유롭게 주문서의 결제 영역을 수정할 수 있습니다. 테마, 결제수단 목록, 레이아웃 등 다양한 옵션을 직접 커스터마이징하세요.

3️⃣ 간편한 연동

브라우저 스크립트에 결제위젯 SDK를 추가하면 바로 SDK 메서드를 사용할 수 있습니다. 더 자세한 설치 가이드는 결제위젯 JavaScript SDK에서 확인하세요.

<script src="https://js.tosspayments.com/v1/payment-widget"></script>

HTML

상점관리자 기능

코드 없이 상점관리자에서 자유롭게 수정할 수 있는 결제위젯 기능입니다.

결제수단

결제수단: 카드, 가상계좌, 계좌이체, 휴대폰, 상품권, 간편결제를 지원합니다.
레이아웃: 결제수단은 버튼으로 표시됩니다. 버튼 레이아웃을 변경할 수 있습니다.
디자인: 결제위젯 컴포넌트의 색상, 크기, 테두리 등 디자인을 자유롭게 변경할 수 있습니다.

더 자세한 결제수단 연동 가이드는 결제위젯 JavaScript SDK에서 확인하세요.

가상계좌

환불 계좌: 결제위젯에서 고객의 환불 계좌 은행, 예금주, 계좌번호를 입력받을 수 있습니다.
입금기한: 가상계좌 입금기한을 자유롭게 설정할 수 있습니다.

결제 연동 과정에서 환불 계좌 정보를 확인하는 방법을 알아보세요.

프로모션

프로모션 혜택을 강조해서 구매 전환율을 높일 수 있습니다.

프로모션 배지: 결제수단 버튼에 프로모션 배지를 추가할 수 있습니다.
카드사 노출: 특정 카드사를 버튼으로 노출할 수 있습니다.
프로모션 안내: 무이자 할부 및 프로모션 안내를 주문서에서 바로 확인할 수 있고, 내용을 별도로 관리할 필요가 없습니다.

결제위젯 체험하기에서 직접 프로모션 영역을 커스터마이징하세요.

이용약관

완성된 약관으로 법적인 리스크를 줄이고, 개발 비용을 절약합니다.

이용약관 UI: 이용약관 체크박스 스타일, 약관 순서를 설정할 수 있습니다.
상점 추가 이용약관: PG 필수 이용약관을 제공합니다. 내 상점의 필수 이용약관, 회원·비회원 이용약관도 직접 추가할 수 있습니다.

더 자세한 사용 방법은 결제위젯 이용약관 메서드를 확인하세요.

자주 묻는 질문

Q 카페24, 식스샵과 같은 호스팅사에서 결제위젯을 이용할 수 있나요?

호스팅 이용 가맹점은 아직 결제위젯을 이용할 수 없어요. 하지만 일부 호스팅사와 결제위젯을 지원하는 방향으로 협의하고 있으니 조금만 기다려주세요.

Q 결제위젯 연동 vs 결제창 연동, 어떤 방식으로 개발하는게 더 쉬운가요?

결제위젯 연동이 더 쉽고, 공수도 적게 들어요. 결제위젯은 한번에 모든 결제수단(카드, 간편결제, 가상계좌 등)을 연동할 수 있어요. 서버 개발에 드는 공수는 결제창과 비슷하지만, 클라이언트 개발 공수와 운영 비용은 결제위젯이 훨씬 적어요. 결제위젯을 쓰면, 코드 없이 어드민에서 다양한 커스텀(UI 디자인, 프로모션, 결제수단별 기능)까지 할 수 있어서 운영이 편해져요.

Q '결제위젯을 초기화하지 않은 클라이언트 키입니다. 상점관리자에서 결제위젯 사용을 신청하세요' 에러는 왜 발생하나요?

계약 전에 제공되는 '개발자용 테스트상점' 키로 결제위젯을 연동하면 발생하는 에러입니다. 계약 전에는 아래 테스트 키로 결제위젯을 연동하세요. 커스터마이징 기능은 '상점관리자 체험하기'에서 직접해 볼 수 있지만 아래 테스트 키와 연동되지 않습니다.
clientKey : test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq | secretKey : test_sk_zXLkKEypNArWmo50nX3lmeaxYG5R

Q 필요한 기능을 못 찾겠어요.

토스페이먼츠 기술문의팀(techsupport@tosspayments.com, 디스코드)으로 문의하거나, 상점관리자 > 결제 UI 설정 어드민의 [의견 보내기]를 통해 알려주세요. 가맹점에서 보내주시는 의견을 적극적으로 제품에 반영하고 있어요.