Build Paystack Subscriptions in Flutter

The subscription flow mirrors the one-time payment flow. The difference is on your backend:

1. Flutter calls your backend with the customer email and plan
2. Backend initializes a transaction with a Paystack plan code
3. Backend returns the authorization_url
4. Flutter opens the URL in a WebView
5. Customer pays — Paystack creates the subscription and stores their card
6. Paystack fires subscription.create webhook to your backend
7. Backend marks the customer as subscribed in your database
8. Flutter calls your backend status endpoint and shows the active plan

// Node.js backend
app.post('/api/subscribe', async (req, res) => {
  var { email, planCode } = req.body;
  var reference = 'sub_' + Date.now();

  var response = await fetch('https://api.paystack.co/transaction/initialize', {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + process.env.PAYSTACK_SECRET_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      plan: planCode,
      reference,
      callback_url: 'https://yourapp.com/subscription/callback',
    }),
  });

  var data = await response.json();
  if (!data.status) return res.status(400).json({ error: data.message });

  res.json({
    authorization_url: data.data.authorization_url,
    reference: data.data.reference,
  });
});

// lib/subscription_screen.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'payment_screen.dart';

class SubscriptionScreen extends StatefulWidget {
  final String userEmail;

  const SubscriptionScreen({super.key, required this.userEmail});

  @override
  State<SubscriptionScreen> createState() => _SubscriptionScreenState();
}

class _SubscriptionScreenState extends State<SubscriptionScreen> {
  bool _isLoading = false;

  Future<void> _subscribe(String planCode, String planName) async {
    setState(() => _isLoading = true);

    var response = await http.post(
      Uri.parse('https://your-backend.com/api/subscribe'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({'email': widget.userEmail, 'planCode': planCode}),
    );

    var data = jsonDecode(response.body);
    setState(() => _isLoading = false);

    if (data['authorization_url'] != null) {
      var result = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => PaymentScreen(
            authUrl: data['authorization_url'],
            reference: data['reference'],
          ),
        ),
      );

      if (result?['success'] == true) {
        await _checkSubscriptionStatus();
      }
    }
  }

  Future<void> _checkSubscriptionStatus() async {
    var response = await http.get(
      Uri.parse('https://your-backend.com/api/subscription/status?email=' + widget.userEmail),
    );
    var data = jsonDecode(response.body);

    if (data['active'] == true) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Subscribed to ${data['plan_name']}!')),
      );
      Navigator.of(context).pop(true);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Choose a Plan')),
      body: _isLoading
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              padding: const EdgeInsets.all(16),
              children: [
                _PlanCard(
                  name: 'Pro Monthly',
                  price: 'NGN 5,000/month',
                  planCode: 'PLN_xxxxxxxxxxxx',
                  onSubscribe: _subscribe,
                ),
                const SizedBox(height: 12),
                _PlanCard(
                  name: 'Pro Annual',
                  price: 'NGN 50,000/year',
                  planCode: 'PLN_yyyyyyyyyyyy',
                  onSubscribe: _subscribe,
                ),
              ],
            ),
    );
  }
}

class _PlanCard extends StatelessWidget {
  final String name;
  final String price;
  final String planCode;
  final Function(String, String) onSubscribe;

  const _PlanCard({
    required this.name,
    required this.price,
    required this.planCode,
    required this.onSubscribe,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(name),
        subtitle: Text(price),
        trailing: ElevatedButton(
          onPressed: () => onSubscribe(planCode, name),
          child: const Text('Subscribe'),
        ),
      ),
    );
  }
}

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

Sign up for the McTaba newsletter