Earn extra income with the mobile app? This is a problem that has been discussed for a long time but still can not stop being hot? Which are developing trendy apps, which are apps combined with developing technology (AI, AR, …), security apps, On-demand apps, … ways to make money from mobile apps easier like In-app advertising or in-app-purchase, …
The title is flashy, that’s all, but today I’ll share how to integrate in-app-purchase with react-native.
I. Prepare
The first thing you need is already on google store developer account and apple app store and has public.
Library settings
yarn add react-native-iap
reac-native link react-native-iap
Before running ios you need to run cd ios && pod install && cd ..
II. Config
1. iOS
First you need to go to ItunesConnect and complete the Agreements, Tax and Bankings section.
Next we need to enable In-app-purchase on xcode so (if you do not see it, check if your account is already a develop account, or have it enabled on configuage)
Enable on console develop
Next you need to go to the latest version with state Ready to Submit on the Features tab and select In-App Purchases. Then fill in the products you have as shown below
Please note the name of the item, I will demo later and need it: non.consume.prod , point_1000 , point_5000
1. Android
Android is simpler than just signing in and app and adding your products https://play.google.com/apps/publish
Name of products: point_1000 , 10000_point , 5000_point
Add permissions in Manifest.xml
<uses-permission android:name="com.android.vending.BILLING" />
II. Setup code and test it
Because I only have a dev account on Android so I demo it on Android, ios you just need to enable in-app-purchase on xcode and add the product as above.
First you create a view with a button, when clicking on the product, pass that product id to get information about it on the store. Here I passed a product id is android.test.purchased, it is equivalent to the point_1000 , 10000_point , 5000_point above I said, I created it differently
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <span class="token operator">...</span> requestPurchase <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> sku <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token operator">...</span> <span class="token operator"><</span> View style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> container <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> TouchableOpacity style <span class="token operator">=</span> <span class="token punctuation">{</span> styles <span class="token punctuation">.</span> btnBuy <span class="token punctuation">}</span> onPress <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token operator">=></span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">requestPurchase</span> <span class="token punctuation">(</span> <span class="token string">'android.test.purchased'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> Text <span class="token operator">></span> <span class="token constant">BUY</span> <span class="token constant">NOW</span> <span class="token operator"><</span> <span class="token operator">/</span> Text <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> TouchableOpacity <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> View <span class="token operator">></span> <span class="token operator">...</span> <span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> container <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> alignItems <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> justifyContent <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> btnBuy <span class="token punctuation">:</span> <span class="token punctuation">{</span> flex <span class="token punctuation">:</span> <span class="token number">0.5</span> <span class="token punctuation">,</span> backgroundColor <span class="token punctuation">:</span> <span class="token string">'#1CB5B4'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> txtBtn <span class="token punctuation">:</span> <span class="token punctuation">{</span> color <span class="token punctuation">:</span> <span class="token string">'white'</span> <span class="token punctuation">,</span> fontSize <span class="token punctuation">:</span> <span class="token number">14</span> <span class="token punctuation">,</span> fontWeight <span class="token punctuation">:</span> <span class="token string">"bold"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">...</span> |
Next need to configure a bit to check how we connect to the store, how payment errors
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <span class="token keyword">async</span> <span class="token function">componentDidMount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> RNIap <span class="token punctuation">.</span> <span class="token function">initConnection</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">await</span> RNIap <span class="token punctuation">.</span> <span class="token function">consumeAllItemsAndroid</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'result'</span> <span class="token punctuation">,</span> result <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">err</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">warn</span> <span class="token punctuation">(</span> err <span class="token punctuation">.</span> code <span class="token punctuation">,</span> err <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> purchaseUpdateSubscription <span class="token operator">=</span> <span class="token function">purchaseUpdatedListener</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> purchase <span class="token punctuation">:</span> InAppPurchase <span class="token operator">|</span> SubscriptionPurchase <span class="token operator">|</span> ProductPurchase <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'purchaseUpdatedListener'</span> <span class="token punctuation">,</span> purchase <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> receipt <span class="token operator">=</span> purchase <span class="token punctuation">.</span> transactionReceipt <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> receipt <span class="token punctuation">)</span> <span class="token punctuation">{</span> yourAPI <span class="token punctuation">.</span> <span class="token function">deliverOrDownloadFancyInAppPurchase</span> <span class="token punctuation">(</span> purchase <span class="token punctuation">.</span> transactionReceipt <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> deliveryResult <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token function">isSuccess</span> <span class="token punctuation">(</span> deliveryResult <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Tell the store that you have delivered what has been paid for.</span> <span class="token comment">// Failure to do this will result in the purchase being refunded on Android and</span> <span class="token comment">// the purchase event will reappear on every relaunch of the app until you succeed</span> <span class="token comment">// in doing the below. It will also be impossible for the user to purchase consumables</span> <span class="token comment">// again untill you do this.</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> Platform <span class="token punctuation">.</span> <span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'ios'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> RNIap <span class="token punctuation">.</span> <span class="token function">finishTransactionIOS</span> <span class="token punctuation">(</span> purchase <span class="token punctuation">.</span> transactionId <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> Platform <span class="token punctuation">.</span> <span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'android'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// If consumable (can be purchased again)</span> RNIap <span class="token punctuation">.</span> <span class="token function">consumePurchaseAndroid</span> <span class="token punctuation">(</span> purchase <span class="token punctuation">.</span> purchaseToken <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// If not consumable</span> RNIap <span class="token punctuation">.</span> <span class="token function">acknowledgePurchaseAndroid</span> <span class="token punctuation">(</span> purchase <span class="token punctuation">.</span> purchaseToken <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// From <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="ec9e898d8f98c1828d98859a89c1858d9cacd8c2ddc2dc">[email protected]</a> you can simplify above `method`. Try to wrap the statement with `try` and `catch` to also grab the `error` message.</span> RNIap <span class="token punctuation">.</span> <span class="token function">finishTransaction</span> <span class="token punctuation">(</span> purchase <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// Retry / conclude the purchase is fraudulent, etc...</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> purchaseErrorSubscription <span class="token operator">=</span> <span class="token function">purchaseErrorListener</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> error <span class="token punctuation">:</span> PurchaseError <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">warn</span> <span class="token punctuation">(</span> <span class="token string">'purchaseErrorListener'</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">componentWillUnmount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> purchaseUpdateSubscription <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> purchaseUpdateSubscription <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> purchaseUpdateSubscription <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> purchaseErrorSubscription <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> purchaseErrorSubscription <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> purchaseErrorSubscription <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
You should read the docs to read the Api to understand better
Finally, our processing function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | requestPurchase <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> sku <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> products <span class="token operator">=</span> <span class="token keyword">await</span> RNIap <span class="token punctuation">.</span> <span class="token function">getProducts</span> <span class="token punctuation">(</span> Platform <span class="token punctuation">.</span> <span class="token function">select</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> ios <span class="token punctuation">:</span> <span class="token punctuation">[</span> sku <span class="token punctuation">]</span> <span class="token punctuation">,</span> android <span class="token punctuation">:</span> <span class="token punctuation">[</span> sku <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Products'</span> <span class="token punctuation">,</span> products <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> productList <span class="token punctuation">:</span> products <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">err</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">warn</span> <span class="token punctuation">(</span> err <span class="token punctuation">.</span> code <span class="token punctuation">,</span> err <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> RNIap <span class="token punctuation">.</span> <span class="token function">requestPurchase</span> <span class="token punctuation">(</span> sku <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">err</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> Alert <span class="token punctuation">.</span> <span class="token function">alert</span> <span class="token punctuation">(</span> err <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
If you do it right, it will look like me
Welcome to React Native