Here's the context of the blog post

React Native developers often face the problem of adding native support for multiple operating systems, which takes time and effort. What if there was an open source project to handle In-App purchasing (IAP) dependencies across iOS, Google PlayStore, and Amazon Appstore for you? Hello react-native-iap!

I recently had this challenge while integrating Amazon IAP in a React Native app. After researching the top open source projects for purchasing, react-native-iap enabled IAP functionality without the complexity of operating system specific APIs — truly one (react native) package to rule them all! 🧙‍♂️✨

For this article, I am going to walk you through the project and then I’ll explain how I launched their sample with the Amazon IAP App Tester.

⬇️ The sample app
The first thing I did was clone the Github repository for react-native-iap as it contained all the working examples for Amazon Appstore, Google Play, and Apple Appstore.

git clone https://github.com/dooboolab/react-native-iap
🪝 The useIAP hook for all the stores
Exploring the sample I saw it uses their new useIAP hook that handles purchases for all the different stores. This was great as the useIAP hook allows you to access a number of operating system agnostic variables and functions allowing you to use the reuse the same logic across platforms.

Taking the example of scenario where a user is making a purchase of a subscription, I mapped how I could utilise the variables and functions:

Retrieve the available subscriptions
The first step would be to retrieve the available subscriptions and present them to a user. I can easily do this by checking I am connected and then calling the getSubscriptions function. This will automatically update the subscriptions variable with the subscriptions:
 const {connected, subscriptions, getSubscriptions} = useIAP();

 useEffect(() => {
 if (connected) {
 getSubscriptions({skus: [
 'com.amazon.sample.iap.subscription.mymagazine.month',
 'com.amazon.sample.iap.subscription.mymagazine.quarter',
 ]});
 }
 }, [getSubscriptions]);
Handle the purchase request
Next to handle a purchase request e.g. when a purchaseSubscription button is pressed, I can make my call of requestSubscription:
 requestSubscription = async (sku: Sku) => {
 try {
 await requestSubscription({sku});
 } catch (error) {
 //Handle error
 }
 };
Handle errors
Next, I can wrap my currentPurchaseError in a useEffect and listen to check if any error occurred and then handle it accordingly:
 const {currentPurchaseError} = useIAP();

 useEffect(() => {
 ... 
 }, [currentPurchaseError]);
Check current purchase
Finally, asynchronously, I can create a function to check the status and execute finishTransaction:
 const {currentPurchase, finishTransaction} = useIAP();

 useEffect(() => {
 const checkCurrentPurchase = async () => {
 try {
 if (currentPurchase?.productId) {
 await finishTransaction({
 purchase: currentPurchase,
 isConsumable: true,
 });
 }
 } catch (error) {
 //Handle error
 }
 };

 checkCurrentPurchase();
 }, [currentPurchase, finishTransaction]);
🧪 Test with the Amazon App Tester
The sample looked great so it was now time to unit test IAP functionality by simulating a production environment with the Amazon IAP App Tester in three steps.

Step 1: Download the App Tester
If you haven't already got it, you can download App Tester from the Amazon Appstore, onto the same Android device as your app. The App Tester simulates the production environment and you configure it with IAP items.

Step 2: Create the amazon.sdktester.json
The example app already contains the JSON file with the IAP Items used in the demo and you can find it in IAPExample/android/app/amazon.sdktester.json

However, you could also create your own IAP items here. Once you have created your in-app items, you can download a JSON-formatted data file containing all of the data for your items like the one above.

Step 3: Push the amazon.sdktester.json file to your device
Next, if you haven't already, connect your Amazon device with your developer environment using the Android Debug Bridge (adb). This is to enable you to copy the JSON file to the /sdcard/ folder on your device file system by running the following command line:
$ adb push [\_Your\_JSON\_File\_Folder\_]/amazon.sdktester.json /sdcard/amazon.sdktester.json

Note: If your device is running an Android OS version older than 4.0, copy the file to /mnt/sdcard/.

Once that is set-up you will see the In-App items on the App Tester.

Finally, running the Amazon version of the example app with the command yarn android:amazon you can test purchases using Amazon IAP:

Big kudos to lead maintainer @andresesfm and the all the contributions from community developers for react-native-iap! Consider showing your support to their open source project on OpenCollective. I’ll definitely be using their package to implement Amazon IAP in my React Native App!
블로그 게시물의 맥락은 다음과 같습니다.

React Native 개발자는 종종 여러 운영 체제에 대한 네이티브 지원을 추가해야 하는 문제에 직면하는데, 이는 많은 시간과 노력이 필요합니다. iOS, 구글 플레이스토어, 아마존 앱스토어에서 인앱 구매(IAP) 종속성을 처리하는 오픈소스 프로젝트가 있다면 어떨까요? 안녕하세요, react-native-iap!

저는 최근 React Native 앱에 Amazon IAP를 통합하는 과정에서 이 문제를 겪었습니다. 구매하기 위해 최고의 오픈 소스 프로젝트를 조사한 결과, 운영 체제별 API의 복잡성 없이 IAP 기능을 지원하는 react-native-iap는 정말 하나의 (반응 네이티브) 패키지로 모든 것을 지배할 수 있었습니다! 🧙‍♂️✨

