가이드/결제 연동하기/이해하기
목차

Version 2

링크 복사결제 이해하기

주문서형 결제, 결제창형 결제, 자체창형 결제 중 우리 서비스에 맞는 연동 방식을 선택하세요.

링크 복사결제 화면 이해하기

구매자는 온라인에서 결제할 때 두 화면을 지나요. 주문서에서 개인정보와 배송지를 입력하고 상품과 금액을 확인한 다음, 결제창에서 결제수단을 선택하고 인증해요.

상품 선택주문서결제창결제 완료
비교 항목주문서결제창
언제 만나나요상품을 고르고 '구매하기'를 누른 다음이에요주문서에서 '결제하기'를 누른 직후에 열려요
무엇을 하는 화면인가요개인정보・배송지를 입력하고 상품과 금액을 확인해요결제수단을 선택하고 인증해요
구매자가 하는 일배송지 입력, 쿠폰 적용, '결제하기' 클릭카드 선택, 카드 정보 입력, 앱카드・간편결제 인증

토스페이먼츠의 연동 방식은 결제 UI를 어느 화면에, 어떻게 보여주는지에 따라 나뉘어요.

링크 복사연동 방식 선택하기

주문서형 결제와 결제창형 결제는 토스페이먼츠가 수많은 상점을 분석해 만들어 둔 결제 UI를 그대로 가져다 쓰는 방식이에요. 결제 UI를 직접 개발하지 않아도 되고, 카드, 간편결제부터 브랜드페이, PayPal 같은 확장 결제수단까지 하나의 연동으로 사용할 수 있어요. 반면 자체창형 결제는 결제 UI를 직접 만들어 카드사・간편결제사 자체창을 여는 방식이에요. 개발 공수는 더 들지만, 우리 서비스에 맞게 결제 경험을 자유롭게 설계할 수 있어요.

결제 방식 선택 다이어그램

비교 항목주문서형 결제 추천결제창형 결제자체창형 결제
추천 상황결제 전환율을 높이고 싶은 팀빠른 도입과 최소 변경을 원하는 팀카드사・간편결제사 결제창을 바로 열고 싶은 팀
구매자 경험주문서에서 결제수단과 혜택을 바로 확인하고 결제까지 이어져요결제하기 버튼을 누르면 결제창이 팝업으로 열려요결제하기 버튼을 누르면 카드사・간편결제사 자체창이 곧바로 열려요
개발 포인트주문서 페이지에 결제 UI 영역을 추가해요결제하기 버튼에 결제창 호출을 연결해요결제 UI를 직접 만들고 결제수단별로 자체창 호출을 연결해요
운영 포인트어드민에서 노코드로 운영하며, 디자인·프로모션 적용 등 주문서 경험을 최적화해요.어드민에서 노코드로 운영하며, 디자인·프로모션 적용 등 주문서 경험을 최적화해요.결제수단 추가・디자인 변경을 직접 개발해요. 어드민은 제공하지 않아요.
최초 연동 공수2주일2주일1~2개월
개선 공수5분 (개발 없이 가능)5분 (개발 없이 가능)직접 개발 필요

주문서형 결제 미리보기

결제창형 결제 미리보기

자체창형 결제 미리보기

원하는 방식을 골랐다면 연동 가이드로 이동하세요.

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

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

주문서형, 결제창형 결제에 다양한 결제수단과 기능을 함께 연동할 수 있어요.


링크 복사연동 시작하기

주문서형, 결제창형 결제는 아래 과정으로 시작해요. 자체창형은 자체창 연동하기 가이드를 바로 따라가면 돼요.

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

토스페이먼츠에 로그인하고 상점관리자의 결제 UI 설정 메뉴에서 결제서비스를 추가하고 디자인 및 기능을 변경하세요. 계약 전이라면 어드민을 미리 체험해볼 수 있어요.

결제 어드민 체험하기

상점관리자 결제 어드민

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

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

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

결제 UI의 variantKey 확인

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

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

아직 계약 전이라면 샌드박스에서 실제 결제 없이 연동 흐름을 미리 체험해보세요.

샌드박스로 시작하기


링크 복사자주 묻는 질문