5 replies

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

Stripe how to handle multiple price_id?

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,
      })
    },
  };
}

Stripe how to handle multiple price_id?

Stripe how to handle multiple price_id?

Similar Threads

Similar Threads

Similar Threads