Version 2
새로 나온토스페이먼츠와 전자결제 계약을 완료했으면 결제위젯 어드민에서 결제 UI를 커스터마이징할 수 있어요.
결제위젯은 최초 1회 개발 연동이 끝나면 추가 개발 없이 어드민에서 결제수단을 추가하고, UI 디자인을 수정할 수 있어요. 라이브, 테스트 결제위젯 연동 키를 사용하는 방법은 API 키 가이드에서 확인하세요.
결제위젯은 국내 일반결제, 브랜드페이, 해외 간편결제 서비스를 지원해요. 각 결제서비스에는 상점아이디(MID)란 고유 아이디가 부여돼요. 결제서비스와 MID는 1:1 관계로 생성돼요. 예를 들어, 일반결제와 브랜드페이 결제서비스를 계약했다면 총 2개의 MID가 발급돼요.
하나의 결제 UI에는 다양한 MID의 결제서비스를 추가할 수 있어요. 예를 들어, 하나의 결제 UI에 일반결제, 브랜드페이 결제서비스를 둘 다 노출시키는 방법이에요.
각 결제 UI에 하나의 MID를 1:1로 연결시킬 수도 있어요. 새로운 결제 UI를 만들고 연동할 때 해당 UI의 variantKey
를 파라미터로 설정하세요.
하나의 결제 UI에 2개 이상의 결제서비스를 추가할 수 있어요.
- 결제 UI 설정 메뉴에서 이용서비스를 추가할 UI 환경에 이용서비스 > 추가하기를 선택하세요.
- 팝업창에서 사용하고 싶은 서비스를 활성화한 다음에 해당 서비스용 상점아이디(MID)를 선택하고 저장하기를 누르세요.
- 결제 UI에 서비스가 추가된 것을 확인할 수 있어요. 이용서비스 위에 마우스를 올리면 연결된 상점아이디(MID)가 보여요.
- 결제위젯 연동 키로 연동을 시작하세요.
결제 UI를 여러 개 만들고 상황에 따라 다르게 노출하고 싶을 때는 새로운 결제 UI를 추가하세요. MID별로 다른 결제 UI를 만들거나, 계정이나 상품별로 다른 결제수단을 보여주는 등 조건에 따라 구매자에게 다른 UI를 보여줄 수 있어요.
- 결제 UI 설정 메뉴에서 UI 추가하기 버튼을 누르세요.
- 새로운 UI에 추가하고 싶은 결제 서비스를 모두 선택하고 다음을 누르세요.
- 선택한 서비스에 계약된 상점아이디(MID)가 2개 이상이라면, 해당 결제 UI에 사용할 MID를 선택하는 화면이 나와요.
- 새로운 UI에 사용할 베리언트 키(
variantKey
) 값을 입력하고 설정하기를 누르면 결제 UI가 추가돼요. - 연동하고 싶은 결제 UI의
variantKey
를 복사하세요. - 결제위젯 연동 키로 연동을 시작하세요.
renderPaymentMethods()
메서드에variantKey
파라미터를 설정하세요.
각 결제 UI를 다르게 커스터마이징할 수 있어요. 결제위젯 어드민의 디자인 및 기능 메뉴에 있는 설정을 소개합니다.
구매자에게 제공할 결제수단을 선택하세요. '+ 추가하기'를 누르면 직연동, 커스텀 결제수단, 카드사 노출 등 결제위젯 Pro 기능을 설정할 수 있어요. 결제수단 설명도 Pro 기능입니다.
결제 이용약관을 여러 개 만들고 상황에 따라 다르게 노출할 수 있어요. 예를 들어, 해외결제를 사용하고 있다면 구매자에게 영문 이용약관을 보여주세요.
상점관리자 > 결제위젯 > 약관 설정 메뉴에서 새로운 이용약관을 추가할 수 있어요.
새로 추가한 이용약관을 연동하려면 이용약관을 렌더링하는 renderAgreement()
에 위에 설정한 variantKey
를 넣으세요. 키값을 넣지 않으면 기본 국문 UI가 렌더링됩니다. 결제 UI의 variantKey
와 독립적으로 사용됩니다.