• 브랜드페이: https://github.com/tosspayments/frontend/tree/main/services/connect
• jsSDK: https://github.com/tosspayments/frontend/tree/main/sdk/browser-sdk

1. 서비스 개요

• 커넥트페이 UI 통합 연동 가이드
• 브랜드페이는 한 마디로, 간편결제 서비스입니다.
• 가맹점에서 간편결제를 직접 구현하지 않고도, jsSDK를 가맹점 웹 사이트에 embed하기만 하면 간편결제를 이용할 수 있습니다.
• 주요 가맹점: 무신사, 골프존, 라포랩스, 현대백화점 그룹 등

2. 브랜드페이를 이해하기 위한 사전 단계

• 사실 브랜드페이는 jsSDK가 없이는 어떤 것도 할 수 없는 서비스입니다.
• 가맹점에서 jsSDK를 통해 ConnectPay 객체를 초기화하고 사용할 메소드를 호출해주면, jsSDK를 통해 커넥트페이 서비스가 iframe 의 형태로 embed 되어 사용할 수 있습니다.

// 가맹점 웹페이지 코드
<script src="<https://js.tosspayments.com/v1/connectpay>"></script>

<script>
	var clientKey = 'test_ck_OEP59LybZ8Bdv6A1JxkV6GYo7pRe';
	var customerKey = 'customer123';
	var connectPay = ConnectPay(clientKey, customerKey);
</script>

• 따라서 커넥트페이를 잘 이해하기 위해서는, browser-sdk 에 대한 이해가 필요합니다.
• 우선 커넥트페이에서 결제수단 등록을 하는 상황을 먼저 보여드리고, 이 flow가 코드 상으로 어떻게 동작이 되는지 설명드리려고 합니다.

# 결제수단 등록 demo 동영상

addPaymentMethod.mp4