***

title: 결제 이해하기
description: 주문서형 결제, 결제창형 결제, 자체창형 결제 중 우리 서비스에 맞는 연동 방식을 선택하세요.
keyword: 결제위젯, 주문서형 결제, 결제창형 결제, 자체창형 결제, 자체창, UI, 연동, 결제, 위젯, 소개, 네이버페이, 카카오페이
-------------------------------------------------------------------------------

**Version 2**

# 결제 이해하기

{description}

## 결제 화면 이해하기

구매자는 온라인에서 결제할 때 두 화면을 지나요. **주문서**에서 개인정보와 배송지를 입력하고 상품과 금액을 확인한 다음, **결제창**에서 결제수단을 선택하고 인증해요.

상품 선택

주문서

결제창

결제 완료

| **비교 항목**          | **주문서**                                         | **결제창**                                       |
| ---------------------- | -------------------------------------------------- | ------------------------------------------------ |
| 언제 만나나요          | 상품을 고르고 '구매하기'를 누른 다음이에요         | 주문서에서 '결제하기'를 누른 직후에 열려요       |
| 무엇을 하는 화면인가요 | 개인정보・배송지를 입력하고 상품과 금액을 확인해요 | 결제수단을 선택하고 인증해요                     |
| 구매자가 하는 일       | 배송지 입력, 쿠폰 적용, '결제하기' 클릭            | 카드 선택, 카드 정보 입력, 앱카드・간편결제 인증 |

토스페이먼츠의 연동 방식은 결제 UI를 **어느 화면에, 어떻게 보여주는지**에 따라 나뉘어요.

## 연동 방식 선택하기

주문서형 결제와 결제창형 결제는 토스페이먼츠가 수많은 상점을 분석해 만들어 둔 결제 UI를 그대로 가져다 쓰는 방식이에요. 결제 UI를 직접 개발하지 않아도 되고, 카드, 간편결제부터 브랜드페이, PayPal 같은 확장 결제수단까지 하나의 연동으로 사용할 수 있어요. 반면 자체창형 결제는 결제 UI를 직접 만들어 카드사・간편결제사 자체창을 여는 방식이에요. 개발 공수는 더 들지만, 우리 서비스에 맞게 결제 경험을 자유롭게 설계할 수 있어요.

