Work Notes: Implementing Stripe payments for CB


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.

https://stripe.com/docs/api/payment_intents/list#list_payment_intents-customer
https://stripe.com/docs/api/charges/list#list_charges-customer

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.


One response to “Work Notes: Implementing Stripe payments for CB”

  1. The passage discusses the process of implementing Stripe payments for a project referred to as “CB.” The author reflects on their approach to managing user records and statuses, integrating with the Stripe API, and the use of webhooks. The implementation involves creating a payment gateway for a paid trial and addressing issues related to subscriptions and webhooks.

    On Tue Oct 17, 2023, the author suggests simplifying the approach by focusing on recording user data and integrating the sign-in logic with Stripe logic. The mention of working on “Clerk” indicates the involvement of another tool or system in the process. The author also discusses the need to handle new user creation and their integration into the system.

    On Sat Oct 21, 2023, the author looks into adding webhooks and explores ways to ping the customer list of Stripe. They express the need to create a payment gateway to acquire new customers.

    The subsequent entries on Tue Oct 24 and Wed Oct 25, 2023, show the author’s work on webhooks for Stripe and their effort to eliminate Supabase for monthly payments in favor of Prisma and MySQL. There’s also a plan to rewrite code to use Clerk instead of NextAuth.

    On Thu Oct 26 and Fri Oct 27, 2023, the author addresses issues related to session data and fetching client IDs using Clerk, including code snippets demonstrating the process.

    The entry on Sat Oct 28, 2023, mentions reading a README and contemplating adding another account for testing purposes.

    On Sun Oct 29, 2023, the author discovers that Clerk has organization logic out of the box, and on Mon Oct 30, 2023, they express a focus on getting the Stripe payment gateway working.

    The entries on Tue Oct 31, 2023, and Wed Nov 01, 2023, detail efforts to get information about products a customer is subscribed to via their Stripe Customer ID. The author provides links to Stripe documentation and mentions ongoing work on integrating route ID codes and an organization switcher.

    The final entry on Wed Nov 08, 2023, discusses fixing issues related to object destructuring and the constant refresh bug, referring to specific code changes.

    Overall, the passage highlights the author’s step-by-step progress in implementing Stripe payments, addressing technical challenges, and integrating with Clerk, while also mentioning the use of webhooks and the need to handle organization logic.

Leave a Reply