커뮤니티·지원
목차
< 용어사전으로 돌아가기

결제창 대표이미지

온라인 쇼핑을 마치고 '결제하기'를 눌러서 결제수단을 선택하고, 결제 정보를 입력하는 화면으로 이동한 적 있으시죠? 이런 화면이 바로 결제창이에요. 결제창은 고객이 결제수단을 선택, 인증하고 결제를 완료하는 화면이에요.

토스페이먼츠는 두 가지 결제 솔루션을 제공하고 있어요. 주문서에서 바로 카드 결제창을 호출하는 방법과 토스페이먼츠 결제창에서 카드 결제창을 호출하는 방법이에요.

주문서에서 결제수단 선택하기

토스페이먼츠 결제위젯 과정

고객이 주문서 페이지에서 결제수단을 선택하면, 선택한 카드사·간편결제사의 결제창이 바로 나와요. 예를 들어 주문서 페이지에서 현대카드를 선택하면, 현대카드 결제창이 바로 나와요. 토스페이먼츠에서는 이런 결제창을 '자체창' 이라고 부릅니다.

자체창을 사용하려면 주문서 페이지에서 카드, 할부 개월을 선택하고 이용약관 동의를 받는 UI가 있어야 돼요. 사용하는 결제수단의 자체창을 각각 연동해야 되는 번거로움도 있어요. 대신 PG사가 고객에게 노출되지 않아서 결제 경험이 간결하고 브랜드의 일관성을 지킬 수 있다는 게 장점이에요.

이렇게 보통 주문서 내 결제영역을 만들고 싶다면 기획, 디자인, 개발을 직접해야 되는데요. 토스페이먼츠 결제위젯을 사용하면 토스페이먼츠만에서 수많은 상점을 분석해서 만든 최적의 주문서 결제 UI와 결제 영역을 노코드로 운영할 수 있어요. 또한 결제위젯은 한번 연동하면 카드, 간편결제는 물론, 가상계좌, 계좌이체, 상품권 결제 등 모든 결제 수단을 사용할 수 있어요.

토스페이먼츠 결제위젯 연동하기

결제창에서 결제수단 선택하기

토스페이먼츠 결제창 과정

주문서 대신 PG 결제창에서 고객이 결제수단을 선택할 수도 있어요. 토스페이먼츠 결제창에서 고객이 카드·간편결제를 선택하면 선택한 카드사·간편결제사의 결제창으로 이동해요. 주문서에서 결제수단을 선택하는 것보다 결제 단계가 하나 늘어나는 것과 같죠. 예를 들어 고객이 주문서 페이지에서 '결제하기'를 누르면, 토스페이먼츠 결제창에서 현대카드를 선택해야 현대카드 결제창(자체창)이 열려요.

토스페이먼츠 결제창은 다양한 카드, 간편결제를 지원해요. 카드 결제에 적용되는 무이자 할부, 즉시 할인 프로모션도 토스페이먼츠에서 자동으로 설정해줘서 편리해요. 하지만 결제수단 순서를 바꾸거나 카드 프로모션을 커스터마이징할 수 없고, 카드·간편결제만 지원해서 가상계좌, 계좌이체 등 더 많은 결제수단을 사용하고 싶다면 따로 연동해야 돼요.

토스페이먼츠 결제창 연동하기

기타 결제창

카드·간편결제 외에 다른 결제수단으로 결제할 때 사용되는 토스페이먼츠 결제창이에요.

계좌이체 결제창

계좌이체 결제창 예시 이미지

가상계좌 발급창

결제창은 아니지만 가상계좌로 결제하기 위해 계좌를 발급하는 창이에요.

가상계좌 발급창 예시 이미지

휴대폰 결제창

휴대폰 결제창 예시 이미지

자동결제 등록창

자동결제창 예시 이미지

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