In app purchase in expo

[Swyanmitra]

Hello,

We are using Expo to create our project. In our project one important topic is in-app purchase. Could you help me how to implement in-app purchase using expo and what are necessary steps we need to follow to implement this.

[EvanBacon]

Simply:

• create a new branch detached
• run exp detach
• do all the same stuff you would normally do
• switch back to master to add js code
• when coding in master wrap your IAP module code with the following:

  import { NativeModules } from 'react-native';
  const { RNIapModule } = NativeModules;
  function hasIAP() {
  return !!NativeModules.RNIapModule;
  }

• This way your code won't crash when calling IAP methods
• When deploying or testing IAP use the detached branch - or just skip the branches altogether and go rogue >:)

The general idea here being exp detach just surfaces a /ios & /android folder so you can use your project as a RN app. You will still get all the functionality of a regular Expo app, just use fastlane to deploy so you don't need to use too much native stuff. Finally, the branches are useful for updating SDK versions. If you for some reason have a problem updating, you could just detach again and add this lib once more.

[ImArtur]

The question is why would you start with Expo in the first place.

[KevinColemanInc]

@ImArtur

At least for me, Expo development environment is much easier to work with than having to create native builds. Also, having a free multi-platform push notification service with a singular interface is also super convenient.

[hyochan]

@KevinColemanInc Yes. I understand because I've been heavy expo user earlier. I really want expo to integrate the iap module. However I understand it isn't easy for expo to maintain it's environment including iap feature. Apple will reject Expo Client app in app store firstly.

[KevinColemanInc]

@dooboolab

As others have proposed, I'd be cool if it was just stubbed out for testing. I just like expo for the dev experience.

I am considering breaking it out into its own branch in git and keep the dev branch expo friendly. Once its time for deployment, I could merge in the ejected code, test it, and them deploy the app.

[EvanBacon]

@ImArtur the question is "In app purchase in expo". You can read about the pros and cons of Expo here: https://docs.expo.io/versions/latest/introduction/why-not-expo

[cellis]

@EvanBacon

Hello and thanks for this writeup! I'm wondering if ( after detaching ) you're supposed to continue to build with exp, or with xcode, in the "detached" branch? Thanks!

[cellis]

@EvanBacon also, how are you testing this on iOS? Do you push a new build and then test it there or is there a way to test iaps locally before?

[edoantonioco]

If I know I will need in-app purchases at some point of the development, should I still use CRNA? or go directly to RN native from the start?

Unless of course, expo devs implements expo in-app purchase very soon.

[cellis]

@edoantonioco I’ve gotten this working with expo. I just make a page with iap buttons for purchasing items and only press those buttons when I’m testing purchases and building with Xcode. Otherwise I build with expo. Works great!

[EvanBacon]

Sorry for the delay. When you detach, you add native code and build it onto your device. You then use that build like the expo client (except only for your singular app). I would still recommend sticking with Expo. CRNA is maintained by Expo and our focus is mostly on making the libraries work in that environment. Vanilla React Native will require a lot of unneeded setup and will require that you know a lot more about the inner workings of modules.

[inglesuniversal]

Hello, now that you bring up the subject. If in app purchases is kind of "hard" to handle by Expo. What are the suggested roadmaps to monetize an App without detaching it from Expo, since for me, like many others, I make use of Expo for the fact that the overall experience is much friendlier than RN and far less complex than going native on both platforms. So, can you just use a subscription plan with PayPal or receive payments through credit cards? Is that allowed by Google and Apple to be built in, inside your Expo App by using a web view for example? Thanks.

[KevinColemanInc]

@inglesuniversal

If its worth anything, we ended up dumping expo because we got tired of waiting for issues like this to be resolved.

It definitely adds friction to testing and to supporting some features (like notifications), but at least my dev can stop telling me, "that is impossible because expo doesn't support it".

[hyochan]

Expo has announced this recently about the future plan in 2019. You will be able to link native modules then.

[TheInternet]

