목차

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

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

결제 UI 설정하기

결제위젯 어드민

결제위젯은 최초 1회 개발 연동이 끝나면 추가 개발 없이 어드민에서 결제수단을 추가하고, UI 디자인을 수정할 수 있어요. 상점관리자 > 결제위젯 > 결제 UI 설정에서 결제위젯 어드민을 확인하세요.

  • 라이브 UI는 결제위젯 라이브 클라이언트 키로 연동할 수 있어요. 실제 결제를 받을 때 사용하세요.

  • 테스트 UI는 결제위젯 테스트 클라이언트 키로 연동할 수 있어요. 테스트 환경에서는 실제로 결제가 일어나지 않아요. 테스트 환경 주의점을 살펴보세요.

국내 일반결제 결제수단 추가하기

국내 일반결제를 사용한다면 기능 > 결제수단 목록에서 원하는 결제수단을 바로 추가할 수 있어요.

퀵계좌결제 설정

이용서비스 추가하기

결제 UI에 추가할 수 있는 서비스는 다음과 같습니다. 각 서비스를 단독으로 사용하거나 같이 사용할 수 있어요. 브랜드페이, 키인 결제, 해외 간편결제는 추가 계약이 필요해요.

서비스설명
국내 일반결제카드, 간편결제, 가상계좌, 퀵계좌결제(계좌이체) 등 모든 결제수단을 사용할 수 있어요.
브랜드페이브랜드페이는 자체 간편결제를 구현할 수 있는 서비스입니다. 구매자가 카드나 계좌 정보를 한 번만 등록하면 다음부터는 간편하게 결제가 가능해요.
키인(수기입력) 결제카드 번호만으로 간단히 결제하거나 법인카드와 같이 고객 명의로 발급되지 않은 카드로 결제하고 싶을 때 사용해요.
해외 간편결제PayPal 해외 간편결제로 해외 구매자에게 결제를 받으세요. PayPal은 전 세계 200여 개 국가, 4억 명 이상이 이용하는 세계 최대의 글로벌 간편결제입니다.

이용서비스 결제위젯

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

멀티 결제 UI

결제 UI를 여러 개 만들고 상황에 따라 다르게 노출하고 싶을 때는 멀티 결제 UI 기능을 사용하세요. 계정이나 상품별로 다른 결제수단을 보여줄 수 있어요.

토스페이먼츠 결제위젯 멀티 결제 UI

결제 UI 추가하기

멀티 결제 UI

  1. 결제 UI 설정 메뉴에서 UI 추가하기 버튼을 누르세요.
  2. 새로운 UI에 추가하고 싶은 결제 서비스를 모두 선택하세요.
  3. 선택한 서비스에 계약된 상점아이디(MID)가 2개 이상이면, 결제 UI에 사용할 상점아이디를 선택하는 화면이 보입니다.
  4. 멀티 결제 UI를 렌더링할 때 필요한 variantKey 값을 입력하세요.
  5. 다시 결제 UI 설정 화면에서 추가된 결제 UI를 확인할 수 있어요.

연동하기

새로 추가한 결제 UI를 연동하려면 결제위젯을 렌더링하는 renderPaymentMethods()에 위에 설정한 variantKey를 넣으세요. 키값을 넣지 않으면 기본 UI가 렌더링됩니다.

paymentWidget.renderPaymentMethods(
"#payment-method",
{ value: 10000 },
{ variantKey: "widgetA" }
)
JavaScript

이용약관

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

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

이용약과 추가

이용약관 UI 연동하기

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

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

UI 커스터마이징

결제 UI 설정 메뉴에서 커스터마이징하고 싶은 결제 UI를 선택하세요. 결제수단 레이아웃, 강조색, 결제수단 목록, 프로모션 배지 등 다양한 디자인 및 기능을 자유롭게 변경할 수 있어요.

어드민 체험하기

디자인

강조색, 결제수단 레이아웃 등 디자인을 자유롭게 변경하세요.


기능

결제수단 목록, 가상계좌 설정, 이메일 입력 필드 기능을 자유롭게 변경하세요.

결제수단별 설명, 프로모션 텍스트, 특정 카드사 강조 등 일부 기능은 결제위젯 Pro 플랜으로 사용할 수 있어요.

  • 더 궁금한 내용이 있나요?
  • 코드 샘플을 참고하세요
  • 기술지원이 필요한가요?
    디스코드 채팅|이메일 보내기