How Users Can Cancel Subscriptions Built with React Native IAP

If you’ve built an app that uses react-native-iap for handling subscriptions on iOS and Android, you might be wondering how users can cancel their subscriptions. Managing subscriptions is crucial, especially if you’re offering premium features or content that users access via recurring payments.

In this post, I’ll walk through the steps to allow users to cancel their subscriptions, and explore whether you should store and manage user subscription data in your own database.

How to Allow Users to Cancel Subscriptions

1. Direct Users to App Store and Google Play

First and foremost, you cannot directly cancel subscriptions from within your app. Both Apple and Google Play handle the billing process, including cancellations, and users must go through their respective app store’s subscription management interface to cancel their subscriptions.

For iOS (Apple App Store):

You can redirect users to the iOS subscription management screen using the following link:

import { Linking } from 'react-native';

const openIosSubscription = () => {
  Linking.openURL('https://apps.apple.com/account/subscriptions');
};

For Android (Google Play Store):

Similarly, you can direct Android users to their Google Play subscriptions page:

const openAndroidSubscription = () => {
  Linking.openURL('https://play.google.com/store/account/subscriptions');
};

By implementing a button in your app that opens the respective URL, you’re giving users an easy way to manage and cancel their subscriptions if necessary.

---

Should You Store Subscription Data?

When you’re dealing with subscriptions through react-native-iap, the app stores (Apple and Google Play) handle the billing, renewals, and cancellations. However, you might still wonder if you should store and manage subscription data yourself. The short answer is yes, and here’s why:

2. Why You Should Store Subscription Data

While app stores take care of the heavy lifting when it comes to subscriptions, managing user subscription data in your own database has several important benefits:

1. Tracking Subscription Status: The app stores don’t automatically notify your app about subscription changes, such as renewals or cancellations. You can keep your app’s subscription statuses accurate by tracking them in your database.
2. Provide Detailed Subscription History: Users may want to see details like how long they’ve been subscribed or what plan they’re currently on. By storing this information yourself, you can display it to users, providing more control and transparency.
3. Enhancing the User Experience: Storing subscription data allows you to personalize the user experience. You can decide when to show premium features, when to prompt users to renew, or when to downgrade their accounts.
4. Handle Edge Cases: Sometimes, app store subscription management might not cover all your business needs. For example, you might want to offer custom grace periods for expired subscriptions or refunds. Storing subscription data helps you manage these cases in your app.

---

What Subscription Data Should You Store?

When tracking user subscriptions, it’s important to store the right data. This is what I recommend:

• User ID: To associate the subscription data with the correct user.
• Subscription Start Date: The date when the subscription started.
• Subscription End Date: The date when the subscription will end (if it’s not auto-renewed).
• Subscription Status: Whether the subscription is active, expired, or canceled.
• Subscription Plan: Information about the subscription plan (e.g., monthly or yearly).
• App Store Receipt/Token: Store the receipt data from iOS and the purchase token from Android for verification purposes.

---

How to Keep Subscription Data Updated

1. Receipt and Token Validation:

• For iOS, validate the receipt using Apple’s server-side receipt validation.
• For Android, use Google Play’s Developer API to validate the purchase token.

2. Webhooks for Subscription Updates:

• Apple provides Server-to-Server Notifications to inform you of any subscription changes, like renewals or cancellations.
• Google provides Real-Time Developer Notifications (RTDN) for tracking subscription changes.

3. Periodic Subscription Checks: Set up a routine (e.g., daily or weekly) to check subscription statuses using the app store APIs. This will ensure that your database reflects the most current subscription status.

---

Implementing a Button to Manage Subscriptions

Here’s how you can add a button in your app to allow users to manage their subscriptions:

import { View, Button, Linking } from 'react-native';

const SubscriptionSettings = () => {
  const openSubscriptionPage = () => {
    if (Platform.OS === 'ios') {
      Linking.openURL('https://apps.apple.com/account/subscriptions');
    } else {
      Linking.openURL('https://play.google.com/store/account/subscriptions');
    }
  };
  return (
    <View>
      <Button title="Manage Subscription" onPress={openSubscriptionPage} />
    </View>
  );
};
export default SubscriptionSettings;

This code gives users the option to manage and cancel their subscriptions through the appropriate platform.

---

Final Thoughts

Managing subscriptions can seem complex, but with tools like react-native-iap, you have the flexibility to offer both iOS and Android users a seamless subscription experience. However, it’s important to remember that you must still manage some aspects of the subscription on your end, such as tracking users’ subscription status and providing relevant data when needed.

By following these best practices, you can ensure a smooth experience for your users and maintain full control over the subscription lifecycle in your app.

---

Let me know if this blog helped you, and feel free to share any challenges you’ve encountered while managing subscriptions in React Native!