[React-Native][iOS] react-native-iap 간단하게 인앱결제 복원하기 구현

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다.

[react-native][IOS]react-native-iap 간단하게 인앱결제 복원하기 구현

 

 

iOS 인앱결제 복원하기

 

 

안드로이드의 경우에는 앱을 삭제했다가 다시 설치해도 구매했던 구독을 자동으로 불러와 적용해주지만, iOS는 자동으로 복원되지 않기 때문에 인앱결제가 있을 경우에는 복원하기 버튼을 필수로 구현해줘야한다. (구현하지 않으면 앱스토어 심사에서 반려된다.)

현재 개발 중인 앱의 경우에는 프리미엄 구독 기능이라는 인앱결제가 있기 때문에 꼭 이를 구현해줘야했다. 우리는 React-native로 개발했기 때문에, react-native-iap라는 인앱결제용 라이브러리를 이용했다.

 

영수증 정보나, 세부 사항을 함께 적용하면 좋지만 나는 일단 간단하게 restore함수를 구현했다.

const restorePurchase = async () => {
    setRestoreLoading(true)
    try {
      const purchases = await getAvailablePurchases()
      setRestoreLoading(false)
      console.log(purchases)
    } catch (err) {
      console.warn(err)
    }
  }

일단 엄청 간단하게 구현했는데, 여기서 getAvailablePurchases() 함수가 이용자의 그 전 purchased product의 모든 리스트, 즉 구매했던 목록들을 불러와준다고 한다. restore 함수의 목적은 단순히 구매했었는지의 여부를 확인해주는 것이기 때문에 간단하게 구현했다.

 

restore함수는 subscription을 구매했을 경우에만 필요하다. 단순히 선결재의 경우에는 필요없다.

 

백엔드에 구매 여부를 전달하기 위해서는 이 함수의 여러 속성들을 활용해 전달해야하는데,

여기있는 공식 문서를 참고하는 것이 필요하다.

Available Purchase | React Native IAP

 

 

그렇게 다시 함수를 수정하면, 이런식으로 구현이 가능하다.

  const restorePurchase = async () => {
    setRestoreLoading(true)
    try {
      const purchases = await getAvailablePurchases()
      //transactionReceipt -> iOS: The receipt. Android: Stringified JSON of the original purchase object.
      let receipt = purchases[0].transactionReceipt
      //purchaseToken -> A token that uniquely identifies a purchase for a given item and user pair.
      if (Platform.OS === 'android' && purchases[0].purchaseToken) {
        receipt = purchases[0].purchaseToken
        //purchaseToken은 android에만 있음.
      }
      AsyncStorage.setItem('receipt', receipt)
      //server에 receipt를 전달해서 저장해야 하는데, 일단 AsyncStorage에 저장.
      setRestoreLoading(false)
      console.log(purchases)
    } catch (err) {
      console.debug('restorePurchases')
      console.warn(err)
    }
  }

 

우리는 크로스플랫폼 애플리케이션을 개발했기 때문에 Android일 경우와 iOS일 경우를 따져주었다.

또한 서버에서 아직 관련 API 개발 전이기 때문에, 일단 AsyncStorage에 저장하는 것으로 구현했다.

 

 

 

 

.

.

.

.

참고자료

 

React Native에서 인앱 결제 구현하기