How to Add Paystack Payments to Your SassyPack SaaS App

Adding Paystack payments to your SaaS app lets you monetize instantly, especially if your users are in Africa.
SassyPack already includes a clean setup for integrating both Stripe and Paystack, so you can get started quickly without complex backend logic.

---

1. Why Paystack Integration Matters

• Localized support for African currencies
• Instant payouts to verified accounts
• Secure checkout with built-in fraud protection
• Subscription support with Paystack’s API

Paystack gives indie founders in Africa the ability to collect payments without foreign setup issues.

---

2. Setup Your Paystack Account

1. Go to https://paystack.com and sign up for a developer account.
2. Once approved, open your dashboard and go to Settings → API Keys.
3. Copy your Test Secret Key and Test Public Key.
   • Example:
     • Public Key: pk_test_xxxxxxxxxxxxxx
     • Secret Key: sk_test_xxxxxxxxxxxxxx

Keep these safe — you’ll need them soon.

---

3. Add Environment Variables

In your server folder, open your .env file and add:

PAYSTACK_SECRET_KEY=sk_test_xxxxxxxxxxxxxx
CLIENT_URL=http://localhost:5173

Make sure you restart your server after saving.

---

4. Create a Paystack Route in Express

In your backend code (usually in server/routes/payments.js), add this:

import express from "express";
import axios from "axios";

const router = express.Router();

router.post("/initialize", async (req, res) => {
  const { email, amount } = req.body;

  try {
    const response = await axios.post(
      "https://api.paystack.co/transaction/initialize",
      { email, amount: amount * 100 },
      {
        headers: {
          Authorization: `Bearer ${process.env.PAYSTACK_SECRET_KEY}`,
          "Content-Type": "application/json",
        },
      }
    );

    res.json({ authorization_url: response.data.data.authorization_url });
  } catch (error) {
    res.status(500).json({ error: "Failed to initialize payment" });
  }
});

export default router;

This route creates a Paystack transaction and returns an authorization link.

---

5. Connect It to the Frontend

In your React frontend (inside client/src/components/PaymentButton.jsx), use this component:

import { useState } from "react";
import axios from "axios";

export default function PaymentButton({ email, amount }) {
  const [loading, setLoading] = useState(false);

  const handlePayment = async () => {
    setLoading(true);
    try {
      const res = await axios.post("http://localhost:5000/api/payments/initialize", {
        email,
        amount,
      });
      window.location.href = res.data.authorization_url;
    } catch (error) {
      alert("Payment failed, please try again");
    } finally {
      setLoading(false);
    }
  };

  return (
    <button
      onClick={handlePayment}
      disabled={loading}
      className="btn btn-primary w-full"
    >
      {loading ? "Processing..." : "Pay with Paystack"}
    </button>
  );
}

When a user clicks “Pay with Paystack,” they’ll be redirected to the secure Paystack checkout page.

---

6. Handle Payment Success

After a successful payment, Paystack will redirect the user to your success URL (you can set it in your Paystack dashboard).

Example success route on your frontend:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function PaymentSuccess() {
  const location = useLocation();

  useEffect(() => {
    console.log("Payment successful:", location.search);
  }, []);

  return (
    <div className="text-center py-20">
      <h1 className="text-3xl font-bold mb-4">Payment Successful 🎉</h1>
      <p>Thank you for your purchase. You can now access all features.</p>
    </div>
  );
}

---

7. Deploying to Production

Once tested, replace your test keys with live keys in your environment file:

PAYSTACK_SECRET_KEY=sk_live_xxxxxxxxxxxxxx

Make sure your redirect URLs in Paystack match your live domain.

---

8. Optional: Combine Stripe and Paystack

If you serve users globally, keep both Paystack and Stripe as payment options.

Example toggle:

{user.region === "Africa" ? (
  <PaymentButton email={user.email} amount={29} />
) : (
  <StripeCheckoutButton email={user.email} amount={29} />
)}

---

Final Notes

Paystack integration gives your SaaS real earning power right out of the box.
With SassyPack, the backend and frontend setup is already structured — you just need to plug in your keys and connect the payment routes.

Start collecting payments today, the simple way.

Get SassyPack →