# In App Purchases

{% hint style="info" %}
Note: after settings up in-app-purchases, you will no longer be able to use the Expo Go client.  However, Expo Dev Client is just as convenient after a short setup. It allows for hot-reload and all the other convenient Expo Features without requiring your to eject from Expo. See setup instructions for expo dev client [here](https://shipnative.gitbook.io/shipnative/guides/expo-dev-client)
{% endhint %}

## Setup

### IOS setup

#### Setup Expo Dev Client

* 🚨🚨 Important Step 🚨🚨
* See instructions in [expo-dev-client](https://shipnative.gitbook.io/shipnative/guides/expo-dev-client "mention")
* In-app-purchases will not work in Expo Go

#### Enable in-app-purchases in config

* In `config.ts`, set `requireSubscription: true`
  * This will automatically popup the paywall the first time the user opens the app

#### Fix RevenueCatProvider.tsx

* Comment out this line
  * `export const RevenueCatProvider = MockRevenueCatProvider`
* Uncomment the entire `RevenueCatProvider` component below that

#### Setting up an in-app-purchase in App Store / Play Store

* Setup the product in App Store or Play Store
  * Create the subscription or in-app-purchase in App Store Connect
  * For subscriptions, see instructions here [here](https://www.revenuecat.com/docs/getting-started/entitlements/ios-products)
  * For in-app-purchases, the instructions are similar to the link above, just click the "in-app-putchase" tab instead

#### Setting up RevenueCat

* Import the product into RevenueCat
  * See the section titled "RevenueCat Configuration" [here](https://www.revenuecat.com/docs/getting-started/entitlements)
* Create an entitlement in RevenueCat for your product
  * See the section titled "Entitlements" [here](https://www.revenuecat.com/docs/getting-started/entitlements)
  * Attach your product to the entitlement
* Create an offering in RevenueCat for your entitlement
  * See the section "Offerings" [here](https://www.revenuecat.com/docs/getting-started/entitlements)
  * Add a package to the offering
  * Add your product to the package

#### RevenueCat API keys in code

* Fetch your API keys from RevenueCat
  * It can be found under App > Project Settings > API Keys
  * See detailed instructions [here](https://www.revenuecat.com/docs/welcome/authentication)
* Add the API keys under `config.ts` under the revenueCat field

#### Setup RevenueCatProvider

* in `RevenueCatProvider.tsx`&#x20;
  * Set the variable PACKAGE\_ID to the package id you setup. This can be found under the **offering** tab in RevenueCat (ex. `$rc_lifetime`)
  * Set the variable ENTITLEMENT\_ID to the entitlement id you setup. This can be found under the **entitlement** tab in RevenueCat
* Now, you can launch the paywall

## Debugging

* Make sure you're debugging using the EAS prebuild (see above). This will not work in the Expo mobile client
* To reset the purchases, you need to reset it in BOTH App Store Connect and RevenueCat
  * **Resetting in App Store Connect**
    * On device
      * Go to settings > app store > sandbox account > manage > reset purchase history
    * In App Store Connect
      * Go to app store connect > users & access > sandbox > test accounts > edit > clear purchase history
  * **Resetting in RevenueCat**
    * Go to recent transactions and find your transaction![](https://4231634381-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOZoMneYIWXZS5O76fdFM%2Fuploads%2FxX4iOM41gja4dkU3X2Tf%2Fimage.png?alt=media\&token=a64113cc-a2a1-45b7-9112-0c04b94bf2d1)
    * Click the transaction, scroll to the bottom, press delete customer

## Usage

#### Require a purchase to access part of the app

* Use the following hook to access app state

  ```
  const { hasEntitlement, isLoading, purchaseEntitlement } = useRevenueCatContext()
  ```
* To check if the user has the entitlement, use

  ```typescriptreact
  if (!hasEntitlement) {
    return
  }
  ```
* To automatically show the paywall screen if the user has not purchased the subscription

  ```typescriptreact
  if (!requireEntitlement()) {
    return
  }
  ```
