How to Add Stripe or Paystack Payments to Your SaaS in SassyPack

SaaS should generate revenue, not friction.

SassyPack supports Stripe and Paystack integration, allowing instant payments whether your users are in the United States, Europe, or Africa.

---

1. Choose Your Payment Gateway

• Stripe, for global users in North America, Europe, or Asia.
• Paystack, for African users in Nigeria, Kenya, Ghana, and South Africa.

You can enable both if your user base is international.

---

2. Set Up Stripe

1. Go to Stripe Dashboard
2. Create a new project or select an existing one
3. Copy your Publishable Key and Secret Key

In your SassyPack .env file:

STRIPE_SECRET_KEY=sk_test_...
STRIPE_PUBLIC_KEY=pk_test_...

Backend setup

Open: server/routes/paymentRoutes.js

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

Create a checkout session:

const session = await stripe.checkout.sessions.create({
  payment_method_types: ["card"],
  line_items: [
    {
      price_data: {
        currency: "usd",
        product_data: { name: "SaaS Pro Plan" },
        unit_amount: 1999,
      },
      quantity: 1,
    },
  ],
  mode: "subscription",
  success_url: "https://yourapp.com/success",
  cancel_url: "https://yourapp.com/cancel",
});

Frontend

In: client/src/pages/PricingPage.jsx

window.location.href = session.url;

This redirects the user to the secure Stripe checkout.

---

3. Set Up Paystack

For local currency transactions in NGN, KES, or GHS:

1. Go to Paystack Dashboard
2. Retrieve your Public Key and Secret Key

Add to your .env:

PAYSTACK_SECRET_KEY=sk_test_...
PAYSTACK_PUBLIC_KEY=pk_test_...

Backend setup

In: server/routes/paystackRoutes.js

const axios = require("axios");

const paystack = axios.create({
  baseURL: "https://api.paystack.co",
  headers: { Authorization: `Bearer ${process.env.PAYSTACK_SECRET_KEY}` },
});

Example route:

router.post("/pay", async (req, res) => {
  const { email, amount } = req.body;
  const response = await paystack.post("/transaction/initialize", {
    email,
    amount: amount * 100,
  });
  res.json(response.data);
});

Redirect users to data.authorization_url after initialization.

---

4. Offer Multiple Plans

In your frontend:

const plans = [
  { name: "Starter", price: 0, features: ["Free forever"] },
  { name: "Pro", price: 19, features: ["Auth, Payments, Blog"] },
  { name: "Team", price: 49, features: ["Unlimited users", "Priority support"] },
];

Render dynamically:

{plans.map(plan => (
  <div className="card p-6 shadow-lg rounded-2xl">
    <h3>{plan.name}</h3>
    <p>${plan.price}/mo</p>
    <ul>
      {plan.features.map(f => <li key={f}>✅ {f}</li>)}
    </ul>
  </div>
))}

---

5. Test Checkout

• Stripe Test Cards: stripe.com/docs/testing
• Paystack Test Cards: paystack.com/docs/payments/test-cards

Always confirm transactions before production.

---

6. Go Live

Update environment variables:

STRIPE_SECRET_KEY=sk_live_...
PAYSTACK_SECRET_KEY=sk_live_...

Your app can now accept real payments.

---

Final Notes

Payment integration turns your app from code to business.
SassyPack provides a production-ready setup for both global and local markets.
Once configured, your SaaS can handle subscriptions, one-time payments, or pre-orders efficiently.

Get SassyPack →