결제위젯 이해하기
결제위젯이란?
결제위젯은 토스페이먼츠만의 기본 결제서비스로, 수많은 상점을 분석해서 만든 최적의 주문서 결제 UI예요. 결제 영역을 노코드로 운영할 수 있는 어드민도 상점관리자에서 제공해요.
최초 1회 개발 연동이 끝나면 코드 없이 결제수단을 추가하고, UI 디자인을 쉽게 수정할 수 있어요.
코딩 없이 시작하기결제위젯 체험하기
오른쪽 화면은 결제위젯의 기본 설정값이 적용된 모바일 화면이에요. 어드민에서는 더 다양한 기능을 적용하고, 디자인을 편집할 수 있어요.
어드민에서 제공하는 일부 기능을 만나보세요.
어드민 체험하기결제위젯의 장점
높은 구매 전환율
PG 제공 화면을 생략하기 때문에 구매자 결제 시간, 이탈률이 줄어요.
주문서에서 바로 사용 가능한 결제수단, 구매 혜택을 확인할 수 있어요.
코드 없는 운영
까다로운 결제 영역, 코드 변경없이 자유롭게 수정하세요.
어드민에서 디자인, 결제수단 등을 직접 커스터마이징하세요
결제위젯 사용법
1. 상점관리자 결제위젯 어드민
토스페이먼츠에 로그인하고 상점관리자의 결제 UI 설정 메뉴를 확인하세요. 연동하고 싶은 결제 UI의 결제서비스를 추가하고 디자인 및 기능을 변경하세요.
2. 결제 UI의 variantKey 확인
여러 개의 결제 UI를 사용하고 있다면 결제 UI 설정 메뉴에서 연동하고 싶은 variantKey를 복사하세요.
2. 결제위젯 연동
내 상점의 주문서 페이지에 결제위젯을 연동하세요. 결제위젯을 렌더링하는 메서드에 variantKey를 파라미터로 사용하세요.
const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
"#payment-widget",
{ value: price },
{ variantKey: "DEFAULT" }
);
가이드 문서
SDK 문서・샘플 프로젝트
자주 묻는 질문
식스샵에서 결제위젯을 제한적으로 사용할 수 있어요. 자세한 내용은 식스샵으로 문의해주세요. 다른 호스팅사에서는 결제위젯을 지원하지 않아요.
네, 결제위젯을 사용하면 한 번의 연동으로 네이버페이, 카카오페이 등 모든 간편결제 수단을 구매자에게 제공할 수 있어요. 네이버페이는 모든 테스트 키로 연동할 수 있고, 카카오페이는 계약 후 발급받는 내 테스트 키로 연동할 수 있습니다.
결제위젯 연동이 더 쉽고, 공수도 적게 들어요. 결제위젯은 한번에 모든 결제수단(카드, 간편결제, 가상계좌 등)을 연동할 수 있어요. 서버 개발에 드는 공수는 결제창과 비슷하지만, 클라이언트 개발 공수와 운영 비용은 결제위젯이 훨씬 적어요. 결제위젯을 쓰면, 코드 없이 어드민에서 다양한 커스텀(UI 디자인, 프로모션, 결제수단별 기능)까지 할 수 있어서 운영이 편해져요.