feat: add Paystack payment integration

apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx

@@ -60,6 +60,16 @@ const BtcpayPaymentComponent = dynamic(
   }
 );
 
+const PaystackPaymentComponent = dynamic(
+  () =>
+    import("@calcom/web/components/apps/paystack/PaystackPaymentComponent").then(
+      (m) => m.PaystackPaymentComponent
+    ),
+  {
+    ssr: false,
+  }
+);
+
 const PaymentPage: FC<PaymentPageProps> = (props) => {
   const { t, i18n } = useLocale();
   const [is24h, setIs24h] = useState(isBrowserLocale24h());
@@ -171,6 +181,15 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                   {props.payment.appId === "btcpayserver" && !props.payment.success && (
                     <BtcpayPaymentComponent payment={props.payment} paymentPageProps={props} />
                   )}
+                  {props.payment.appId === "paystack" && !props.payment.success && (
+                    <PaystackPaymentComponent
+                      payment={props.payment}
+                      bookingUid={props.booking.uid}
+                      bookingTitle={eventName}
+                      amount={props.payment.amount}
+                      currency={props.payment.currency}
+                    />
+                  )}
                   {props.payment.refunded && (
                     <div className="mt-4 text-center text-default dark:text-gray-300">{t("refunded")}</div>
                   )}

apps/web/components/apps/AppSetupPage.tsx

@@ -15,6 +15,7 @@ export const AppSetupMap = {
   paypal: dynamic(() => import("@calcom/web/components/apps/paypal/Setup")),
   hitpay: dynamic(() => import("@calcom/web/components/apps/hitpay/Setup")),
   btcpayserver: dynamic(() => import("@calcom/web/components/apps/btcpayserver/Setup")),
+  paystack: dynamic(() => import("@calcom/web/components/apps/paystack/Setup")),
 };
 
 export const AppSetupPage = (props: { slug: string }) => {

apps/web/components/apps/paystack/PaystackPaymentComponent.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import z from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const PaystackInlineComponent = dynamic(
+  () => import("@calcom/app-store/paystack/components/PaystackPaymentComponent"),
+  { ssr: false }
+);
+
+const PaystackPaymentDataSchema = z.object({
+  access_code: z.string().min(1),
+  authorization_url: z.string().url(),
+  publicKey: z.string().min(1),
+  reference: z.string().min(1),
+});
+
+type Props = {
+  payment: { data: unknown };
+  bookingUid: string;
+  bookingTitle: string;
+  amount: number;
+  currency: string;
+};
+
+export const PaystackPaymentComponent = ({
+  payment,
+  bookingUid,
+  bookingTitle,
+  amount,
+  currency,
+}: Props) => {
+  const { t } = useLocale();
+  const parsed = PaystackPaymentDataSchema.safeParse(payment.data);
+
+  if (!parsed.success) {
+    return <p className="mt-3 text-center">{t("payment_failed_try_again")}</p>;
+  }
+
+  return (
+    <PaystackInlineComponent
+      payment={{ data: parsed.data }}
+      bookingUid={bookingUid}
+      bookingTitle={bookingTitle}
+      amount={amount}
+      currency={currency}
+    />
+  );
+};

apps/web/components/apps/paystack/Setup.tsx

@@ -0,0 +1,133 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Toaster } from "sonner";
+
+import AppNotInstalledMessage from "@calcom/app-store/_components/AppNotInstalledMessage";
+import { APP_NAME } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
+import { TextField } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
+
+export default function PaystackSetup() {
+  const [newPublicKey, setNewPublicKey] = useState("");
+  const [newSecretKey, setNewSecretKey] = useState("");
+  const router = useRouter();
+  const { t } = useLocale();
+
+  const integrations = trpc.viewer.apps.integrations.useQuery({
+    variant: "payment",
+    appId: "paystack",
+  });
+
+  const [paystackCredentials] = integrations.data?.items || [];
+  const credentialId = paystackCredentials?.userCredentialIds?.[0];
+
+  const showContent =
+    !!integrations.data && integrations.isSuccess && typeof credentialId === "number" && credentialId > 0;
+
+  const saveKeysMutation = trpc.viewer.apps.updateAppCredentials.useMutation({
+    onSuccess: () => {
+      showToast(t("keys_have_been_saved"), "success");
+      router.push("/event-types");
+    },
+    onError: (error) => {
+      showToast(error.message, "error");
+    },
+  });
+
+  if (integrations.isPending) {
+    return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
+  }
+
+  return (
+    <div className="bg-default flex h-screen">
+      {showContent ? (
+        <div className="bg-default border-subtle m-auto max-w-[43em] overflow-auto rounded border pb-10 md:p-10">
+          <div className="ml-2 ltr:mr-2 rtl:ml-2 md:ml-5">
+            <div className="invisible md:visible">
+              <img className="h-11" src="/api/app-store/paystack/icon.svg" alt="Paystack" />
+              <p className="text-default mt-5 text-lg">Paystack</p>
+            </div>
+
+            <form
+              autoComplete="off"
+              className="mt-5"
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (typeof credentialId !== "number") return;
+                saveKeysMutation.mutate({
+                  credentialId,
+                  key: {
+                    public_key: newPublicKey,
+                    secret_key: newSecretKey,
+                  },
+                });
+              }}>
+              <TextField
+                label={t("paystack_public_key")}
+                type="text"
+                name="public_key"
+                id="public_key"
+                value={newPublicKey}
+                onChange={(e) => setNewPublicKey(e.target.value)}
+                className="mb-6"
+                placeholder="pk_test_xxxxxxxxx"
+              />
+
+              <TextField
+                label={t("paystack_secret_key")}
+                type="password"
+                name="secret_key"
+                id="secret_key"
+                value={newSecretKey}
+                autoComplete="new-password"
+                onChange={(e) => setNewSecretKey(e.target.value)}
+                placeholder="sk_test_xxxxxxxxx"
+              />
+
+              <div className="mt-5 flex flex-row justify-end">
+                <Button
+                  type="submit"
+                  color="primary"
+                  loading={saveKeysMutation.isPending}
+                  disabled={!newPublicKey || !newSecretKey}>
+                  {t("save")}
+                </Button>
+              </div>
+            </form>
+
+            <div className="mt-5">
+              <p className="text-default font-bold">{t("getting_started")}</p>
+              <p className="text-default mt-2">
+                {t("paystack_getting_started_description", { appName: APP_NAME })}{" "}
+                <a
+                  className="text-blue-600 underline"
+                  target="_blank"
+                  href="https://dashboard.paystack.com/#/settings/developers"
+                  rel="noreferrer">
+                  {t("paystack_dashboard")}
+                </a>
+                .
+              </p>
+
+              <p className="text-default mt-4 font-bold">{t("paystack_webhook_setup")}</p>
+              <p className="text-default mt-2">
+                {t("paystack_webhook_setup_description")}
+              </p>
+              <code className="bg-subtle mt-2 block rounded p-2 text-sm">
+                {typeof window !== "undefined" ? window.location.origin : "https://your-cal.com"}
+                /api/integrations/paystack/webhook
+              </code>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <AppNotInstalledMessage appName="paystack" />
+      )}
+
+      <Toaster position="bottom-right" />
+    </div>
+  );
+}

