***

title: 결제위젯 이해하기
description: 주문서형, 결제창형 두 가지 방식으로 결제 UI를 연동하세요. 결제수단과 UI 디자인은 노코드로 운영할 수 있어요.
keyword: 결제위젯, UI, 연동, 결제, 위젯, 소개, 네이버페이, 카카오페이
-----------------------------------------------

**Version 2**

새로 나온

# 결제위젯 이해하기

{description}

결제위젯은 토스페이먼츠만의 기본 결제서비스로, **수많은 상점을 분석해서 만든 최적의 결제 UI**예요. 기존 PG사 결제 화면 대신 구매자가 결제수단과 구매 혜택을 바로 확인할 수 있어서 결제 시간과 이탈률이 줄어요.

주문서에 결제 UI를 바로 보여주는 **주문서형**과, 결제창을 팝업으로 띄우는 **결제창형** 중에서 선택할 수 있어요. 카드, 간편결제는 물론 브랜드페이, PayPal 같은 확장 결제수단까지 결제위젯 하나로 연동할 수 있어요. 두 방식 모두 위젯 어드민을 제공해서, 최초 1회 연동 후에는 코드 없이 디자인을 바꾸거나 결제수단을 추가할 수 있어요.

결제위젯 어드민 체험하기

샌드박스로 시작하기

## 결제위젯 연동 방식 한눈에 비교하기

**주문서 화면에 결제 UI를 직접 노출할지** 먼저 결정하면 방식 선택이 빨라져요.

![결제위젯 방식 선택 다이어그램](https://static.tosspayments.com/docs/payment-widget/overview/widget_comparison.png)

| **비교 항목** | **주문서형** 추천                     | **결제창형**                                                                    |
| ------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| **추천 상황** | **결제 전환율을 높이고 싶은 팀**                                                | **빠른 도입과 최소 변경을 원하는 팀**                                           |
| 구매자 경험   | 주문서에서 결제수단과 혜택을 바로 확인하고 결제까지 이어져요                    | 결제하기 버튼을 누르면 결제창이 팝업으로 열려요                                 |
| 개발 포인트   | 주문서 페이지에 결제 UI 영역을 추가해요                                         | 결제하기 버튼에 결제창 호출을 연결해요                                          |
| 운영 포인트   | 어드민에서 노코드로 운영하며, 디자인·프로모션 적용 등 주문서 경험을 최적화해요. | 어드민에서 노코드로 운영하며, 디자인·프로모션 적용 등 주문서 경험을 최적화해요. |

![주문서형 미리보기](https://static.tosspayments.com/docs/payment-widget/overview/widget_order_form.png)

![결제창형 미리보기](https://static.tosspayments.com/docs/payment-widget/overview/widget_payment_window.png)



title: 통합결제창이랑 어떻게 다른가요?


통합결제창은 PG사가 제공하는 결제창을 그대로 사용하지만, 결제위젯은 위젯 어드민으로 UI를 직접 커스텀할 수 있어요. 주문서형은 주문서에 결제 UI를 바로 보여줘서 PG사 결제창 단계를 생략하고, 결제창형은 팝업 방식이지만 어드민으로 디자인과 결제수단을 자유롭게 설정할 수 있어요. 구매자의 결제 시간이 약 70% 줄어서 결제 전환율이 상승합니다.

![결제위젯 결제창과 다른점](https://static.tosspayments.com/docs/payment-widget/overview/결제위젯_시작하기.png)



title: 결제위젯 연동 vs 통합결제창 연동, 어떤 방식으로 개발하는 게 더 쉬운가요?


결제위젯 연동이 더 쉽고, 공수도 적게 들어요. 결제위젯은 한번에 모든 결제수단(카드, 간편결제, 가상계좌 등)을 연동할 수 있어요. 서버 개발에 드는 공수는 통합결제창과 비슷하지만, 클라이언트 개발 공수와 운영 비용은 결제위젯이 훨씬 적어요. 결제위젯을 쓰면, 코드 없이 어드민에서 다양한 커스텀(UI 디자인, 프로모션, 결제수단별 기능)까지 할 수 있어서 운영이 편해져요. 주문서형과 결제창형 모두 동일한 장점을 가지고 있어요.



title: 결제위젯으로 네이버페이, 카카오페이를 연동할 수 있나요?


네, 결제위젯을 사용하면 한 번의 연동으로 네이버페이, 카카오페이 등 모든 간편결제 수단을 구매자에게 제공할 수 있어요. 네이버페이는 모든 테스트 키로 연동할 수 있고, 카카오페이는 계약 후 발급받는 내 테스트 키로 연동할 수 있습니다.



title: 결제위젯 영문으로 사용할 수 있나요?


아니요. 신용・체크카드 및 가상계좌와 같이 기본적으로 한글로 제공되는 결제수단은 영문으로 수정할 수 없어요. 하지만 커스텀 결제수단은 영문으로 추가할 수 있습니다.

***

## 연동하기

### 연동 방식 선택



title: 결제위젯(주문서형)
description: 주문서에 결제 UI를 직접 렌더링해요.
href: /guides/v2/payment-widget/integration




title: 결제위젯(결제창형)
description: 결제창을 별도로 띄워 결제해요.
href: /guides/v2/payment-widget/integration-window


### 결제수단 확장하기

결제위젯으로 다양한 결제수단과 기능을 함께 연동할 수 있어요.



title: 브랜드페이
description: 자체 간편결제를 연동하세요.
href: /guides/v2/payment-widget/integration-brandpay




title: 결제위젯 Pro
description: 더 높은 자유도로 커스텀하세요.
href: /guides/v2/payment-widget/pro


### 해외결제

해외 구매자에게 상품을 판매할 때 필요한 결제를 연동하세요.



title: 해외결제 연동하기
description: 결제위젯으로 해외 결제수단을 연동하세요.
href: /guides/v2/learn/foreign-payment




title: 해외 간편결제(PayPal)
description: PayPal을 연동하세요.
href: /guides/v2/payment-widget/integration-paypal


***

## 결제위젯 연동 과정

#### 1. 상점관리자 결제위젯 어드민

토스페이먼츠에 로그인하고 상점관리자의 [결제 UI 설정 메뉴](https://dashboard.tosspayments.com/payment-widget-service/)를 확인하세요. 연동하고 싶은 결제 UI의 결제서비스를 추가하고 디자인 및 기능을 변경하세요.

![상점관리자 결제위젯 어드민](https://static.tosspayments.com/docs/payment-widget/admin/admin-overview.png)

\* 어드민은 토스페이먼츠와 계약을 완료한 뒤에 사용할 수 있어요. 체험하기는 테스트 계정과 연결되지 않습니다.

#### 2. 결제 UI의 variantKey 확인

여러 개의 결제 UI를 사용하고 있다면 결제 UI 설정 메뉴에서 연동하고 싶은 `variantKey`를 복사하세요.

![결제 UI의 variantKey 확인](https://static.tosspayments.com/docs/payment-widget/admin/add-ui-6.png)

#### 3. 연동 방식에 따라 결제위젯 연동

연동 방식을 선택하고 가이드에 따라 결제위젯을 연동하세요. `variantKey`를 파라미터로 사용해요.

* [주문서형 연동하기](/guides/v2/payment-widget/integration): 주문서에 결제 UI를 바로 보여주는 방식
* [결제창형 연동하기](/guides/v2/payment-widget/integration-window): 결제창을 팝업으로 띄우는 방식