Theo's Typesafe Cult•16mo ago

Stripe how to handle multiple price_id?

Hey folks, I've been trying for the pass 3 days with my friend GPT to implement multiple price_ID for stripe checkout but in vain, I'd be actually happy to offer you a big coffee for a deep dive on how best to implement this. My current flow is working with 1 single price_ID but it seems I'm struggeling with the mutation / trpc to pass different stripe price_id associate to specific price card in the front end here is the current code working with 1 price_ID (my price_id) is in my .env checkout.ts (backend)

import {
  createTRPCRouter,
  protectedProcedure,
} from "~/server/api/trpc";

import Stripe from 'stripe';
import { env } from "~/env.mjs";

const stripe = new Stripe(env.STRIPE_SECRET_KEY, {
  apiVersion: '2022-11-15',
});



export const checkoutRouter = createTRPCRouter({
  createCheckout: protectedProcedure.mutation(async ({ ctx }) => {
    return stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      metadata: {
        userId: ctx.session.user.id,
      },
      line_items: [
        { price: env.PRICE_ID, quantity: 1 },
      ],
      mode: 'payment',
      success_url: `${env.HOST_NAME}`,
      cancel_url: `${env.HOST_NAME}`,
    });
  }),
});

import {
  createTRPCRouter,
  protectedProcedure,
} from "~/server/api/trpc";

import Stripe from 'stripe';
import { env } from "~/env.mjs";

const stripe = new Stripe(env.STRIPE_SECRET_KEY, {
  apiVersion: '2022-11-15',
});



export const checkoutRouter = createTRPCRouter({
  createCheckout: protectedProcedure.mutation(async ({ ctx }) => {
    return stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      metadata: {
        userId: ctx.session.user.id,
      },
      line_items: [
        { price: env.PRICE_ID, quantity: 1 },
      ],
      mode: 'payment',
      success_url: `${env.HOST_NAME}`,
      cancel_url: `${env.HOST_NAME}`,
    });
  }),
});

here is my stripe.ts (use to do my prisma increment of credits from the user db)

const webhook = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    const buf = await buffer(req);
    const sig = req.headers['stripe-signature'] as string;

    let event;

    try {
      event = stripe.webhooks.constructEvent(buf, sig, env.STRIPE_WEB_HOOK_SECRET);
    } catch (err) {
      let message = 'Unknown error'
      if (err instanceof Error) {
        message = err.message;
      }
      res.status(400).send(`Webhook Error: ${message}`);
      return;
    }
    switch (event.type) {
      case 'checkout.session.completed':
        const completedEvent = event.data.object as {
          id: string,
          metadata: {
            userId: string,
          };
        };
        await prisma.user.update({
          where: {
            id: completedEvent.metadata.userId
          },
          data: {
            credits: {
              increment: 100,
            }
          }
        });
        break;
      default:
        console.log(`Unhandled event type ${event.type}`);
    }
    res.json({ received: true })
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
};

const webhook = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    const buf = await buffer(req);
    const sig = req.headers['stripe-signature'] as string;

    let event;

    try {
      event = stripe.webhooks.constructEvent(buf, sig, env.STRIPE_WEB_HOOK_SECRET);
    } catch (err) {
      let message = 'Unknown error'
      if (err instanceof Error) {
        message = err.message;
      }
      res.status(400).send(`Webhook Error: ${message}`);
      return;
    }
    switch (event.type) {
      case 'checkout.session.completed':
        const completedEvent = event.data.object as {
          id: string,
          metadata: {
            userId: string,
          };
        };
        await prisma.user.update({
          where: {
            id: completedEvent.metadata.userId
          },
          data: {
            credits: {
              increment: 100,
            }
          }
        });
        break;
      default:
        console.log(`Unhandled event type ${event.type}`);
    }
    res.json({ received: true })
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
};

in my frontend I have a customs hook buyCredits

import { loadStripe } from '@stripe/stripe-js'
import { env } from '~/env.mjs'
import { api } from '~/utils/api';

const stripPromise = loadStripe(env.NEXT_PUBLIC_STRIPE_KEY)

export function useBuyCredit() {
  const checkout = api.checkout.createCheckout.useMutation();

  return {
    buyCredits: async () => {
      const response = await checkout.mutateAsync();
      const stripe = await stripPromise;
      await stripe?.redirectToCheckout({
        sessionId: response.id,
      })
    },
  };
}

import { loadStripe } from '@stripe/stripe-js'
import { env } from '~/env.mjs'
import { api } from '~/utils/api';

const stripPromise = loadStripe(env.NEXT_PUBLIC_STRIPE_KEY)

export function useBuyCredit() {
  const checkout = api.checkout.createCheckout.useMutation();

  return {
    buyCredits: async () => {
      const response = await checkout.mutateAsync();
      const stripe = await stripPromise;
      await stripe?.redirectToCheckout({
        sessionId: response.id,
      })
    },
  };
}

I believe I understand the logic, all I need is to map through a specific price_ID either on my .env or havng an object in the code to pass this on, in reality I'm unable to get the backend to work I'd be happy once again to compensate your time helping me

3 Replies

LeisureLlama•16mo ago

I am a little bit confused about what exactly you are trying to do here, but let me see if I can help a bit. If you want to pass custom data to a stripe checkout page, instead of sending a price_ID, you can send an object with the data you want. This would be a price data object. Here is about how I did it in my project.

line_items: [
  price_data: {
    currency: *what currency you want, for example                     "usd"*, 
    product_data: {
      name: *product name here*
      images: *url to img*
     },
    unit_amount: *put price here*
    },
    quantity: *number of items*,

line_items: [
  price_data: {
    currency: *what currency you want, for example                     "usd"*, 
    product_data: {
      name: *product name here*
      images: *url to img*
     },
    unit_amount: *put price here*
    },
    quantity: *number of items*,

I cant find the page in the docs that has the info for this, but this page should be helpful https://stripe.com/docs/payments/checkout/migrating-prices If this does not work for you, you might have to pass the different price_id from the frontend into the backend in your request, so that you can send that to stripe. I did that through a checkout sessions handler that my cart pushes to. Hopefully some of this helps, if not let me know!

Checkout prices migration guide

Learn how to update your integration to use prices with Stripe Checkout.

shvzOP•16mo ago

this actually help! thank a lot Leisure!

LeisureLlama•16mo ago

Awesome, glad I could help!

Gaming

Programming

Stripe how to handle multiple price_id?