1. Two types of card payment experience
•
Hosted
◦
Toss Payments payment window
•
Direct
◦
Open a payment or card company app directly
Hosted | Direct | |
Steps for payment (End User) | 5 steps | 2 steps |
Payment conversion rate | 70% longer time to pay compared to Direct Type, resulting in lower payment conversion rate | Increased conversion rate due to fewer steps to go through payment |
Scope of integration for merchants | No. Just need to call the payment window. | Payment method list, installment plan selection, promotion application, etc |
Implementation complexity | Easy | Lots to consider |
** However, if you implement Direct Type using the Widget-SDK, it can be easily integrate
2. How to integrate the Hosted Type
A. Create Payments API
** How it works
Request
curl --request POST \
--url https://api.tosspayments.com/v1/payments \
--header 'Authorization: Basic dGVzdF9za196WExrS0V5cE5BcldtbzUwblgzbG1lYXhZRzVSOg==' \
--header 'Content-Type: application/json' \
--data '{"method":"CARD","amount":15000,"orderId":"a4CWyWY5m89PNh7xJwhk1","orderName":"토스 티셔츠 외 2건","successUrl":"http://localhost:8080/success","failUrl":"http://localhost:8080/fail"}'
JSON
복사
Response
{
"mId": "tosspayments",
"paymentKey": "0jPR7DvYpNk6bJXmgo28e1QkmPjlE8LAnGKWx4qMl91aEwB5",
"orderId": "a4CWyWY5m89PNh7xJwhk1",
...
"checkout": {
"url": "https://api.tosspayments.com/v1/payments/0jPR7DvYpNk6bJXmgo28e1QkmPjlE8LAnGKWx4qMl91aEwB5/checkout"
},
...
"taxFreeAmount": 0,
"taxExemptionAmount": 0,
"method": null
}
JSON
복사
B. tosspayments JavaScript SDK
a.
b.
** How it works
3. Direct
A. Widget Javascript SDK
Widget Javascript SDK provides the easiest way to integrate Direct Type in Korea.
Toss Payments provides WYSIWYG editor. In the editor, the merchant can adjust the UI, directly inserting and subtracting the payment method.
So, the original Direct Type originally requires you to draw a payment method UI on the checkout page , but you can manage it in real time with a few lines of code using the widget.
[Demo Video]
a.
b.
B. tosspayments JavaScript SDK (+ flowMode Parameter)
You can implement your own Directly Type using a regular SDK. However, while Widget SDK provides all the UI and functions (installation, promotion, etc.) necessary for payment, the current method requires you to implement everything yourself.
So we strongly recommend using the widget SDK. Nevertheless, if you need a payment UI that is 100% perfect for your service, please note that there is also a way below.
a.
b.
** How it works
A. tosspayments JS SDK (Hosted Type)
tossPayments.requestPayment('CARD', {
amount: 15000,
orderId: 'SrlYzXxfB0p6Mbb99cN6_',
orderName: '토스 티셔츠 외 2건',
customerName: '박토스',
successUrl: 'http://localhost:8080/success',
failUrl: 'http://localhost:8080/fail',
})
JavaScript
복사
B. tosspayments JS SDK (Direct Type)
tossPayments.requestPayment('CARD', {
amount: 15000,
orderId: 'SrlYzXxfB0p6Mbb99cN6_',
orderName: '토스 티셔츠 외 2건',
customerName: '박토스',
+ flowMode : 'DIRECT',
+ cardCompany : 'KOOKMIN'
// easyPay : 'TOSSPAY'
successUrl: 'http://localhost:8080/success',
failUrl: 'http://localhost:8080/fail',
})
JavaScript
복사