가이드/결제위젯/어드민 설정하기
목차

Version 2

새로 나온

토스페이먼츠와 전자결제 계약을 완료했으면 결제위젯 어드민에서 결제 UI를 커스터마이징할 수 있어요.

결제위젯은 최초 1회 개발 연동이 끝나면 추가 개발 없이 어드민에서 결제수단을 추가하고, UI 디자인을 수정할 수 있어요. 라이브, 테스트 결제위젯 연동 키를 사용하는 방법은 API 키 가이드에서 확인하세요.

결제위젯 어드민

결제 UI 설정

결제위젯은 , 브랜드페이, 해외 간편결제 서비스를 지원해요. 각 결제서비스에는 상점아이디(MID)란 고유 아이디가 부여돼요. 결제서비스와 MID는 1:1 관계로 생성돼요. 예를 들어, 일반결제와 브랜드페이 결제서비스를 계약했다면 총 2개의 MID가 발급돼요.

하나의 결제 UI에는 다양한 MID의 결제서비스를 추가할 수 있어요. 예를 들어, 하나의 결제 UI에 일반결제, 브랜드페이 결제서비스를 둘 다 노출시키는 방법이에요. 각 결제 UI에 하나의 MID를 1:1로 연결시킬 수도 있어요. 새로운 결제 UI를 만들고 연동할 때 해당 UI의 variantKey를 파라미터로 설정하세요.

결제 UI에 서비스 추가하기

하나의 결제 UI에 2개 이상의 결제서비스를 추가할 수 있어요.

  1. 결제 UI 설정 메뉴에서 이용서비스를 추가할 UI 환경에 이용서비스 > 추가하기를 선택하세요.
    결제 UI에 서비스 추가하기 1
  2. 팝업창에서 사용하고 싶은 서비스를 활성화한 다음에 해당 서비스용 상점아이디(MID)를 선택하고 저장하기를 누르세요.
    결제 UI에 서비스 추가하기 2
  3. 결제 UI에 서비스가 추가된 것을 확인할 수 있어요. 이용서비스 위에 마우스를 올리면 연결된 상점아이디(MID)가 보여요.
    결제 UI에 서비스 추가하기 3
  4. 결제위젯 연동 키연동을 시작하세요.

새로운 결제 UI 추가하기

결제 UI를 여러 개 만들고 상황에 따라 다르게 노출하고 싶을 때는 새로운 결제 UI를 추가하세요. MID별로 다른 결제 UI를 만들거나, 계정이나 상품별로 다른 결제수단을 보여주는 등 조건에 따라 구매자에게 다른 UI를 보여줄 수 있어요.

  1. 결제 UI 설정 메뉴에서 UI 추가하기 버튼을 누르세요.
    새로운 결제 UI 추가하기 1
  2. 새로운 UI에 추가하고 싶은 결제 서비스를 모두 선택하고 다음을 누르세요.
    새로운 결제 UI 추가하기 2
  3. 선택한 서비스에 계약된 상점아이디(MID)가 2개 이상이라면, 해당 결제 UI에 사용할 MID를 선택하는 화면이 나와요.
    새로운 결제 UI 추가하기 3
  4. 새로운 UI에 사용할 베리언트 키(variantKey) 값을 입력하고 설정하기를 누르면 결제 UI가 추가돼요.
    새로운 결제 UI 추가하기 4
  5. 연동하고 싶은 결제 UI의 variantKey를 복사하세요.
    새로운 결제 UI 추가하기 5
  6. 결제위젯 연동 키연동을 시작하세요. renderPaymentMethods() 메서드에 variantKey 파라미터를 설정하세요.

UI 세부 설정

각 결제 UI를 다르게 커스터마이징할 수 있어요. 결제위젯 어드민의 디자인 및 기능 메뉴에 있는 설정을 소개합니다.

디자인

결제수단을 3열 또는 2열로 보여주세요. 최상단 강조는 기능 > 결제수단 목록의 첫 번째 결제수단을 강조해요.

토스페이먼츠 결제수단 레이아웃

기능

구매자에게 제공할 결제수단을 선택하세요. '+ 추가하기'를 누르면 직연동, 커스텀 결제수단, 카드사 노출 등 결제위젯 Pro 기능을 설정할 수 있어요. 결제수단 설명도 Pro 기능입니다.

토스페이먼츠 결제위젯 결제수단 설정

약관 설정

결제 이용약관을 여러 개 만들고 상황에 따라 다르게 노출할 수 있어요. 예를 들어, 해외결제를 사용하고 있다면 구매자에게 영문 이용약관을 보여주세요.

상점관리자 > 결제위젯 > 약관 설정 메뉴에서 새로운 이용약관을 추가할 수 있어요.

이용약관 추가

새로 추가한 이용약관을 연동하려면 이용약관을 렌더링하는 renderAgreement()에 위에 설정한 variantKey를 넣으세요. 키값을 넣지 않으면 기본 국문 UI가 렌더링됩니다. 결제 UI의 variantKey와 독립적으로 사용됩니다.

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