[iOS/Swift] Toss Payments 멀티 결제 UI

 토스 페이먼츠에는 멀티 결제 UI라는 기능이 있습니다. 

출처 : 토스 페이먼츠 개발자 센터

 상품에 따라서 결제 방법을 다르게 한다는 기능인데, 커스터 마이징이 간편하다는 마케팅을 하는 서비스인 만큼 화면도 간편하게 변화를 줄 수 있는 건 좋은 것 같습니다. (사실 다른 회사들은 어떤지 모름.) 

 

 결제 화면을 꾸밀 수 있는 결제 UI 설정 메뉴에서 UI 추가하기 버튼을 누르면 커스터 마이징이 가능한가 봅니다. 저는 안 해봤기 때문에 얼마나 편리한지는 모르겠지만 앱에서 적용하는 건 정-말 간단합니다. 

 

 지난 글을 읽고 오신분들은 사실 이미 알고 있는 방법이기도 합니다. 바로 variantKey를 활용하는 것인데요. 새로운 UI를 추가할 때 variantKey도 같이 생성하게 됩니다. (제가 직접 해본 건 아니고 토스 말대로는 그래요..) 

 

// 결제 위젯을 랜더링하는 메서드
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 옵션을 적용한 모습입니다. 브랜드페이와 적용하는 법이 사실상 똑같습니다. 그래도 멀티 결제 UI라는 것을 설명하는 시간이 필요할 것 같기도 해서 글을 작성해 보았습니다.

 

아래는 서로 다른 variantKey를 적용한 모습입니다. 

variantKey 다른 모습

 '닫기 버튼', '결제 하기' 버튼은 제가 생성한 것이기 때문에  여기서는 결제 수단만 확인해 주세요. 보시면 결제 수단이 왼쪽은 많고 오른쪽은 적은 모습을 볼 수 있습니다. 이렇게 variantKey를 통해서 서로 다른 결제 화면을 구현할 수 있다는 점입니다. 

 

 실제 서비스에서 적용한다면 결제 정보를 받아오는 서버에서 variantKey도 같이 받는 다면 앱에서는 아주 편리하게 처리가 가능하게됩니다.