![결제 방식 선택 다이어그램](https://static.toss.im/3d-common/Docs_image4.png#3264x1840)

| **비교 항목**  | **주문서형 결제** 추천                | **결제창형 결제**                                                               | **자체창형 결제**                                                     |
| -------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| **추천 상황**  | **결제 전환율을 높이고 싶은 팀**                                                | **빠른 도입과 최소 변경을 원하는 팀**                                           | **카드사・간편결제사 결제창을 바로 열고 싶은 팀**                     |
| 구매자 경험    | 주문서에서 결제수단과 혜택을 바로 확인하고 결제까지 이어져요                    | 결제하기 버튼을 누르면 결제창이 팝업으로 열려요                                 | 결제하기 버튼을 누르면 카드사・간편결제사 자체창이 곧바로 열려요      |
| 개발 포인트    | 주문서 페이지에 결제 UI 영역을 추가해요                                         | 결제하기 버튼에 결제창 호출을 연결해요                                          | 결제 UI를 직접 만들고 결제수단별로 자체창 호출을 연결해요             |
| 운영 포인트    | 어드민에서 노코드로 운영하며, 디자인·프로모션 적용 등 주문서 경험을 최적화해요. | 어드민에서 노코드로 운영하며, 디자인·프로모션 적용 등 주문서 경험을 최적화해요. | 결제수단 추가・디자인 변경을 직접 개발해요. 어드민은 제공하지 않아요. |
| 최초 연동 공수 | 2주일                                                                           | 2주일                                                                           | 1~2개월                                                               |
| 개선 공수      | 5분 (개발 없이 가능)                                                            | 5분 (개발 없이 가능)                                                            | 직접 개발 필요                                                        |

![주문서형 결제 미리보기](https://static.toss.im/3d-common/Docs_image2.png#3264x1840)

![결제창형 결제 미리보기](https://static.toss.im/3d-common/Docs_image.png#3264x1840)

![자체창형 결제 미리보기](https://static.toss.im/3d-common/Docs_image3.png#3264x1840)

원하는 방식을 골랐다면 연동 가이드로 이동하세요.



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




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




title: 자체창형 결제
description: 직접 만든 결제 UI에서 자체창을 열어요.
href: /guides/v2/payment-window/integration-direct


## 결제수단 확장하기

주문서형, 결제창형 결제에 다양한 결제수단과 기능을 함께 연동할 수 있어요.



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


***

## 연동 시작하기

주문서형, 결제창형 결제는 아래 과정으로 시작해요. 자체창형은 [자체창 연동하기](/guides/v2/payment-window/integration-direct) 가이드를 바로 따라가면 돼요.

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

토스페이먼츠에 로그인하고 상점관리자의 [결제 UI 설정 메뉴](https://dashboard.tosspayments.com/payment-widget-service/)에서 결제서비스를 추가하고 디자인 및 기능을 변경하세요. 계약 전이라면 어드민을 미리 체험해볼 수 있어요.

결제 어드민 체험하기

![상점관리자 결제 어드민](https://static.toss.im/photos/Docs_image6.png#1632x920)

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

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

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

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

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

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

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

아직 계약 전이라면 샌드박스에서 실제 결제 없이 연동 흐름을 미리 체험해보세요.

샌드박스로 시작하기

***

## 자주 묻는 질문



title: 주문서형 결제와 결제창형 결제, 나중에 교체할 수 있나요?


네, 교체할 수 있어요. 두 방식은 같은 `variantKey`를 사용하기 때문에 어드민에서 설정한 결제수단과 디자인은 다시 세팅할 필요 없이 그대로 쓸 수 있어요. 다만 주문서에 결제 UI를 렌더링하는 방식과 결제창을 띄우는 방식은 연동 코드가 달라서, 교체하려면 추가 개발이 필요해요.



title: 자체창형 결제는 뭐가 다른가요?


주문서형, 결제창형 결제가 토스페이먼츠가 만들어 둔 결제 UI를 가져다 쓰는 방식이라면, 자체창형 결제는 상점이 결제 UI를 직접 만들고 카드사・간편결제사의 자체창을 바로 여는 방식이에요. 결제 UI를 자유롭게 설계할 수 있지만, 결제수단 추가나 디자인 변경도 직접 개발해야 하고 결제 어드민은 사용할 수 없어요. 자세한 연동 방법은 [자체창 연동하기](/guides/v2/payment-window/integration-direct)를 확인하세요.



title: 네이버페이, 카카오페이를 연동할 수 있나요?


네, 주문서형, 결제창형 결제를 사용하면 한 번의 연동으로 네이버페이, 카카오페이 등 모든 간편결제 수단을 구매자에게 제공할 수 있어요.



title: 연동에 얼마나 걸리나요?


테스트 연동에 보통 1~2주, QA와 결제 테스트에 1주 정도 걸려요. 라이브 오픈까지는 카드사 심사(최대 14일)를 포함해 전체 3~4주 정도를 예상하면 좋아요. 프로젝트 규모, 팀 구성, 기술 스택에 따라 달라질 수 있어요.



title: 주문서형, 결제창형 결제를 영문으로 사용할 수 있나요?


아니요. 기본적으로 한글로 제공되는 결제수단은 영문으로 수정할 수 없어요. 하지만 커스텀 결제수단은 영문으로 추가할 수 있습니다.



title: 이전에 있던 기존 결제창은 어디로 갔나요?


기존 결제창은 **결제창(구버전)** 메뉴로 이동했어요. 지금 결제창(구버전)을 사용 중이라면 바뀌는 것 없이 그대로 사용할 수 있어요.

결제창(구버전)은 PG사가 제공하는 결제 화면을 그대로 사용해서 UI를 커스텀할 수 없어요. 신규로 연동한다면 결제 UI를 커스텀하고 어드민으로 노코드 운영할 수 있는 주문서형, 결제창형 결제를 권장해요. 연동 방법은 [결제창(구버전) 가이드](/guides/v2/payment-window)를 확인하세요.