shvz Posts - Answer Overflow

shvz

•Created by shvz on 8/28/2023 in #questions

mutateAsync()

hey, I'm running into an issue where I can't figure out my way, I have a hook I use in my front to pass and create a checkout to my back but I have this weird error with mutateAsynch( { priceId } ) which cannot be assign apparently

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<{ priceId: string }>();

  return {
    buyCredits: async (priceId: string) => {
      try {
        const response = await checkout.mutateAsync({ priceId });
        const stripe = await stripPromise;
        await stripe?.redirectToCheckout({
          sessionId: response.id,
        });
      } catch (error) {
        console.error('Error in buyCredits:', error);
      }
    },
  };
}

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<{ priceId: string }>();

  return {
    buyCredits: async (priceId: string) => {
      try {
        const response = await checkout.mutateAsync({ priceId });
        const stripe = await stripPromise;
        await stripe?.redirectToCheckout({
          sessionId: response.id,
        });
      } catch (error) {
        console.error('Error in buyCredits:', error);
      }
    },
  };
}

All I want is to be able to create a checkout session for any of the product I have which contain a valide strip price_id, I welcome any suggestion as I'm becoming crazy

10 replies

TTCTheo's Typesafe Cult

•Created by shvz on 8/26/2023 in #questions

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

6 replies

Gaming

Programming