정의
토스페이먼츠가 제공하는 통합결제창을 이용하지 않고 신용/체크카드로 결제하는 결제 방식입니다.
개발공수가 들지만, 토스페이먼츠를 통한 결제라는 것을 고객들이 알수 없고, 가맹점의 주문서 페이지에서 직접 카드사를 선택하는 방법을 사용하기 때문에 결제 Step 이 줄어드는 효과를 얻을수 있습니다.
그래서 개발리소스가 있고 쇼핑몰의 브랜드(PG 사가 노출되지 않음) 일관성을 중요시 하거나 원하는대로 UI 를 구성하기를 원하는 가맹점에서 선호하는 방식입니다.
아래와 같이 가맹점 주문서 페이지에서 간편결제사, 카드사를 표시하고, 사용자가 카드사를 선택하면 토스페이먼츠가 제공하는 통합결제창을 스캅하고 바로 각 카드사가 제공하는 인증화면으로 이동해서 인증을 진행하는 방식입니다.
아래의 예시로 보여드린 UI 는 가맹점에서 제공하는 것입니다. 선택된 카드에 따라 카드사 인증창이 바로 표시 됩니다.
[PC 결제창]
[모바일 결제창]
기본적으로는 통합결제창의 카드 선택 / 할부 선택화면을 가맹점이 제공하시는 것 이외에는 크게 차이가 없습니다. 사용자는 각 카드사가 제공하는 인증 화면으로 이동하고, 여기에서 다양한 방법(앱카드, SMS, ARS등) 을 통해 인증을 완료하면, 가맹점이 설정한 successURL 로 승인에 필요한 paymentKey 가 전달 됩니다.
가맹점에서는 해당 paymentKey 를 이용해서 결제 승인 API 를 호출해 주시면 최종적으로 결제가 진행됩니다.
사용 시나리오
1.
대부분의 인터넷 쇼핑몰에서 제공하는 신용/체크카드를 이용한 1회성 결제를 진행하는 경우
2.
가맹점의 주문서 내에 결제 수단 및 카드사, 할부 개월 등을 가맹점이 원하는 대로 표시하기를 원하시는 경우
3.
통합 결제창의 UI 말고 가맹점이 원하는 별도의 결제창 UI 를 제공하고 싶으신 경우
4.
카드사 별로 다른 PG를 연동하고 싶지만 고객에게 일관된 경험을 주고 싶은 경우
5.
기타 카드사 표시여부, 표시 순서, /할부/프로모션 등을 표시하거나 선택할때 가맹점이 원하는 로직을 적용하고 싶은 경우
고려 사항
가맹점 자체창은 토스페이먼츠가 제공하는 통합결제창을 스킵하고 바로 각 카드사가 제공하는 인증UI 로 바로 이동하는 방식입니다. 그렇기 때문에 통합결제창에서 제공되는 1. 카드사 선택 UI 2. 할부 선택 UI 3. 프로모션 안내 및 적용 등의 로직을 모두 가맹점에서 구현해 주셔야 합니다.
즉, 통합결제창에 비해 가맹점입장에서 결제창 구성의 자유도는 높아지지만, 가맹점 고유의 결제창을 기획하셔야 하고 그에 따른 UI 및 로직을 구현하셔야 하므로 개발리소스가 더 필요합니다.
하지만 , 가맹점 주문서 내에 표시 되는 카드사의 순서 및 원하는 대로 특정 카드사를 강조한다거나 하는 것이 가능하고 특정 주문에 대해 일부 카드사를 표시 하지 않거나 고객이 결제한 최종 카드사를 맨앞에 표시하는 등 좀더 동적으로 구현이 가능하여 대다수의 대형 쇼핑몰들이 선호하는 방식이고, 실제로 쇼핑몰이 성장함에 따라 통합결제창을 사용하던 가맹점들도 일반적으로 카드사 자체창을 사용하는 쪽으로 변경하는 경우가 많습니다.
토스페이먼츠가 제공하는 가맹점 자체창 방식
가맹점 자체창은 토스페이먼츠 UI 를 스킵하기 때문에 연동방식이 1가지 뿐입니다. 하지만 가맹점에서 모든 카드사에 대해 선택 UI 를 만들고 카드사를 선택했을때 토스페이먼츠 결제창을 호출하는 방식으로 구현을 하셔야 합니다. [링크]
가맹점 자체창을 호출할때는 통합결제창 호출하는 Method 에서 2가지 파라미터를 변경하면 되는데, cardCompany 에 원하는 카드사를 넣고, flowMode 를 DIRECT 로 설정하시면 됩니다.
EX) cardCompany : “현대”, flowMode : “DIRECT”
•
할부
가맹점 자체창을 사용하시는 경우 할부는 크게 2가지 부분을 구현해 주셔야 합니다. 한가지는 고객께서 선택할수 있는 할부 개월수 리스트 이며, 한가지는 각 할부 개월수 별로 무이자 여부입니다.
첫번째 카드사 별 할부 개월 수는 이미 PG 사, 카드사와 협의 하셔서 가능한 할부 개월수를 가맹점이 알고 계시기 때문에 그에 따라 고객이 선택하실 수 있는 할부 개월수를 선택된 카드사에 따라 보여주시면 됩니다.
Ex) 삼성 : 2,3,4,5,6,7,8,9,10,11,12 개월 표시
현대 : 2,3,4,5,6,7,8,9,10,11,12,15,18,24 개월 표시 등등
또한 카드사 별로 할부 결제가 가능한 최소 금액이 있기 때문에 현재 결제하시는 금액이 최고 할부 가능 금액을 넘는지 확인을 해주시고 넘는 경우에만 할부 개월 수를 선택할수 있도록 UI 를 구현하셔야 합니다.
일반적으로 최소 할부 가능금액은
•
현대카드 : 10000원 이상
•
이외의 카드사 : 50000원 이상
입니다.
다만, 이 기준은 바뀔수 있으므로(거의 바뀌지 않습니다만) 만약 API 로 최소 할부 금액을 확인하셔야 한다면, 프로모션 API[링크] 에서 interestFreeCards 정보를 확인해 각 카드사 코드 별로 minimunPaymentAmount 값을 참고하시면 됩니다.
두번째 무이자 표시 여부 인데, 무이자 할부의 경우 크게 2가지 종류가 있습니다.
◦
카드사 부담 무이자는 저희가 제공하는 페이지( https://pgweb.tosspayments.com/tosspayments/MainPopUp.do) 에서 값을 확인하신후 직접 할부 개월수에 무이자 여부를 표시해 주시거나, 아니면 프로모션 API[링크] 에서 interestFreeCards 정보에 installmentFreeMonths 를 확인해서 해당 할부 개월수가 무이자 할부 제공 가능하다고 고객님께 안내해 주시면 됩니다.
◦
상점 부담 무이자의 경우 이미 가맹점과 카드사 사이에 상점에서 무이자 제공이 가능한 결제 개월수를 이미 논의 하셨을 것이라서 가맹점에서 그 정보에 따라 무이자 여부를 표시해 주시면 됩니다.
13개월 이상의 상점부담 장기 무이자를 적용하려면 통합결제창과 동일하게, 아래와 같이 freeInstallmentPlans 파라미터에 무이자 할부를 제공하는 카드사와 할부 개월수를 넘기면 무이자가 적용됩니다.
freeInstallmentPlans: [
{
company: '현대',
months: [11,12,13,14],
}
]
JavaScript
복사
•
즉시할인(카드사 프로모션)
카드사 자체창에 즉시할인을 적용하려면 결제창을 열때 선택한 카드와 금액에 맞는 할인코드(discountCode) 를 넘겨주시면 해당 할인이 적용되는 방식입니다.
카드사 자체창을 사용한 즉시할인을 사용하면 가맹점이 특정 유저, 특정 상황, 특정 주문등을 확인한후 discountCode 를 넘겨주는 방식으로 원하는 주문에만 즉시할인을 적용이 가능합니다.
현재 고객께서 선택한 카드사와 결제를 요청하는 결제 금액을 기준으로,
◦
고객이 선택한 카드사가 discountCards 의 cardCompany 정보가 동일하고
◦
결제 금액이 minimunPaymentAmount 와 maximunPaymentAmount 사이에 존제하고
◦
balance 가 0 이상인 discountCode 를 찾아서
결제창을 여실때 이 코드 값을 discountCode 파라미터에 넣어서 호출해 주시면 됩니다.
Ex) discountCode : 16050
또한 즉시 할인을 사용하는 경우 고객분들께 어떤카드로 얼마를 결제하면 즉시 할인이 가능한지 안내를 해주셔야 합니다. 필요하시다면 프로모션 API 정보를 바탕으로 안내 텍스트를 만들수도 있습니다.
•
포인트 사용
카드사 포인트는 간단하게 사용 여부만 넘겨주시면됩니다 useCardPoint : true 로 넘겨주시면 되고, 사용하지 않는 경우 useCardPoint : false 로 넘겨주시면 됩니다. 미리 해당 카드사와 협의가 되어 포인트를 사용할 수 있도록 계약이 된 가맹점만 사용이 가능합니다.
◦
포인트 사용 가능한 카드사: 삼성, 현대, 신한, 국민, 비씨
