New Day: Tue Oct 17 2023 10:23:54 GMT-0500 (Central Daylight Time)

I think we’ve been overthinking this.

I just have to have a record of users and the status of those users. Then use the Stripe API or PayPal API to update the status of those users.

Tie sign in logic with stripe logic, so we can see a list of users and the values they have, right now, I think it’s anyone who signs in can see whatever.

I gotta work on Clerk.

When a new user is created or the uses hasn’t been created before I need to add that to the system.

This is what we’re doing a paid trial.

Implement 1

New Day: Sat Oct 21 2023 14:49:29 GMT-0500 (Central Daylight Time)

Looking at adding webhooks and reading this guide.

New Day: Sun Oct 22 2023 15:12:55 GMT-0500 (Central Daylight Time)

I am going to make a sub article of this about pinging the customer list of Stripe.

Now that I figured out how to ping the list of customers, there is not customer list obviously because we haven’t had customers, also I would like to know whom is a customer for which product.

Now, we have to create a payment gateway to get a new customer.

…

I copied this website and now I just need to redo the .env.local for my own Stripe product and keep it moving.

New Day: Tue Oct 24 2023 09:08:16 GMT-0500 (Central Daylight Time)

Working on webhooks for Stripe, see here.

This here is what I’m looking for but it only works if your subscribed ig this is fine if it opens a popup to signin and then directly takes you to the checkout.

….

This subscription page is much more complex than just the dono site.

…

When the subscribe button is hit the following code is ran:

    try {
      const { sessionId } = await postData({
        url: '/api/create-checkout-session',
        data: { price }
      });

      const stripe = await getStripe();
      stripe?.redirectToCheckout({ sessionId });
    } catch (error) {
      return alert((error as Error)?.message);
    } finally {
      setPriceIdLoading(undefined);
    }

The business logic for the checkout session can be found, here.

Currently trying to eliminate supabase anyone can pay for monthly (testing obv).

This one will work better for us because it uses Prisma and MySQL rather than being more different like the Vercel example mentioned earlier is.

…

We have to rewrite it to use clerk rather than nextauth then after that we will integrate that project into CB.

New Day: Wed Oct 25 2023 10:01:26 GMT-0500 (Central Daylight Time)

So we have to figure out,

{ getServerSession } from “next-auth”;

equivalent in clerk.

New Day: Thu Oct 26 2023 12:19:47 GMT-0500 (Central Daylight Time)

This helps, here for my error.

Trying to get session data from the server, reading this.

New Day: Fri Oct 27 2023 10:41:20 GMT-0500 (Central Daylight Time)

Okay, so we figured out how to get the client id via a fetch call. You have call it from the client NOT from a server component!

Then the route.ts file should look like:

import { auth } from '@clerk/nextjs';


export async function GET(request: Request) {
    const { userId } = auth();
    // Access user session data
    console.log(userId);

    if (userId) {
        return new Response(userId.toString(), {
            status: 200,
        });
    }
}

and the client, ‘use client’ should look like:

async function callClerkSessionRequest() {
    try {
        const response = await fetch('/api/clerk/user-session', {
            method: 'GET',
            // You can add any additional headers or options here if needed.
        });

        if (response.ok) {
            // The request was successful, you can now handle the response.
            const data = await response.text();
            console.log(data);
        } else {
            // Handle the case where the request was not successful (e.g., 404 or 500).
            console.error('Request failed with status:', response.status);
        }
    } catch (error) {
        // Handle any network or other errors that may occur.
        console.error('Request failed:', error);
    }
}

New Day: Sat Oct 28 2023 12:59:21 GMT-0500 (Central Daylight Time)

Reading this README.

…

I think I’m going to add another account from zchavours@gmail.com and be like you can’t access this cause your not dchavours@gmail.com and have it be only an account page with the account status of unpaid.

New Day: Sun Oct 29 2023 14:00:58 GMT-0500 (Central Daylight Time)

I just found out Clerk has Organization logic just out of the box.

New Day: Mon Oct 30 2023 07:20:23 GMT-0500 (Central Daylight Time)

We could work on that organization logic but we’re still focused on getting that Stripe payment gateway working.

Get payment gateway to work.

Focusing on the upgrade page.

I think I can make a rudimentary option based on emails but I’d much rather tie the clerk id and the stripe customer id together.

Save all clerk ids, I should be able to have a drop down of all relevant users which will tell me the user’s Stripe id.

Figure out how to get the Stripe customer id.

The only thing I’m going to need is to like save the customer ( stripeID) with the clerkID. Everything else can just be like, pinged via the Stripe server

New Day: Tue Oct 31 2023 08:38:38 GMT-0500 (Central Daylight Time)

Figure out how to get the products a customer is subscribed via their Stripe Customer ID used to ping the Stripe servers.

This, here is what I’m looking for but I’m still working on the params.

New Day: Wed Nov 01 2023 11:02:35 GMT-0500 (Central Daylight Time)

We would like to add the Organization switcher and get scheduling routine right. Also, integrate more route ID codes (415VNA, 258AVO).

Adding Organization Switcher, get console.log off the organization a user is in.

Working on the following code:

import Clerk from '@clerk/clerk-js';

    const clerkFrontendApi = `{{pub_key}}`;
    const clerk = new Clerk(clerkFrontendApi);
    await clerk.load({
      // Set load options here...
    });

Looking at getOrganization()

New Day: Wed Nov 08 2023 07:03:26 GMT-0600 (Central Standard Time)

We should have been destructing the object like this rather than putzing around with those Interfaces.

    const { status,
        start_date,
        current_period_end,
        trial_end,
        items
  } = subscriptions.data[0];

Doing something like this could’ve fixed it but I’m going to keep on rolling:

interface SubscriptionWithPlan extends StripeSubscription {
  plan: string;
}

…

7 – refresh is the commit which fixed the issue of the constant refresh bug.

Key Implementation Steps:

1. Connect User Authentication with Payments:

• Store Clerk user IDs and Stripe customer IDs together
• Create record of users and their subscription status
• Implement sign-in logic tied to Stripe logic

2. Stripe Integration:

• Set up payment gateway with Stripe checkout session
• Implement webhook handling
• Add subscription status checking
• Structure the checkout flow: button click → create session → redirect to checkout

3. Clerk Integration:

• For server-side user session data, use Clerk’s auth() instead of NextAuth’s getServerSession
• Access client ID through client-side fetch calls, not server components
• Structure API routes using Clerk’s auth middleware

4. Data Model Fix:

• Destructure subscription data objects properly instead of using interfaces:

javascript

const { 
    status,
    start_date,
    current_period_end,
    trial_end,
    items 
} = subscriptions.data[0];

The notes indicate that this approach resolved a constant refresh bug in the application (referenced in commit “7 – refresh”).

Start: Dec 21 2024

We are just going to fiddle around on the settings page to instantiate Stripe, see here.