#Ludvig-checkout

1 messages · Page 1 of 1 (latest)

bright oracle
#

@visual depot basically you can pass a SessionID; OR you can pass the other options(but really you can't since that's a deprecated integration) but yes the docs are not terribly clear on that point.

#

also I'll mention you don't really need to use redirectToCheckout at all any more, it used to be required but isn't now, you can just redirect the browser to session.url from your backend.

visual depot
#

Huh, okay. Good to know! Thanks for the tip.

Is there a team working on updating those docs or are there updated docs somewhere? It sucks if the docs are outdated 😐

#

I know it's a lot of work to maintain those docs cause it's a lot so I don't mean to be rude 🙂

bright oracle
#

yep we update the docs all the time! Here it's more that the API reference format we use doesn't capture 'alternates' very well (x is required if y is not passed, or stuff) and there's hopefully a future where that's addressed since it does cause confusion for the more complex APIs

visual depot
#

Alrighty. I understand 🙂 It's great that there is really good and fast support when the docs aren't enough 🙂 Keep up the good work!

#

Thank you for answering me

visual depot
#

@bright oracle I am not sure how to handle the redirect, can you help me? I'm using Next.js.

I'm guessing I need to change this to something else: res.status(200).json(checkoutSession);

Currently I'm doing something like this on the server:

import Stripe from "stripe";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  // https://github.com/stripe/stripe-node#configuration
});

export default async function handler(req, res) {
  if (req.method === "POST") {
    try {
      const params = {
        submit_type: "pay",
        payment_method_types: ["card"],
        },
        line_items: [{
            price_data: {
              currency: "eur",
              product_data: {
                name: "T-shirt",
              },
              unit_amount: 2000,
            },
            quantity: 1,
          }],
        mode: "payment",
        locale: req.body.locale,
        success_url: {req.headers.origin},
      };
      const checkoutSession = await stripe.checkout.sessions.create(params);

      // "redirect the browser to session.url from your backend" instead of redirectToCheckout on client
      res.status(200).json(checkoutSession);
    } catch (err) {
      res.status(500).json({ statusCode: 500, message:                 err.message });
    }
  } else {
    res.setHeader("Allow", "POST");
    res.status(405).end("Method Not Allowed");
  }
}
#

I'm guessing I might have to make some changes in my fetchPostJSON? When I tried doing this myself, I got an error in the fetchPostJSON.

Also of course remove the redirectToCheckout function.

Client:

  async function fetchPostJSON(url, data) {
    try {
      const response = await fetch(url, {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
        },
        redirect: "follow",
        referrerPolicy: "no-referrer",
        body: JSON.stringify({
          data: JSON.stringify(data || {}),
          locale: locale,
        }),
      });
      return await response.json();
    } catch (err) {
      throw new Error(err.message);
    }
  }

  const CartSummary = () => {
    const [loading, setLoading] = useState(false);

    const handleCheckout = async (event) => {
      event.preventDefault();
      setLoading(true);

      const response = await fetchPostJSON(
        "/api/checkout_sessions/cart",
        someTestProductData // Not being used on the server right now
      );

      if (response.statusCode === 500) {
        console.error(response.message);
        return;
      }

      // "redirect the browser to session.url from your backend" instead of redirectToCheckout
      stripe.redirectToCheckout({ sessionId: response.id });
bright oracle
#

sorry, looking now

#

if you want to redirect that way then you can just remove fetch entirely since you don't need to make an XHR (and also you can't redirect from an XHR which is probably why you got an error(probably a CORS error))

#

instead you can change the frontend so that the button is just a <form> with an action set to your backend route that creates the Session and returns a 3xx.

#

alternatively you can keep all the code as-is but just change the frontend stripe.redirectToCheckout({ sessionId: response.id }); to be window.location.href = response.url; instead and that should work!

visual depot
#

@bright oracle Alrighty, I changed to a <form> and am now returning a redirect from the server. Awesome, thanks!
Now I just wonder how I should send the cart data to the server from the form and I think I'm all set 🙂

Is it fine to pass my form submit button a value with my cart data or should I do it some other way? Is there any way to straight up hook into the req.body via the form to just add data without adding form elements?

analog tide
#

@visual depot karllekko is offline now. let me see if I can help here.
Currently, how do you generate / collect your cart data?

visual depot
#

I can pass data via the submit button value={data}

#

And then access it on the server

#

but I'm just wondering if this is the way to do it

analog tide
#

Sometimes I used to use hidden field to store data before submit the form

#

the hidden field is added programatically when the cart is updated

#

but I think as long as it works, there is no wrong way to do it

visual depot
#

Okay. I see! I was just thinking if it's bad practice to add elements just to pass data that's irrelevant to the element and if there was another way to hook into the req body via the form 🙂

#

But i'm trusting you that it's fine!

#

Thanks for your answer 🙂

analog tide
#

np