결제위젯 어드민 사용하기

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

✅ 어드민에서 결제 서비스 및 UI를 관리하는 방법이에요.

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

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

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

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

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

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

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

   paymentWidget.renderPaymentMethods(
     "#payment-method",
     { value: 10000 },
     { variantKey: "DEFAULT" }     // 기본 UI
     // { variantKey: "DEFAULT-2" } // 추가 UI
   )
   

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

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

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

const paymentAgreement = paymentWidget.renderAgreement(
  '#agreement',
  { variantKey: 'AGREEMENT' }
)

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