리액트 네이티브 인 앱 결제

지금 만들고 있는 앱에 인 앱 결제를 넣어보고 싶어서 구현을 해 보았는데 하면서 알게 된 부분을 정리해봤다.

일단 라이브러리는 이걸 사용했다.

https://github.com/dooboolab/react-native-iap

dooboolab/react-native-iap

일단 직접 안드로이드 코딩하는 건 못하고..ㅠ

찾아보니 그래도 꽤 많이 쓰여서 사용하기로 했다.

 

주간 다운로드도 일반적인 리액트 네이티브 라이브러리에 비하면 적은 편이지만 인 앱 결제 라이브러리 중에서는 제일 많은 편이다. 그리고 신기하게 우리나라에서 만들었다. 리액트 네이티브 커뮤니티에서. 그런데 영어로 검색을 해보면 외국에서도 많이 사용하고 블로그를 남기는 편인 거 같다. 신기하다.

일단 위에 사이트에 써 있는 데로 getting started를 진행하면 되는데,

리드미를 보면 상당히 많은 함수가 있는데 내가 사용한 함수는 getAvailablePurchases, consumeAllItemsAndroid, getProducts, purchaseUpdatedListener, purchaseErrorListener, requestPurchase, finishTransaction 정도가 되겠다.

아,

<uses-permission android:name="com.android.vending.BILLING" />

 

이걸 AndroidManifest.xml에 넣어 주었다.

나는 구독 결제 말고 온리 구매 결제만 만들었는데 구독을 하려면 저기서 requestPurchase 대신 requestSubscription을 해주면 될 거 같다. 해보진 않았다.

내가 사용한 함수에 대해 알아보면,

getAvailablePurchases

함수명만 놓고 보면 이용가능한 구매 목록을 가져온다. 나는 처음에 결제 할 수 있는 물건들을 가져오는 걸로 착각했는데 그래서 아무것도 안 사고 저걸 호출하면 빈 배열을 준다. 당연히 물건을 하나 구매하고 나면 구매한 물건이 저기에 보인다.

 

consumeAllItemsAndroid

나는 안드로이드만 사용하기 때문에 이 함수만 사용했는데 iOS는 다른 걸 또 쓰겠지.

구매를 한 번 하고 나서 다시 같은 상품을 구매하려고 하면 이미 샀다는 에러가 나온다. (처음 알았다.....) 이 때 그걸 날려주는 게 이 함수다. 근데 약간 불편하다고 느낀 게, 나 같은 경우엔 처음에 useEffect에서 저걸로 한 번 다 날려주고 시작하는데 만약 구매한 상품이 없는 상태에서 저걸 호출하면 에러나 나 버린다. 그래서 바로 위 함수인 getAvailablePurchase를 사용해서 구매한 게 있을 때만 날려주도록 처리했다. 

물론 물건 구매한 직후에도 날려주기는 한다.

getProducts는 인 앱 결제 상품으로 등록된 거 가져오는 거고. 근데 여기에 skus를 넣어주어야 하는 데 이것도 약간 불편하다. 왜냐하면 이걸 코드에 넣어두기 때문이다. 물론 firebase 무슨 config 기능 쓰면 거기서 바로 변경해주도록 할 수 있을 거 같기도 한데, 일단은 상품을 어차피 가져올 건데 그 상품 아이디를 앱에서 넣어주는 이유를 잘 모르겠다.(아마도 문서에 타당한 이유와 함께 쓰여 있겠지...? 내가 안 본 거겠지..?)

아무튼 파라미터로 상품 id를 배열로 넣어주면 인 앱 결제에 등록된 상품이 나온다. 

그리고 이건 개발 시에도 구글 플레이 스토어에 등록만 되어 있으면 가져올 수 있다.

근데 플레이 스토어에서 비활성 시켜 놓은 상품은 클릭하면 구매 못한다고 나온다.

 

requestPurchase

이제 구매하고 싶으면 이걸 호출하면 된다.

구조가 좀 신기한게 내가 아는 함수는 대게 이런 거 호출하고 결과가 나오면 그걸 가지고 이런저런 처리를 하기 마련인데 여기서는 구매가 된 후에 listener를 통해 결과가 나온다. 그래서 listener를 등록해두어야 한다. 사실 자세한 흐름은 리드미에 나와 있는데 자세히 안봤다.... 아무튼, 아래는 리스너 함수.

 

purchaseUpdatedListener

말 그대로 구매했거나 업데이트 했을 때 리스너에서 호출할 callback 함수를 등록해서 사용한다. 나는 초기화할 때 그냥 예제 그대로 따라하고 알림만 주는 코드를 넣어 주었고, useEffect에서 clean up 할 때 리스너 remove하고 끝냈다.

 

purchaseErrorListener

이건 에러 났을 때 알려주는 거 같은데 등록만 하고 동작하는 건 확인 못해봤다.

 

finishTransaction

이건 리스너에서 사용하는 함수인데 말 그대로 트랜젝션 끝내는 함수인 거 같은데 자세히는 문서의 결재 흐름을 참고하면 될 거 같다.

 

이런 식으로 구매 기능을 넣었는데, 

내 기억으론 인 앱 결제 상품을 넣으려면 구글 플레이 스토어에서 배포를 해야 했던 거 같은데.. 아닌가 그냥 배포 빼고 나머지만 설정해도 됬었나.. 잘 기억이 나질 않는다. 아무튼 개발 시에 테스트를 해보려면 위에 있는 androidManifest.xml에 billing 관련 추가 + 구글 플레이 스토어콘솔에 인 앱 결제 설정 추가 + 코드 작성이 되어야 한다. 그러면 개발할 때도 테스트할 수 있다.

더 많은 기능들이 있겠지만 이 정도면 간단한 결제 정도는 구현할 수 있다. 여기까지.