McTaba Labs logo
Bonaventure OgetoBy Bonaventure Ogeto|

Build Paystack Subscriptions in React Native

To subscribe a customer in React Native, call your backend to initialize a transaction with a Paystack plan code. Open the authorization URL with react-native-paystack-webview or expo-web-browser. After checkout, Paystack creates the subscription automatically. Your backend receives the subscription.create webhook. React Native polls or receives a push notification about the new subscription status.

Subscription Checkout Flow

// screens/PlanSelectionScreen.tsx
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
import PaystackWebView from 'react-native-paystack-webview';

interface Plan {
  name: string;
  price: string;
  planCode: string;
  amount: number;
}

var PLANS: Plan[] = [
  { name: 'Pro Monthly', price: 'NGN 5,000/month', planCode: 'PLN_xxxxxxxxxxxx', amount: 5000 },
  { name: 'Pro Annual', price: 'NGN 50,000/year', planCode: 'PLN_yyyyyyyyyyyy', amount: 50000 },
];

export function PlanSelectionScreen({ navigation, route }: any) {
  var userEmail = route.params?.email;
  var [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);
  var [showCheckout, setShowCheckout] = useState(false);
  var [loading, setLoading] = useState(false);

  async function handleSubscribe(plan: Plan) {
    setLoading(true);
    try {
      var response = await fetch('https://your-backend.com/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: userEmail, planCode: plan.planCode }),
      });
      var data = await response.json();

      if (data.authorization_url) {
        setSelectedPlan(plan);
        setShowCheckout(true);
      } else {
        Alert.alert('Error', data.error || 'Failed to initialize subscription');
      }
    } catch (e) {
      Alert.alert('Error', 'Network error');
    }
    setLoading(false);
  }

  if (showCheckout && selectedPlan) {
    return (
      <PaystackWebView
        paystackKey="pk_test_xxxxxxxxxxxx"
        amount={selectedPlan.amount}
        billingEmail={userEmail}
        autoStart={true}
        onSuccess={async (response) => {
          setShowCheckout(false);
          var ref = response.transactionRef?.reference;
          if (ref) {
            // Check subscription status
            await checkSubscriptionStatus(ref);
            navigation.navigate('SubscriptionActive');
          }
        }}
        onCancel={() => setShowCheckout(false)}
      />
    );
  }

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 16 }}>Choose a Plan</Text>
      {PLANS.map(plan => (
        <TouchableOpacity
          key={plan.planCode}
          onPress={() => handleSubscribe(plan)}
          disabled={loading}
          style={{ borderWidth: 1, borderColor: '#ddd', borderRadius: 8, padding: 16, marginBottom: 12 }}
        >
          <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{plan.name}</Text>
          <Text style={{ color: '#666' }}>{plan.price}</Text>
        </TouchableOpacity>
      ))}
      {loading && <ActivityIndicator color="#4CAF50" />}
    </View>
  );
}

async function checkSubscriptionStatus(reference: string) {
  var response = await fetch(
    'https://your-backend.com/api/subscription/status?reference=' + reference
  );
  return response.json();
}

Subscription Status Hook

// hooks/useSubscription.ts
import { useState, useEffect } from 'react';

export interface SubscriptionStatus {
  active: boolean;
  planName?: string;
  nextBillingDate?: string;
  subscriptionCode?: string;
}

export function useSubscription(userEmail: string) {
  var [subscription, setSubscription] = useState<SubscriptionStatus>({ active: false });
  var [loading, setLoading] = useState(true);

  async function refresh() {
    setLoading(true);
    try {
      var response = await fetch(
        'https://your-backend.com/api/subscription/status?email=' + encodeURIComponent(userEmail)
      );
      var data = await response.json();
      setSubscription(data);
    } catch (e) {
      console.error('Failed to fetch subscription status', e);
    }
    setLoading(false);
  }

  useEffect(() => {
    refresh();
  }, [userEmail]);

  return { subscription, loading, refresh };
}

// Usage in a screen:
// var { subscription, refresh } = useSubscription(user.email);
// if (!subscription.active) <PlanSelectionScreen />;

Learn More

Key Takeaways

  • ✓The subscription checkout flow is the same as one-time payment — just pass a plan code on the backend.
  • ✓After checkout, Paystack handles renewals automatically. The app does not need to trigger them.
  • ✓Check subscription status from your backend API. Do not call Paystack directly from React Native.
  • ✓Use React Context or Zustand to manage subscription state and gate features accordingly.
  • ✓Display next billing date and plan details fetched from your backend, not from Paystack directly.
  • ✓For cancellation, call a backend endpoint that calls POST /subscription/disable with the subscription code.

Frequently Asked Questions

How does React Native know when a subscription is active?
The backend receives the subscription.create webhook and marks the user as subscribed. React Native polls a backend status endpoint or receives a push notification. After checkout, call your backend status API and refresh the subscription state in the app.
Can users manage their subscription within the React Native app?
Yes. Build a subscription management screen that fetches subscription details from your backend. Add cancel, upgrade, and downgrade options that call backend endpoints. The backend makes the Paystack API calls on behalf of the user.
How do I show a paywall in React Native for premium features?
Wrap premium screens with a check against your subscription state. Use React Context or Zustand. If subscription.active is false, render the plan selection screen instead of the premium content. Refresh the subscription status on app focus to stay current.
What happens to subscriptions when a renewal fails in React Native?
Paystack fires invoice.payment_failed to your backend. Your backend marks the subscription as inactive and sends a push notification to the React Native app. The app detects the inactive subscription on next status check and prompts the user to update their payment method.

Ready to build real-world apps?

Join the McTaba Labs full-stack marathon (4 months full-time · 6 months part-time). Learn M-Pesa, USSD, and WhatsApp engineering while shipping 8 production apps.

Apply to the McTaba Marathon