I have been trying to make @EvanBacon's code above work but my NativeModules is empty and as a result RNIapModule is undefined. (on iOS at least)

Have others encountered this issue? Does this mean I am not correctly linked?

FWIW, react-native link appears to have worked....

$ react-native link react-native-iap
rnpm-install info Linking react-native-iap ios dependency 
rnpm-install info Platform 'ios' module react-native-iap has been successfully linked 
rnpm-install info Linking react-native-iap android dependency 
rnpm-install info Platform 'android' module react-native-iap has been successfully linked 

but I suspect I may need to link manually which thus far I haven't been able to do. I can't find a libraries folder. https://forums.expo.io/t/trouble-linking-with-expokit-unable-to-find-libraries-in-xcode/16710

[Jazzykhan]

@EvanBacon Hi Sir, Can you please tell me in details? I tried RN iap i linked it then i exp detached. then i goto ios dir and run pod install now it is installing everything what should i do next? thanks

[Jazzykhan]

@cellis can you tell me more how you made the inapp work i am trying for 1 week now can you show the code please? thanks and did you build with expo or xcode after pod install? thanks

[Jazzykhan]

do all the same stuff you would normally do switch back to master to add js code when coding in master wrap your IAP module code with the following: @EvanBacon what is the meaning of above lines?

[MartinMasek]

Simply:

• create a new branch detached
• run exp detach
• do all the same stuff you would normally do
• switch back to master to add js code
• when coding in master wrap your IAP module code with the following:

import { NativeModules } from 'react-native';
const { RNIapModule } = NativeModules;
function hasIAP() {
  return !!NativeModules.RNIapModule;
}

• This way your code won't crash when calling IAP methods
• When deploying or testing IAP use the detached branch - or just skip the branches altogether and go rogue >:)

The general idea here being exp detach just surfaces a /ios & /android folder so you can use your project as a RN app. You will still get all the functionality of a regular Expo app, just use fastlane to deploy so you don't need to use too much native stuff. Finally, the branches are useful for updating SDK versions. If you for some reason have a problem updating, you could just detach again and add this lib once more.

Hi Evan, thank you for the suggestion. I've followed the advice and I have no errors (I've linked react-native-iap manually). However, the hasIAP function is returning false even though RNIap.initConnection(); returns true. I test it with this simple piece of code.

async componentDidMount() {
    try {
      const result = await RNIap.initConnection();
      console.log("hasIAP " + hasIAP())  // returns false
      console.log('result', result);   // returns true
    } catch (err) {
      console.warn(err.code, err.message);
    }
}

Do you know what could be the issue? (Or anyone reading this)

[withinboredom]

According to the docs, https://docs.expo.io/versions/v32.0.0/sdk/payments/, have you set up payments on your device? (simulator wouldn't make sense to test this with)

[inglesuniversal]

Like a previous user on this post, it is Expo's best intention for this first quarter to implement a way to build apps and also to be able to import native React Native libraries. Right now it shows a Beta when starting a new project with the CLI. Hope this is fixed soon.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[inglesuniversal]

Please keep it open and help us find a way to make this a reality starting Expo SDK versión 33.0

[krean93]

Has anyone any updates on this issue?

[kkarkos]

https://docs.expo.io/versions/latest/sdk/in-app-purchases/

Update: Sorry, missed the following:

This module is currently only available in the bare workflow.

[holgersindbaek]

@kkarkos Using Expo's own in-app-purchase module, you’d still have to eject your Expo app (for the foreseeable future), so it doesn't really solve the issue.

If anyone can give a more thorough guide as to how to trick that @EvanBacon us describing, then please share. Maybe even a demo app?

[EdmundMai]

@TheInternet I'm running into the same issue with the missing "Libraries" folder. Did you find out how to install this properly on iOS?

[dragoonzx]

