How to Configure Subscriptions on the Web with Stripe and Grant Users Access on iOS and Android
Tags: mobile, ios, android, stripe
Published: 2022-08-11 10:35:00

Implementing renewable subscriptions is a daunting task, especially if you haven’t dealt with a third-party payment processors’ APIs like StoreKit, Google Billing Library, Stripe before. And it becomes much harder when you need to support several platforms simultaneously. You’ll find that managing cross-platform subscriptions is challenging as you need to solve technical integration complexity, consider different platforms’ policies and requirements, find the right approach to manage subscription statuses (cancellations, upgrades, downgrades, etc.), and analytics.

At the same time, cross-platform subscription management provides your users with the best user experience on any device anywhere, and allows you to reduce platform fees (15-30% for app stores and 2-3% for Stripe — just feel the difference).

In our [previous article](https://qonversion.io/blog/cross-platform-in-app-subscription-management-guide/), we covered granting access on the web after a purchase was made on iOS and Android platforms. Now let’s dig deeper into the web part and explore how to configure Stripe payments and grant your users premium access on iOS and Android apps.

## Connecting Stripe to Qonversion 
The first step is to connect Qonversion to your Stripe account. Navigate to your Qonversion project settings. Select Stripe and switch on the Stripe toggle.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5q0jbza8rk08mtyo5vlg.png)
This will bring you to the Stripe sign in page. Click _Connect_ if you have an existing Stripe account or create a new one if required. If your Stripe account isn’t activated yet, you need to activate it (add business details, banking information etc).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46k13gl4rr8sfl6q0gpb.png)

