Build Paystack Subscriptions in React Native

// 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();
}

// 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 />;

This guide is part of the Paystack integration guides by language and framework series.

Sign up for the McTaba newsletter