[TIL] 결제 기능 구현

지난 포스팅에서 결제 시스템 구조에 관해 간단히 정리해보았는데요. 오늘은 이 결제 기능을 직접 한번 구현해보는 과정에 대해 작성해볼까합니다. 

 

포트원(PortOne)

우리가 요즘 흔히 온라인 결제로 이용하는 간편 결제인 카카오페이, 네이페이 등이 있는데요. 각각의 결제 기능을 사용해주기 위해선 각 SDK 개별적으로 연결해주어야 합니다. 하지만 유저가 어떤 간편 결제를 사용할지 정해지지 않은 상태에서 이 수많은 간편 결제 SDK를 개별적으로 연결하는 것은 개발자 입장에서 아주 비효율적이라는 생각이 듭니다.

 

따라서 이러한 불편함을 극복하기 위해 등장한 것이 바로 포트원(PortOne) SDK입니다.

포트원 SDK는 네이티브에서 결제 개발을 간편하게 구현할 수 있도록 도와주는 SDK로, 여러 PG 및 간편 결제를 WebView 기반으로 진행할 수 있도록 해줍니다.

 

결제 기능 순서

 

포트원 환경 설정

포트원 SDK를 설치하기전 Xcode에서 설정해주어야할 환경설정에 대해 먼저 살펴보도록 하겠습니다.

1. App Scheme 등록

외부 결제 앱(예) 페이코, 신한 판 페이)에서 결제 후 돌아올 때 사용할 URL identifier를 설정해야 합니다.

1) Project Target > Info 항목으로 이동합니다.

2) URL Types에서 새로운 URL Type을 추가해줍니다.

3) Identifier와 URLScheme를 설정해줍니다. 

2. 외부 앱 리스트 등록

외부 결제 앱(예) 페이코, 신한 판 페이)을 실행할 수 있도록 외부 앱 리스트를 등록해야합니다.

1) Project Target > Info 항목으로 이동합니다.

2) Custom iOS Target Properties에 LSApplicationQueriesSchemes 속성을 추가하고 아래에 외부 앱 리스트를 등록합니다.

3) 외부 앱 리스트 참고 링크: https://github.com/iamport/iamport-ios/blob/main/Example/iamport-ios/Info.plist

3. App Transport Security 설정

1) Project Target > Info 항목으로 이동합니다.

2) Custom iOS Target Properties에 App Transport Security 속성을 추가합니다.

3) 하부 속성에 Allow Arbitrary Loads in Web Content, Allow Arbitrary Loads 속성을 추가하고 각각의 값(value)을 YES로 변경합니다.

 

포트원 구현

1. URL Scheme Open

결제 페이지로 이동하기 위해 위에서 포트원 환경 설정 시 지정해두었던 URL Scheme 오픈해줍니다.

 

저의 경우 이번 프로젝트는 SwiftUI로 작성하였기 때문에 아래 같이 루트뷰에서 URL Scheme을 오픈해주었습니다.

만약 UIKit로 작성하셨다면 AppDelegate.swift 파일에 있는 application(_:didFinishLaunchingWithOptions:) 메서드에서 작성해주시면 될 것 같습니다.

2. 결제 데이터 생성

• pg: 어떤 결제사로 연결할 건지 지정
• merchant_uid: 앱에서 결제한 내역을 식별할 수 있는 고유한 주문 번호
• amount: 결제 금액
• $0.pay_method: 결제 수단
• $0.name: 결제할 상품명
• $0.buyer_name: 주문자
• $0.app_scheme: info.plist 에서 설정한 App Scheme 정보

let payment = IamportPayment(
            pg: PG.html5_inicis.makePgRawName(pgId: "INIpayTest"),
            merchant_uid: "ios_mypayment_\(Int(Date().timeIntervalSince1970))",
            amount: "1000").then {
                $0.pay_method = PayMethod.card.rawValue
                $0.name = "상품명"
                $0.buyer_name = "구매자명"
                $0.app_scheme = "지정한 URL Scheme"
            }

3. 결제 요청

• viewController: 결제 화면을 띄울 View Controller
• userCode: 포트원에서 결제가 진행된 앱을 구별하기 위한 식별자
• payment: 결제 요청 객체
• paymentResultCallback: 결제 완료 후, 호출되는 콜백함수(여기서 결제 후 처리 작업 진행)

Iamport.shared.payment(
            viewController: self,
            userCode: "포트원 UserCode",
            payment: payment,
            paymentResultCallback: { response in
            	// 결체 완료에 대한 응답 처리
           	}
        )

 

마치며

오늘은 결제 기능 구현에 대해서 살펴보았습니다. 알아두어야할 배경 지식에 비해 결제 기능 구현은 간단했네요.ㅎㅎ

여기까지 읽어주셔서 정말 감사합니다~!