## Setup Stripe Product and Permission
Let’s assume you have already had the Qonversion [Product](https://documentation.qonversion.io/docs/products) that contains Apple and Google product stores identifiers. If you want to sell a similar product with Stripe, update the existing product in Qonversion with the Stripe product ID.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vnbswq9t6v8c48tdjql.png)
The Stripe product ID can be found in the Products tab in Stripe Dashboard. Just select the product and copy its ID shown at the top right corner of the page.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f0zjihdkjq7kyzue3jq.png)
Make sure that your Qonversion product is associated with [Permission](https://documentation.qonversion.io/docs/permissions) that indicates premium status of a user.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1z9znt8fhlimtljascwj.png)
If you want to sell subscriptions only on the web, you can just leave empty the Apple Store and Google Play Product ID fields in the Qonversion product details.

## Sending Stripe Purchase Data to Qonversion
You can directly call [API methods](https://documentation.qonversion.io/reference/overview) or use our [Web SDK](https://github.com/qonversion/web-sdk/tree/main) in your web app to send Stripe subscriptions data to Qonversion. Choose the method that is most suitable for you. If you have never worked with API endpoints before, our recommendation is to use Qonversion Web SDK to send Stripe purchases data.

### 1. API methods
Qonversion provides a high-performance REST API that allows you to create and identify users, send purchases data, get user entitlements, and more. This section of the article covers the methods you should use in order to get cross-platform access based on Stripe purchases.

#### 1.1 Create User
Before you start sending Stripe purchase data, you need to create a user. A user is a cross-platform entity with User object with the following endpoint:

`POST https://api.qonversion.io/v3/users/:user_id`

`User_id` is the Qonversion User ID that will be registered for this user. Let’s use the following identifier `aa47b6fa` as the `user_id` in this example. 

#### 1.2 Identify the User
User Identity allows cross-platform user identification and access management. Identity manages user access based on payments across different platforms. You can find more info about Identity in our [documentation](https://documentation.qonversion.io/docs/user-identifiers#3-user-identity).

Identify the user with the [Identity](https://documentation.qonversion.io/reference/create-an-identity) method:

`POST https://api.qonversion.io/v3/identities/:identity_id`

For `identity_id` always use unique ID values. Otherwise, a user can get matched to another user’s premium status. You can use the user ID from your internal system as `identity_id`. In our example, we will use `stripe_aa47b6fa` as the `identity_id`.

#### 1.3 Send Purchases
Here we get to the most interesting part. Now everything is ready for sending user purchases data to Qonversion. Use the [purchases endpoint](https://documentation.qonversion.io/reference/create-a-purchase) for this:

`POST https://api.qonversion.io/v3/users/:user_id/purchases`

Below is the example with the parameters you should forward with the method body:

```
{
"currency": "USD",
"price": "100",
"purchased": 1659428809,
"stripe_store_data": {
   "subscription_id": "sub_1LSGVgL9K6ILzohYq5GCbktn",
   "product_id": "prod_MAbVQQaljmF6gm"
 }
}
```
In order to grant users with valid permissions, `product_id `must be the same as Stripe Product Identifier that you provided in the previous step to the Qonversion Product _annual_. `Subscription_id` is an identifier for a [Stripe Subscription object](https://stripe.com/docs/api/subscriptions/object). Description of the rest parameters can be found in our [guide on sending Stripe purchases data to Qonversion](https://documentation.qonversion.io/docs/stripe-integration#4-send-stripe-purchases-to-qonversion).

If the purchase was created successfully, the response will be the following:

```
{
   "currency": "USD",
   "price": "100",
   "purchased": 1659008000,
   "stripe_store_data": {
       "product_id": "prod_MAbVQQaljmF6gm",
       "subscription_id": "sub_1LSGVgL9K6ILzohYq5GCbktn"
   },
   "user_id": "aa47b6fa"
}
```
You can now check the Customers tab in your Qonversion account looking for your customer. Search is available with Qonversion `user_id(aa47b6fa)` or `identity_id(stripe_aa47b6fa)`:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el9sm16r6y6bg11l3dhf.png)
And here are the details on customer level that you can quickly see in Qonversion dashboard including price and date of the purchased product:



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1uin5mos9d31brr5o1s.png)
Once you successfully send the purchase, Qonversion infrastructure handles all subscription changes like renewal, trial conversion, refund etc. This affects user permissions and is reflected in our [analytics dashboards](https://documentation.qonversion.io/docs/analytics). 

#### 1.4 Get Entitlements
At this point, you should be able to receive the active permission that was configured in the previous step (_Setup Stripe Product and Permission_). In our example, this is a permission with a premium ID. Call the following [method](https://documentation.qonversion.io/reference/retrieve-an-entitlement) to check entitlements:

`GET https://api.qonversion.io/v3/users/:user_id/entitlements`

Below you can see the example with entitlement response:

```
{
   "data": [
       {
           "active": true,
           "expires": 1690965033,
           "id": "premium",
           "product": {
               "product_id": "annual",
               "subscription": {
                   "current_period_type": "normal",
                   "renew_state": "will_renew"
               }
           },
           "started": 1659429033
       }
   ]
}
```
### 2. Web SDK
Web SDK is a TypeScript browser-client SDK that interacts with Qonversion API under the hood. With Qonversion’s Web SDK, you can easily identify users, send purchases, customize user properties, check an entitlement state, but it is still required to receive an entitlement state on the backend side. You can find SDK to be a more flexible and convenient way to share data to Qonversion from your web app.

#### 2.1 Launch Qonversion Web SDK
You can find detailed information on how to [launch the SDK in the documentation here](https://documentation.qonversion.io/docs/web-sdk#launching-the-sdk). You need to call the `Qonversion.initialize` method and pass `QonversionConfigBuilder` as a parameter:

`const qonversionInstance = Qonversion.initialize(config);`

#### 2.2 Identify the user with Qonversion Web SDK
User Identity allows cross-platform user identification and access management. Identity manages user access based on payments across different platforms. You can find more information about Identity in our [documentation here](https://documentation.qonversion.io/docs/user-identifiers#3-user-identity).

Identify the user with the `identify` method:

`await qonversionInstance.identify('identity_id');`

Always use unique ID values for `identity_id`. Otherwise, a user can get matched to another user’s premium status. You can use your internal user ID from your system as `identity_id`. In this example, we will use `stripe_aa47b6fa` as the `identity_id`.

#### 2.3 Send purchase
Collect stripe purchase data and call the `sendStripePurchase method`:

```
сonst stripePurchaseData: PurchaseCoreData & StripeStoreData = {
  currency: 'USD',
  price: '100',
  productId: 'prod_MAbVQQaljmF6gm',
  purchased: 1659008486,
  subscriptionId: 'sub_1LSGVgL9K6ILzohYq5GCbktn'
};

const purchase = await qonversionInstance.sendStripePurchase(stripePurchaseData);
```
In order to grant users with valid permissions, `product_id` must be the same as Stripe Product Identifier from the Qonversion Product `annual` (see the previous step _Setup Stripe Product and Permission_). `Subscription_id` is an identifier for a [Stripe Subscription object](https://stripe.com/docs/api/subscriptions/object). Description of the rest parameters can be found in our [guide Send Stripe purchases to Qonversion](https://documentation.qonversion.io/docs/stripe-integration#4-send-stripe-purchases-to-qonversion).

If the purchase is created successfully, the response is the following:

```

{
  currency: 'USD',
  price: '100',
  purchased: 1659008486,
  stripeStoreData: {
    subscriptionId: 'sub_1LSGVgL9K6ILzohYq5GCbktn',
    productId: 'prod_MAbVQQaljmF6gm'
  }
}
```
You can check the Customers tab in your Qonversion account to see the details of this user. You can use `identity_id(stripe_aa47b6fa)` to find the customer:  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4hnqil2kwxk285w44z1.png)
You can see the details on user level including a purchased product price and the date of the purchase:



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr3q0430u1g51tmeu5m1.png)
Once you successfully send the purchase, Qonversion infrastructure handles all subscription states like renewal, trial conversion, refunds etc. It affects user permissions and shows up in [analytics](https://documentation.qonversion.io/docs/analytics) as well. 

#### 2.4 Get entitlements
At this point, you should get the active permission that was configured in the previous step (_Setup Stripe Product and Permission_). In our example, this is a permission with a `premium ID`. Call the `getEntitlements` method:

`const entitlements = await qonversionInstance.getEntitlements();`

## Get Subscription Status and Unlock Premium Access on Mobile Apps
The last step is to get a subscription status on an iOS or Android mobile app to handle user access. Launch the app and call the `identify` method:

iOS

```
Qonversion.identify("identity_id")
```
Android

```
Qonversion.identify("identity_id")
```
`Identity ID` must be the same you used when identifying the User on the web.

Then call the `checkPermissions` method:

iOS

```
Qonversion.checkPermissions { (permissions, error) in
  if let error = error {
    // handle error
    return
  }
  if let premium: Qonversion.Permission = permissions["premium"], premium.isActive {
	// handle the permission
  }
}
```
Android

```
Qonversion.checkPermissions(object: QonversionPermissionsCallback {
    override fun onSuccess(permissions: Map<String, QPermission>) {
        val premiumPermission = permissions["premium"]
        if (premiumPermission != null && premiumPermission.isActive()) {
		// handle the permission
        }
    }
    override fun onError(error: QonversionError) {
        // handle error here
    }
})
```
As you can see here, a mobile apps user has the entitlements (access level) based on his stripe subscription.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag2xs0f6fuh4jsqf33i4.jpeg) _Android / iOS_

## Conclusion 
This article demonstrates how to manage users’ access on mobile apps based on their web subscriptions. The implementation is quick and straightforward.

Once you implement cross-platform subscription management, you can easily track the performance of each platform in Qonversion analytics dashboards. Moreover, Qonversion offers a set of tools to leverage your subscription data including [integrations](https://qonversion.io/integrations), Apple Search Ads attribution, and push notifications.