[iOS/Swift] Toss Payments 브랜드 페이

  토스에서 제공해 주는 솔루션 중 '브랜드 페이'라는 것이 있습니다. 서비스만의 간편 결제를 지원한다고 합니다. 카드와 계좌를 추가하고 관리할 수 있게 됩니다. 토스 개발자 센터에서 있는 내용을 기반으로 작성되어 많은 내용이 중복됩니다.

 

저는 브랜드 페이를 사용하지 않아서 화면 연동만 수행하는 것까지 진행해 보겠습니다. 

 

토스에서 주장하는 기능

 1. 결제수단 등록 및 관리(카드/계좌

 2. 결제수단 별명 설정

 3. 결제 관리

 4. UI 커스터 마이징

 5. 자동결제

---

브랜드페이에서 Access Token이란?

 브랜드페이는 고객 정보와 관련된 API를 사용할 때 Bearer 인증과 Access Token을 사용해요. Access Token은 고객을 식별하고 보호된 고객 정보에 접근할 때 필요한 토큰이에요. 예를 들어, 고객이 등록한 결제수단을 조회할 때 Access Token이 필요합니다.

인증 흐름

1. 브랜드페이 SDK에서 인증을 요청합니다.
2. 고객이 이용 약관에 동의하면 Authorization Code(임시 인증 코드)를 받습니다.
3. Authorization Code를 사용해서 Access Token 발급 API를 호출하면 Access Token이 발급됩니다.
4. 결제수단 조회와 같이 민감한 고객 정보에 접근할 때 Access Token으로 권한을 인증해야 합니다.

 

결제 위젯에서 브랜드 페이 사용하기

private lazy var widget: PaymentWidget = PaymentWidget(
    clientKey: "test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq",
    customerKey: "EPUx4U0_zvKaGMZkA7uF_"
)

 우리는 지난번에 위와 같이 위젯을 생성했습니다. 하지만 브랜드 페이를 사용하기 위해서는 Access Token 발급에 사용되는 리다이렉트 URL가 필요하다고 합니다. 가맹점의 서버에서 구현해줘야 하는 auth URL 주소라고 하네요. 

 

private lazy var widget: PaymentWidget = PaymentWidget(
    clientKey: "test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq",
    customerKey: "EPUx4U0_zvKaGMZkA7uF_",
    options: PaymentWidget.Options(brandpay: PaymentWidget.BrandPay(redirectURL: "http://my-store.com/brandpay/callback-auth"))
)

 리다이렉트 URL은 이런 식으로 넘겨주면 된다고 합니다. 옵션을 어떻게 넣어야 할지 모를 때는 토스 SDK 코드를 확인하면 이해가 빠르실 겁니다.

 

다음은 브랜드페이 UI를 불러오기 위한 옵션을 추가합니다. 

// 결제 위젯을 랜더링하는 메서드
let paymentMethods = self.widget.renderPaymentMethods(amount: PaymentMethodWidget.Amount(value: 10000))

 지난번에 결제 위젯을 랜더링하는 메서드는 위와같이 구성되어있습니다. 여기를 아래와 같이 수정합니다.

let paymentMethods = self.widget.renderPaymentMethods(amount: PaymentMethodWidget.Amount(value: 10000),
                                                      options: PaymentMethodWidget.Options(variantKey: "BRANDPAY"))

 variantKey 옵션을 적용한 모습입니다.

 

위에서 설정한 variantKey와 리다이렉트 URL은 서비스와 구현에 따라서 다를 수 있습니다.

 

 

 

브랜드페이가 추가된 모습