가이드/결제위젯/이해하기
목차

Version 2

새로 나온

링크 복사결제위젯 이해하기

주문서형, 결제창형 두 가지 방식으로 결제 UI를 연동하세요. 결제수단과 UI 디자인은 노코드로 운영할 수 있어요.

결제위젯은 토스페이먼츠만의 기본 결제서비스로, 수많은 상점을 분석해서 만든 최적의 결제 UI예요. 기존 PG사 결제 화면 대신 구매자가 결제수단과 구매 혜택을 바로 확인할 수 있어서 결제 시간과 이탈률이 줄어요.

주문서에 결제 UI를 바로 보여주는 주문서형과, 결제창을 팝업으로 띄우는 결제창형 중에서 선택할 수 있어요. 카드, 간편결제는 물론 브랜드페이, PayPal 같은 확장 결제수단까지 결제위젯 하나로 연동할 수 있어요. 두 방식 모두 위젯 어드민을 제공해서, 최초 1회 연동 후에는 코드 없이 디자인을 바꾸거나 결제수단을 추가할 수 있어요.

링크 복사결제위젯 연동 방식 한눈에 비교하기

주문서 화면에 결제 UI를 직접 노출할지 먼저 결정하면 방식 선택이 빨라져요.

결제위젯 방식 선택 다이어그램

비교 항목주문서형 추천결제창형
추천 상황결제 전환율을 높이고 싶은 팀빠른 도입과 최소 변경을 원하는 팀
구매자 경험주문서에서 결제수단과 혜택을 바로 확인하고 결제까지 이어져요결제하기 버튼을 누르면 결제창이 팝업으로 열려요
개발 포인트주문서 페이지에 결제 UI 영역을 추가해요결제하기 버튼에 결제창 호출을 연결해요
운영 포인트어드민에서 노코드로 운영하며, 디자인·프로모션 적용 등 주문서 경험을 최적화해요.어드민에서 노코드로 운영하며, 디자인·프로모션 적용 등 주문서 경험을 최적화해요.

주문서형 미리보기

결제창형 미리보기


링크 복사연동하기

링크 복사연동 방식 선택

결제위젯(주문서형)주문서에 결제 UI를 직접 렌더링해요.

링크 복사결제수단 확장하기

결제위젯으로 다양한 결제수단과 기능을 함께 연동할 수 있어요.

링크 복사해외결제

해외 구매자에게 상품을 판매할 때 필요한 결제를 연동하세요.


링크 복사결제위젯 연동 과정

링크 복사1. 상점관리자 결제위젯 어드민

토스페이먼츠에 로그인하고 상점관리자의 결제 UI 설정 메뉴를 확인하세요. 연동하고 싶은 결제 UI의 결제서비스를 추가하고 디자인 및 기능을 변경하세요.

상점관리자 결제위젯 어드민

* 어드민은 토스페이먼츠와 계약을 완료한 뒤에 사용할 수 있어요. 체험하기는 테스트 계정과 연결되지 않습니다.

링크 복사2. 결제 UI의 variantKey 확인

여러 개의 결제 UI를 사용하고 있다면 결제 UI 설정 메뉴에서 연동하고 싶은 variantKey를 복사하세요.

결제 UI의 variantKey 확인

링크 복사3. 연동 방식에 따라 결제위젯 연동

연동 방식을 선택하고 가이드에 따라 결제위젯을 연동하세요. variantKey를 파라미터로 사용해요.

  • 더 궁금한 내용이 있나요?
  • 코드 샘플을 참고하세요
  • 기술지원이 필요한가요?
    실시간 문의|이메일 보내기