Core Concepts/Integration Types

Learn about the different ways to integrate Toss Payments and find the best option for your business.

Hosted and Direct Types

There are two ways to integrate payment in Korea. The first is hosted, where the customer selects their preferred payment method on the Toss Payments Payment Window, as shown below. The hosted type is easier to integrate, but the payment process is longer and there is almost no room available for customization.

Toss Payments hosted payment window example flow image

The second is direct, where the customer selects their payment method on your own website to directly open the chosen method's payment window as shown below. The direct type is more difficult to integrate because you must make your own payment UI. Because you are making your own UI, the payment process is more customizable and shorter as the customer skips the Toss Payments Payment Window.

If you want the benefits of the direct type but lack resources to make your own UI, try using the Toss Payments Widget. The Widget is a low-code solution that once integrated, can be customized in your store dashboard with no additional code.

Direct flow image

A more detailed comparison of the hosted and direct types can be found in the table below.

Steps to complete payment (End User)5 steps3 steps
Payment conversion rateLower conversion rate due to longer payment processIncreased conversion rate due to fewer payment steps
Customization levelLowHigh (payment method list, installment plan selection, promotion application, etc)
Implementation complexityEasyMore elements to consider

Integrate Hosted Type

1. Create Payments API

Call the Create Payments API. The Payment object is given as a reponse. Check the checkout.url field for the payment window URL.

2. Payment Window SDK

Use the Payment Window SDK, a JavaScript library that provides a simple way to integrate Toss Payments into your website.

Add SDK in your code and call the requestPayment() method.

👉 See our Payment Window integration guide

👉 Check the Payment Window SDK parameters

👉 Watch the Desktop demo video

Integrate Direct Type

1. Widget SDK

Widget example image

The Widget Javascript SDK is the easiest way to integrate direct type.

After integration, you can change the design, payment methods, agreement terms and more on a dashboard with no additional code. Instead of making your own checkout page from scratch, use the Widget to integrate a payment UI in minutes.

👉 See our Widget integration guide

👉 Watch the Widget demo video

2. Payment Window SDK (flowMode: DIRECT)

You can also implement direct type with the Payment Window SDK. However, unlike the Widget, this method requires you to design and create a payment UI from scratch and integrate each payment method separately. We strongly recommend using the Widget, but this method is useful if you need to customize every detail of the payment experience.

To use direct type with the Payment Window SDK, set the flowMode parameter to DIRECT and designate the payment method with either the cardCompany or easyPay parameter.

👉 See our Payment Window integration guide

👉 Check the cardCompany and easyPay enum code list

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