Stripe Integration

.env.example

@@ -74,6 +74,7 @@ FEATURE_TEAM_AUDIT_LOG=true
 FEATURE_TEAM_WEBHOOK=true
 FEATURE_TEAM_API_KEY=true
 FEATURE_TEAM_DELETION=true
+FEATURE_TEAM_PAYMENTS=true
 
 # Google reCAPTCHA
 RECAPTCHA_SITE_KEY=
@@ -99,3 +100,7 @@ MAX_LOGIN_ATTEMPTS=5
 
 # Set this to receive Slack notifications, https://hooks.slack.com/services/xxx/xxx/xxx
 SLACK_WEBHOOK_URL=
+
+# Stripe
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=

components/payments/productPricing.tsx

@@ -0,0 +1,131 @@
+import { CheckIcon } from '@heroicons/react/20/solid';
+import { useTranslation } from 'next-i18next';
+import { Button, Card } from 'react-daisyui';
+import Image from 'next/image';
+import useTeam from 'hooks/useTeam';
+import router from 'next/router';
+import toast from 'react-hot-toast';
+
+const ProductPricing = ({
+  plans,
+  disabledPrices,
+}: {
+  plans: any[];
+  disabledPrices: string[];
+}) => {
+  const { team } = useTeam();
+  const { t } = useTranslation('common');
+  const initiateCheckout = async (priceId: string, quantity?: number) => {
+    const res = await fetch(
+      `/api/teams/${team?.slug}/payments/create-checkout-session`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ priceId, quantity }),
+      }
+    );
+
+    const data = await res.json();
+
+    if (data?.data?.url) {
+      router.push(data.data.url);
+    } else {
+      toast.error(
+        data?.error?.message ||
+          data?.error?.raw?.message ||
+          t('stripe-checkout-fallback-error')
+      );
+    }
+  };
+  return (
+    <section className="py-6">
+      <div className="flex flex-col justify-center space-y-6">
+        <h2 className="text-center text-4xl font-bold normal-case">
+          {t('pricing')}
+        </h2>
+        <div className="flex items-center justify-center">
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+            {plans.map((plan, index) => {
+              return (
+                <Card
+                  key={`plan-${index}`}
+                  className="rounded-md dark:border-gray-200 border border-gray-300"
+                >
+                  <Card.Body>
+                    <Card.Title tag="h2">
+                      <h2 className="mx-auto">{plan.name}</h2>
+                    </Card.Title>
+                    <Image
+                      className="mx-auto"
+                      src={plan.image || ''}
+                      alt={plan.name}
+                      width={100}
+                      height={100}
+                    />
+                    <p>{plan.description}</p>
+                    <div className="mt-5">
+                      <ul className="flex flex-col space-y-2">
+                        {plan.features.map(
+                          (feature: any, itemIndex: number) => {
+                            return (
+                              <li
+                                key={`plan-${index}-benefit-${itemIndex}`}
+                                className="flex items-center"
+                              >
+                                <CheckIcon className="h-5 w-5" />
+                                <span className="ml-1">{feature}</span>
+                              </li>
+                            );
+                          }
+                        )}
+                      </ul>
+                    </div>
+                  </Card.Body>
+                  <Card.Actions className="justify-center m-2">
+                    {(plan?.prices || [])
+                      .sort(
+                        (a, b) => a.recurring.interval < b.recurring.interval
+                      )
+                      .map((price: any, priceIndex: number) => {
+                        return (
+                          <Button
+                            key={`plan-${index}-price-${priceIndex}`}
+                            color="primary"
+                            className="md:w-full w-3/4 rounded-md"
+                            size="md"
+                            disabled={disabledPrices.includes(price.id)}
+                            onClick={() => {
+                              initiateCheckout(
+                                price.id,
+                                (price.billingScheme == 'per_unit' ||
+                                  price.billingScheme == 'tiered') &&
+                                  price.recurring.usage_type !== 'metered'
+                                  ? 1
+                                  : undefined
+                              );
+                            }}
+                          >
+                            {price?.recurring?.interval
+                              ? `${
+                                  price?.recurring?.interval === 'month'
+                                    ? 'Monthly Plan'
+                                    : 'Yearly Plan'
+                                } `
+                              : 'Buy Now'}
+                          </Button>
+                        );
+                      })}
+                  </Card.Actions>
+                </Card>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProductPricing;

components/team/TeamTab.tsx

@@ -5,6 +5,7 @@ import {
   PaperAirplaneIcon,
   ShieldExclamationIcon,
   UserPlusIcon,
+  BanknotesIcon,
 } from '@heroicons/react/24/outline';
 import type { Team } from '@prisma/client';
 import classNames from 'classnames';
@@ -76,6 +77,18 @@ const TeamTab = ({ activeTab, team, heading, teamFeatures }: TeamTabProps) => {
     });
   }
 
+  if (
+    teamFeatures.payments &&
+    canAccess('team_payments', ['create', 'update', 'read', 'delete'])
+  ) {
+    navigations.push({
+      name: 'Payments',
+      href: `/teams/${team.slug}/payments`,
+      active: activeTab === 'payments',
+      icon: BanknotesIcon,
+    });
+  }
+
   if (
     teamFeatures.webhook &&
     canAccess('team_webhook', ['create', 'update', 'read', 'delete'])

lib/env.ts

@@ -96,6 +96,7 @@ const env = {
     webhook: process.env.FEATURE_TEAM_WEBHOOK === 'false' ? false : true,
     apiKey: process.env.FEATURE_TEAM_API_KEY === 'false' ? false : true,
     auditLog: process.env.FEATURE_TEAM_AUDIT_LOG === 'false' ? false : true,
+    payments: process.env.FEATURE_TEAM_PAYMENTS === 'false' ? false : true,
     deleteTeam: process.env.FEATURE_TEAM_DELETION === 'false' ? false : true,
   },
 
@@ -107,6 +108,11 @@ const env = {
   maxLoginAttempts: Number(process.env.MAX_LOGIN_ATTEMPTS) || 5,
 
   slackWebhookUrl: process.env.SLACK_WEBHOOK_URL,
+
+  stripe: {
+    stripeSecretKey: process.env.STRIPE_SECRET_KEY,
+    stripeWebhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
+  },
 };
 
 export default env;

lib/permissions.ts

@@ -10,6 +10,7 @@ export type Resource =
   | 'team_dsync'
   | 'team_audit_log'
   | 'team_webhook'
+  | 'team_payments'
   | 'team_api_key';
 
 export type RolePermissions = {
@@ -62,6 +63,10 @@ export const permissions: RolePermissions = {
       resource: 'team_audit_log',
       actions: '*',
     },
+    {
+      resource: 'team_payments',
+      actions: '*',
+    },
     {
       resource: 'team_webhook',
       actions: '*',

lib/stripe.ts

@@ -0,0 +1,48 @@
+import { createStripeTeam, getByTeamId } from 'models/stripeTeam';
+import Stripe from 'stripe';
+import env from '@/lib/env';
+
+export const stripe = new Stripe(env.stripe.stripeSecretKey ?? '', {
+  // https://github.com/stripe/stripe-node#configuration
+  apiVersion: '2022-11-15',
+  // Register this as an official Stripe plugin.
+  // https://stripe.com/docs/building-plugins#setappinfo
+  appInfo: {
+    name: 'saas-starter-kit',
+    version: '0.1.0',
+  },
+});
+
+export const getURL = () => {
+  let url = env.appUrl || 'http://localhost:4002/';
+  // Make sure to include `https://` when not localhost.
+  url = url.includes('http') ? url : `https://${url}`;
+  // Make sure to including trailing `/`.
+  url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
+  return url;
+};
+
+export async function getStripeCustomerId(teamMember, session?: any) {
+  let customerId = '';
+  const stripeTeam = await getByTeamId(teamMember.teamId);
+  if (!stripeTeam) {
+    const customerData: {
+      metadata: { teamId: string };
+      email?: string;
+    } = {
+      metadata: {
+        teamId: teamMember.teamId,
+      },
+    };
+    if (session?.user?.email) customerData.email = session?.user?.email;
+    const customer = await stripe.customers.create({
+      ...customerData,
+      name: session?.user?.name as string,
+    });
+    await createStripeTeam(teamMember.teamId, customer.id);
+    customerId = customer.id;
+  } else {
+    customerId = stripeTeam.customerId;
+  }
+  return customerId;
+}

locales/en/common.json

@@ -198,5 +198,11 @@
   "remove-other-browser-session-warning": "Once removed you will be logged out of the app on that browser.",
   "remove-current-browser-session-warning": "You are about to remove your current session. Once you do this, you will be logged out of the app.",
   "session-removed": "Browser session removed.",
-  "remove-team-restricted": "Please contact our support if you want to remove this team. We will help you with that."
+  "remove-team-restricted": "Please contact our support if you want to remove this team. We will help you with that.",
+  "open-customer-portal": "Open Customer Portal",
+  "subscriptions": "Subscriptions",
+  "from": "From",
+  "to": "To",
+  "stripe-checkout-fallback-error": "Somthing went wrong while initiating checkout, please try again later.",
+  "error-occurred": "An error occurred"
 }

middleware.ts

@@ -13,6 +13,7 @@ const unAuthenticatedRoutes = [
   '/api/oauth/**',
   '/api/scim/v2.0/**',
   '/api/invitations/*',
+  '/api/webhooks/stripe',
   '/api/webhooks/dsync',
   '/auth/**',
   '/invitations/*',

models/stripePrice.ts

@@ -0,0 +1,6 @@
+import { prisma } from '@/lib/prisma';
+
+export const getAllPrices = async () => {
+  const prices = await prisma.stripePrice.findMany({});
+  return prices;
+};

models/stripeProduct.ts

@@ -0,0 +1,6 @@
+import { prisma } from '@/lib/prisma';
+
+export const getAllProducts = async () => {
+  const products = await prisma.stripeProduct.findMany({});
+  return products;
+};

models/stripeSubscription.ts

@@ -0,0 +1,53 @@
+import { prisma } from '@/lib/prisma';
+
+export const createStripeSubscription = async (
+  customerId: string,
+  subscriptionId: string,
+  active: boolean,
+  startDate: Date,
+  endDate: Date,
+  priceId: string
+) => {
+  const stripeSubscription = await prisma.stripeSubscription.create({
+    data: {
+      customerId,
+      subscriptionId,
+      active,
+      startDate,
+      endDate,
+      priceId,
+    },
+  });
+  return stripeSubscription;
+};
+
+export const deleteStripeSubscription = async (subscriptionId: string) => {
+  const stripeSubscription = await prisma.stripeSubscription.deleteMany({
+    where: {
+      subscriptionId,
+    },
+  });
+  return stripeSubscription;
+};
+
+export const updateStripeSubscription = async (
+  subscriptionId: string,
+  data: any
+) => {
+  const stripeSubscription = await prisma.stripeSubscription.updateMany({
+    where: {
+      subscriptionId,
+    },
+    data,
+  });
+  return stripeSubscription;
+};
+
+export const getByCustomerId = async (customerId: string) => {
+  const stripeSubscription = await prisma.stripeSubscription.findMany({
+    where: {
+      customerId,
+    },
+  });
+  return stripeSubscription;
+};

models/stripeTeam.ts

@@ -0,0 +1,27 @@
+import { prisma } from '@/lib/prisma';
+
+export const createStripeTeam = async (teamId: string, customerId: string) => {
+  const stripeTeam = await prisma.stripeTeam.create({
+    data: {
+      teamId,
+      customerId,
+    },
+  });
+  return stripeTeam;
+};
+
+export const getByTeamId = async (teamId: string) => {
+  return await prisma.stripeTeam.findUnique({
+    where: {
+      teamId,
+    },
+  });
+};
+
+export const getByCustomerId = async (customerId: string) => {
+  return await prisma.stripeTeam.findFirstOrThrow({
+    where: {
+      customerId,
+    },
+  });
+};

next.config.js

@@ -13,6 +13,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'boxyhq.com',
       },
+      {
+        protocol: 'https',
+        hostname: 'files.stripe.com',
+      },
     ],
   },
   i18n,