목차

This guide goes through a demo of the Toss Payments Payment Window SDK and explains how to authenticate and authorize a credit card payment.

Integration Guide with Demo

Play the Desktop or mobile demo video and check time stamp for each step.

STEP 1. Merchant Checkout Page

Desktop DemoMobile Demo
00:00~00:0400:00~00:04

When the customer hits the "Pay" button, call the SDK method below to open a Toss Payments Payment Window.

STEP 2. Toss Payments Payment Window

Desktop DemoMobile Demo
00:05~00:1700:05~00:10

On Toss Payments payment window, the customer will:

  1. Agree to the terms and conditions
  2. Select the card company or bank they wish to pay with, and
  3. Set the card installment period

Then, the customer will be redirected to the card company payment window for authentication.

STEP 3. Card Company Payment Window

Desktop DemoMobile Demo
00:18~00:3400:11~00:24

In the demo, the customer is redirected to the Samsung Card payment window, where they need to authenticate their card information. Authentication is most commonly done through the card company app. Below is the Desktop procedure.

  1. The QR code comes up on the desktop monitor. Card company apps offer a QR scanning screen, like the one shown below.

    QR Example screen

  2. When the customer scan the QR code using the card company app, payment information is sent to the card company app. The customer checks the payment information and enters a biometric authentication or PIN number to complete authentication. (The customer has already registered payment methods on the card company app.)

    • In addition to using the card company app, there are other methods for authentication, such as entering all card information (16 digits, cvc..). However still using card company app is most popular way in Korea.

On mobile, it will be automatically redirected from Web or App to card company's app. You need to integrate an card app to authenticate the cardholder-specific payment method when opening the card payment window in a mobile webview instead of a browser. See the list of card App URL Schemes and additional logic required for integration on the Integrate WebView page.

STEP 4. Merchant result page

Desktop DemoMobile Demo
00:35~00:3900:25~00:28

After authentication, the customer is redirected to successUrl or failUrl set in Step 1. If authentication is successful, then web page will redirect to successUrl with key-value(authentication information) data in its query string parameters.

Authorization completes the payment. Use the paymentKey, orderId, and amount values from the successUrl as the Payment Authorization API request data as below.

A successful API call returns a JSON-encoded Payment object.

If the API call fails, then it returns an error code and message. Check the Error Code page for more details.

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