Card payments

Cards and digital wallets are by far the most commonly used online payment method in Korea. Learn about the different ways to integrate card and digital wallets to find the best option for you.

For card and digital wallets, there are two integration types.

Hosted integration refers to opening a Toss Payments branded payment window, where the customer selects a payment method and then is directed to that payment method. Although the hosted method can be easier to integrate, it allows minimum customization and elongates the payment process for the customer. Additionally, the customer is exposed to the Toss Payments branding which can distract from your own brand.

Direct integration refers to opening the customer's choice of payment method directly from your checkout page. It offers a more seamless payment experience with less steps. Direct integrations are highly customizable but can be more difficult to integrate since you are integrating each and every payment method yourself.

If you want the benefits of the direct integration with minimum resources, try the Toss Payments widget, a low-code solution that supports all payment methods and provides you with a no-code admin for design and payment method customizations.

Learn exactly what happens at each step of the AppCard payment process. Follow along with the below video demos if necessary. Refer to the time stamps provided at each step.

• Desktop demo video
• Mobile demo video

Payment starts at the merchant app. Create a checkout page and register the payment window as an on click event of the Pay now button. The below checkout page uses the Toss Payments widget, but you can use any of the integration methods below.

If you're looking for a server-to-server integration, use the Create payment API. To use the hosted type, set the flowMode parameter as DEFAULT. To use the direct type, set flowMode as DIRECT and designate the payment method you'd like to open using the cardCompany or easyPay parameters. Toss Payments will respond with a Payment object. See the checkout.url field for a link that opens the payment window. Note that in server-to-server integration, webhooks are mandatory.

Integrate and initialize the payment window SDK in your client code. This is the more standard method for integration in Korea. Similar to the server-to-server method, the flowMode payment information parameter controls what type of window you're opening. To use the hosted type, set flowMode as DEFAULT. To use the direct type, set flowMode as DIRECT and designate the payment method you'd like to open using the cardCompany or easyPay parameters.

For direct integrations using SDK, we highly recommend using the Toss Payments widget. Use the widget SDK to integrate our payment UI directly to your checkout page. See the Payment widget integration guide for details.

Depending on your integration, the customer is directed to the hosted or direct payment window.

On the hosted window, the customer chooses the payment method and fills in payment details, such as the installment plan. Then the customer presses Next and moves on to the direct window. If you're using a direct integration or the payment widget, this is where the customer would start off.

On the direct window, the customer can choose the AppCard they want to use for payment. Most Korean companies provide customers with multiple app options. Customers can register their card on the app and use it like a digital wallet. If they do not have the app on their phone, customers can also choose other options such as entering their card number and proving their identity through a third-party authentication app.

In a desktop environment, customers will see a pop-up window with a digit code and a QR code. Customers use the AppCard on their phone to scan the code and bring up the payment.

When the code is successfully processed, the customer will choose a payment method. In a mobile environment, this is where the customer would've started off. After choosing a card, customers verify their identity through biometric or password authentication. Once verification is complete, the payment is ready to be authorized.

Once the customer's identity has been authenticated, the customer is directed back to the successUrl that the you set during the initial payment request.

The successUrl can be set as a client page or an endpoint in your server. Either way, when the customer is redirected to it, call the Authorize payment API to complete the payment. Authorizing the payment will deduct credit or funds from the customer's card.

Toss Payments will return a Payment object to a successful authorization. In the object, you can see the payment details, including the masked card information and receipt.