이 글에서는 프로젝트에 대해 설명한 다음 Amazon IAP 앱 테스터로 샘플을 실행한 방법에 대해 설명하겠습니다.

⬇️ 샘플 앱
가장 먼저 한 일은 Amazon Appstore, Google Play, Apple Appstore에 대한 모든 작동 예제가 포함된 react-native-iap의 Github 리포지토리를 복제하는 것이었습니다.

git clone https://github.com/dooboolab/react-native-iap
🪝 모든 스토어에 대한 사용IAP 후크
샘플을 살펴보니 모든 다른 스토어에 대한 구매를 처리하는 새로운 사용IAP 훅을 사용하고 있었습니다. 사용IAP 훅을 사용하면 운영 체제에 구애받지 않는 여러 변수와 함수에 액세스할 수 있으므로 여러 플랫폼에서 동일한 로직을 재사용할 수 있다는 점이 좋았습니다.

사용자가 구독을 구매하는 시나리오를 예로 들어 변수와 함수를 어떻게 활용할 수 있는지 매핑해 보았습니다:

사용 가능한 구독 검색
첫 번째 단계는 사용 가능한 구독을 검색하여 사용자에게 표시하는 것입니다. 연결되었는지 확인한 다음 getSubscriptions 함수를 호출하면 쉽게 이 작업을 수행할 수 있습니다. 그러면 구독으로 구독 변수가 자동으로 업데이트됩니다:
 const {connected, 구독, getSubscriptions} = useIAP();

 useEffect(() => {
 if (connected) {
 getSubscriptions({skus: [
 'com.amazon.sample.iap.subscription.mymagazine.month',
 'com.amazon.sample.iap.subscription.mymagazine.quarter',
 ]});
 }
 }, [getSubscriptions]);
구매 요청 처리
구매 요청 처리(예: 구매 구독 버튼을 눌렀을 때) 다음으로 요청 구독을 호출할 수 있습니다:
 requestSubscription = async (sku: Sku) => {
 try {
 await requestSubscription({sku});
 } catch (error) {
 //에러 처리
 }
 };
오류 처리
다음으로, currentPurchaseError를 useEffect로 감싸고 오류가 발생했는지 확인한 다음 적절히 처리할 수 있습니다:
 const {currentPurchaseError} = useIAP();

 useEffect(() => {
 ... 
 }, [currentPurchaseError]);
현재 구매 확인
마지막으로 비동기적으로 상태를 확인하고 finishTransaction을 실행하는 함수를 만들 수 있습니다:
 const {currentPurchase, finishTransaction} = useIAP();

 useEffect(() => {
 const checkCurrentPurchase = async () => {
 try {
 if (currentPurchase?.productId) {
 await finishTransaction({
 구매: currentPurchase,
 isConsumable: true,
 });
 }
 } catch (error) {
 //에러 처리
 }
 };

 checkCurrentPurchase();
 }, [currentPurchase, finishTransaction]);
🧪 Amazon 앱 테스터로 테스트하기
샘플이 훌륭해 보였으므로 이제 Amazon IAP 앱 테스터로 프로덕션 환경을 3단계로 시뮬레이션하여 IAP 기능을 단위 테스트할 차례입니다.

1단계: 앱 테스터 다운로드
아직 다운로드하지 않았다면 Amazon 앱스토어에서 앱 테스터를 앱과 동일한 Android 기기에 다운로드할 수 있습니다. 앱 테스터는 프로덕션 환경을 시뮬레이션하고 IAP 항목으로 환경을 구성합니다.

2단계: amazon.sdktester.json 생성하기
예제 앱에는 데모에 사용된 IAP 항목이 포함된 JSON 파일이 이미 포함되어 있으며, 해당 파일은 IAPExample/android/app/amazon.sdktester.json에서 찾을 수 있습니다.

그러나 여기에서 직접 IAP 항목을 생성할 수도 있습니다. 인앱 아이템을 생성한 후에는 위와 같이 아이템에 대한 모든 데이터가 포함된 JSON 형식의 데이터 파일을 다운로드할 수 있습니다.

3단계: amazon.sdktester.json 파일을 디바이스에 푸시하기
그런 다음, 아직 하지 않았다면 Android 디버그 브리지(adb)를 사용하여 Amazon 장치를 개발자 환경과 연결합니다. 이렇게 하면 다음 명령줄을 실행하여 JSON 파일을 장치 파일 시스템의 /sdcard/ 폴더에 복사할 수 있습니다:
$ adb push [\_귀하의\_JSON\_파일\_폴더\_]/amazon.sdktester.json /sdcard/amazon.sdktester.json

참고: 장치에서 4.0 이전 버전의 Android OS를 실행하는 경우 파일을 /mnt/sdcard/에 복사합니다.

설정이 완료되면 앱 테스터에 인앱 항목이 표시됩니다.

마지막으로, 예제 앱의 Amazon 버전을 yarn android:amazon 명령으로 실행하면 Amazon IAP를 사용하여 구매를 테스트할 수 있습니다:

리액트 네이티브-iap의 리드 메인터너 @andresesfm과 커뮤니티 개발자들의 모든 공헌에 큰 찬사를 보냅니다! 오픈콜렉티브의 오픈소스 프로젝트에 지지를 보내주세요. 저는 이 패키지를 사용하여 React Native 앱에서 Amazon IAP를 구현할 것입니다!