lint-staged.config.mjs

@@ -1,7 +1,11 @@
 const quotePath = (file) => `"${file.replace(/"/g, '\\"')}"`;
 
 export default {
-  "(apps|packages|companion)/**/*.{js,ts,jsx,tsx}": (files) =>
-    `biome lint --reporter summary --config-path=biome-staged.json ${files.map(quotePath).join(" ")}`,
+  "(apps|packages|companion)/**/*.{js,ts,jsx,tsx}": (files) => {
+    // biome.json ignores **/*.d.ts; passing them in errors the run.
+    const lintable = files.filter((f) => !f.endsWith(".d.ts"));
+    if (lintable.length === 0) return [];
+    return `biome lint --reporter summary --config-path=biome-staged.json ${lintable.map(quotePath).join(" ")}`;
+  },
   "packages/prisma/schema.prisma": ["prisma format"],
 };

packages/app-store/_pages/setup/_getServerSideProps.tsx

@@ -6,6 +6,7 @@ export const AppSetupPageMap = {
   stripe: import("../../stripepayment/pages/setup/_getServerSideProps"),
   hitpay: import("../../hitpay/pages/setup/_getServerSideProps"),
   btcpayserver: import("../../btcpayserver/pages/setup/_getServerSideProps"),
+  paystack: import("../../paystack/pages/setup/_getServerSideProps"),
 };
 
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {

packages/app-store/apps.browser.generated.tsx

@@ -35,6 +35,7 @@ export const EventTypeAddonMap = {
   metapixel: dynamic(() => import("./metapixel/components/EventTypeAppCardInterface")),
   "mock-payment-app": dynamic(() => import("./mock-payment-app/components/EventTypeAppCardInterface")),
   paypal: dynamic(() => import("./paypal/components/EventTypeAppCardInterface")),
+  paystack: dynamic(() => import("./paystack/components/EventTypeAppCardInterface")),
   "pipedrive-crm": dynamic(() => import("./pipedrive-crm/components/EventTypeAppCardInterface")),
   plausible: dynamic(() => import("./plausible/components/EventTypeAppCardInterface")),
   posthog: dynamic(() => import("./posthog/components/EventTypeAppCardInterface")),
@@ -64,6 +65,7 @@ export const EventTypeSettingsMap = {
   hitpay: dynamic(() => import("./hitpay/components/EventTypeAppSettingsInterface")),
   metapixel: dynamic(() => import("./metapixel/components/EventTypeAppSettingsInterface")),
   paypal: dynamic(() => import("./paypal/components/EventTypeAppSettingsInterface")),
+  paystack: dynamic(() => import("./paystack/components/EventTypeAppSettingsInterface")),
   plausible: dynamic(() => import("./plausible/components/EventTypeAppSettingsInterface")),
   qr_code: dynamic(() => import("./qr_code/components/EventTypeAppSettingsInterface")),
   stripepayment: dynamic(() => import("./stripepayment/components/EventTypeAppSettingsInterface")),

packages/app-store/apps.keys-schemas.generated.ts

@@ -32,6 +32,7 @@ import { appKeysSchema as nextcloudtalk_zod_ts } from "./nextcloudtalk/zod";
 import { appKeysSchema as office365calendar_zod_ts } from "./office365calendar/zod";
 import { appKeysSchema as office365video_zod_ts } from "./office365video/zod";
 import { appKeysSchema as paypal_zod_ts } from "./paypal/zod";
+import { appKeysSchema as paystack_zod_ts } from "./paystack/zod";
 import { appKeysSchema as pipedrive_crm_zod_ts } from "./pipedrive-crm/zod";
 import { appKeysSchema as plausible_zod_ts } from "./plausible/zod";
 import { appKeysSchema as posthog_zod_ts } from "./posthog/zod";
@@ -83,6 +84,7 @@ export const appKeysSchemas = {
   office365calendar: office365calendar_zod_ts,
   office365video: office365video_zod_ts,
   paypal: paypal_zod_ts,
+  paystack: paystack_zod_ts,
   "pipedrive-crm": pipedrive_crm_zod_ts,
   plausible: plausible_zod_ts,
   posthog: posthog_zod_ts,

packages/app-store/apps.metadata.generated.ts

@@ -69,6 +69,7 @@ import nextcloudtalk_config_json from "./nextcloudtalk/config.json";
 import { metadata as office365calendar__metadata_ts } from "./office365calendar/_metadata";
 import office365video_config_json from "./office365video/config.json";
 import paypal_config_json from "./paypal/config.json";
+import paystack_config_json from "./paystack/config.json";
 import ping_config_json from "./ping/config.json";
 import pipedream_config_json from "./pipedream/config.json";
 import pipedrive_crm_config_json from "./pipedrive-crm/config.json";
@@ -181,6 +182,7 @@ export const appStoreMetadata = {
   office365calendar: office365calendar__metadata_ts,
   office365video: office365video_config_json,
   paypal: paypal_config_json,
+  paystack: paystack_config_json,
   ping: ping_config_json,
   pipedream: pipedream_config_json,
   "pipedrive-crm": pipedrive_crm_config_json,

packages/app-store/apps.schemas.generated.ts

@@ -32,6 +32,7 @@ import { appDataSchema as nextcloudtalk_zod_ts } from "./nextcloudtalk/zod";
 import { appDataSchema as office365calendar_zod_ts } from "./office365calendar/zod";
 import { appDataSchema as office365video_zod_ts } from "./office365video/zod";
 import { appDataSchema as paypal_zod_ts } from "./paypal/zod";
+import { appDataSchema as paystack_zod_ts } from "./paystack/zod";
 import { appDataSchema as pipedrive_crm_zod_ts } from "./pipedrive-crm/zod";
 import { appDataSchema as plausible_zod_ts } from "./plausible/zod";
 import { appDataSchema as posthog_zod_ts } from "./posthog/zod";
@@ -83,6 +84,7 @@ export const appDataSchemas = {
   office365calendar: office365calendar_zod_ts,
   office365video: office365video_zod_ts,
   paypal: paypal_zod_ts,
+  paystack: paystack_zod_ts,
   "pipedrive-crm": pipedrive_crm_zod_ts,
   plausible: plausible_zod_ts,
   posthog: posthog_zod_ts,

packages/app-store/apps.server.generated.ts

@@ -51,6 +51,7 @@ export const apiHandlers = {
   office365calendar: import("./office365calendar/api"),
   office365video: import("./office365video/api"),
   paypal: import("./paypal/api"),
+  paystack: import("./paystack/api"),
   ping: import("./ping/api"),
   "pipedrive-crm": import("./pipedrive-crm/api"),
   plausible: import("./plausible/api"),

packages/app-store/payment.services.generated.ts

@@ -8,5 +8,6 @@ export const PaymentServiceMap = {
   hitpay: import("./hitpay/lib/PaymentService"),
   "mock-payment-app": import("./mock-payment-app/lib/PaymentService"),
   paypal: import("./paypal/lib/PaymentService"),
+  paystack: import("./paystack/lib/PaymentService"),
   stripepayment: import("./stripepayment/lib/PaymentService"),
 };

packages/app-store/paystack/_metadata.ts

@@ -0,0 +1,22 @@
+import type { AppMeta } from "@calcom/types/App";
+
+import _package from "./package.json";
+
+export const metadata = {
+  name: "Paystack",
+  description: _package.description,
+  installed: true,
+  type: "paystack_payment",
+  variant: "payment",
+  logo: "icon.svg",
+  publisher: "Cal.com",
+  url: "https://paystack.com",
+  categories: ["payment"],
+  slug: "paystack",
+  title: "Paystack",
+  email: "support@cal.com",
+  dirName: "paystack",
+  isOAuth: true,
+} as AppMeta;
+
+export default metadata;