@inglesuniversal I`m interesting, have you found interesting ways to monetize an app without detaching it from expo?

[dragoonzx]

Can we use e-payments with webView? Is it legal?

[inglesuniversal]

As far as I know you can use 3rd party solutions as a web app (like stripe or PayPal) but inside the AppStore or PlayStore you can’t. Otherwise your app may be kicked out or removed until you do it the right way through the API we’ve all been waiting for since I started using Expo.

[KevinColemanInc]

You can use Stripe or Paypal in your app as long as you are purchasing external goods and services (like when you buy a product on amazon or pay in the Uber app), but you can't use Stripe for unlocking app software features (like selling game tokens or premium features)

[inglesuniversal]

Thanks KevinColemanInc for the comment... Do you happen to know if selling memberships or recurring payments for movie rentals, cloud storage, online courses... Can that be paid externally using Stripe or PayPal within an App -> (PlayStore or AppStore) ? Thanks for your feedback!

[KevinColemanInc]

@inglesuniversal

If you want to unlock features or functionality within your app, (by way of example: subscriptions, in-game currencies, game levels, access to premium content, or unlocking a full version)

These are the guidelines by Apple: https://developer.apple.com/app-store/review/guidelines/#in-app-purchase

I think most of what you described would fall under "premium content." Netflix is required to pay the apple tax.

It looks like Dropbox also pays the apple tax if you signup with them on mobile. I would checkout Udemy's app to see if they also use IAP.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[callyb]

Simply:

• create a new branch detached
• run exp detach
• do all the same stuff you would normally do
• switch back to master to add js code
• when coding in master wrap your IAP module code with the following:

import { NativeModules } from 'react-native';
const { RNIapModule } = NativeModules;
function hasIAP() {
  return !!NativeModules.RNIapModule;
}

• This way your code won't crash when calling IAP methods
• When deploying or testing IAP use the detached branch - or just skip the branches altogether and go rogue >:)

The general idea here being exp detach just surfaces a /ios & /android folder so you can use your project as a RN app. You will still get all the functionality of a regular Expo app, just use fastlane to deploy so you don't need to use too much native stuff. Finally, the branches are useful for updating SDK versions. If you for some reason have a problem updating, you could just detach again and add this lib once more.

Sorry to be so dense, but does this mean that you add the IAP code to each branch separately (if you have to ‘wrap’ it for the expo branch) & then just re-eject on a new branch every time you’ve added expo code to the master or are you merging branches at any point??! And is this still the best way to add IAP’s to a managed expo app? I’m just finishing up my first big app and need to add this functionality somehow & doing it in a branch seems a good safe option maybe - I just want to make sure I understand the workflow! I also have to say I love expo! It’s been a brilliant way to get into react native and without it I would never have got this far so thank you and keep up the good work!!!

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[yaoonline]

Simply:

• create a new branch detached
• run exp detach
• do all the same stuff you would normally do
• switch back to master to add js code
• when coding in master wrap your IAP module code with the following:

import { NativeModules } from 'react-native';
const { RNIapModule } = NativeModules;
function hasIAP() {
  return !!NativeModules.RNIapModule;
}

• This way your code won't crash when calling IAP methods
• When deploying or testing IAP use the detached branch - or just skip the branches altogether and go rogue >:)

The general idea here being exp detach just surfaces a /ios & /android folder so you can use your project as a RN app. You will still get all the functionality of a regular Expo app, just use fastlane to deploy so you don't need to use too much native stuff. Finally, the branches are useful for updating SDK versions. If you for some reason have a problem updating, you could just detach again and add this lib once more.

Sorry to be so dense, but does this mean that you add the IAP code to each branch separately (if you have to ‘wrap’ it for the expo branch) & then just re-eject on a new branch every time you’ve added expo code to the master or are you merging branches at any point??! And is this still the best way to add IAP’s to a managed expo app? I’m just finishing up my first big app and need to add this functionality somehow & doing it in a branch seems a good safe option maybe - I just want to make sure I understand the workflow! I also have to say I love expo! It’s been a brilliant way to get into react native and without it I would never have got this far so thank you and keep up the good work!!!

Hi! Did you find the answer? How did you implement it?