nightfly-react-checkout | Stripe Developers | Page 1

ruby heron Sep 14, 2021, 1:07 PM

#

modern panther Sep 14, 2021, 1:07 PM

#

orderRouter.post(
  "/:id/create-checkout-session",
  expressAsyncHandler(async (req, res) => {
    const order = await Order.findById(req.params.id);
    if (order) {

      var s = order.totalPrice.toFixed(2) + "";
      s = s.replace(".", "");
      s = parseInt(s);
      const stripe = Stripe(process.env.STRIPE_CLIENT_ID);
      const session = await stripe.checkout.sessions.create({
        payment_method_types: ["card"],
        mode: 'payment',
        line_items: [
          {
            name: "NightCoach",
            description: "Coaching Session",
            amount: s,
            quantity: 1,
            currency: "EUR",
          },
        ],
        // ?session_id={CHECKOUT_SESSION_ID} means the redirect will have the session ID set as a query param
        success_url: `http://localhost:3000/order/${order._id}?success`,
        cancel_url: `http://localhost:3000/order/${order._id}?canceled`,
      });
      return res.redirect(303, session.url); 
    }
  })
);

this is the code I am using now

#

gives a network error

#

CORS-header ‘Access-Control-Allow-Origin’ error

ruby heron Sep 14, 2021, 1:08 PM

#

ok thanks, will take a look shortly

#

ah, cors

modern panther Sep 14, 2021, 1:11 PM

#

Thanks ❤️ been struggling with this for a couple of weeks😅

ruby heron Sep 14, 2021, 1:14 PM

#

This is while running via local host?

#

Have you enabled CORS on your express router?

#

eg, with something like this: http://expressjs.com/en/resources/middleware/cors.html

modern panther Sep 14, 2021, 1:17 PM

#

app.use(cors())

#

got this on

#

in server.js file

#

if you want I can give you access to the github?

ruby heron Sep 14, 2021, 1:23 PM

#

hmm can you try these custom headers?
https://stackoverflow.com/a/42907792

Stack Overflow

How to solve CORS redirection with express js router?

I'm trying to implement OAuth2 authentication. When I try to send Authorization code I get this error:
XMLHttpRequest cannot load link1.
Redirect from link1 to link2
has been blocked by CORS

modern panther Sep 14, 2021, 1:24 PM

#

Still gives network error

#

its a different error now

#

CORS Missing Allow Origin

NS_ERROR_DOM_BAD_URI

#

]

ruby heron Sep 14, 2021, 1:31 PM

#

AH interesting, this may be a deeper limitation: https://stackoverflow.com/questions/34949492/cors-request-with-preflight-and-redirect-disallowed-workarounds

Stack Overflow

CORS request with Preflight and redirect: disallowed. Workarounds?

I'm designing an API that allows the user to authenticate (using tokens) and that contains redirects within the same domain. Now, for an unauthenticated request to an endpoint that returns 303,

GET /

#

I'd suggest you respond to the client with the session URL and redirect client-side -- it's going to be the simplest solution here

modern panther Sep 14, 2021, 1:34 PM

#

you mean something like this?

app.get('/checkout-session', async (req, res) => {
  const { sessionId } = req.query;
  const session = await stripe.checkout.sessions.retrieve(sessionId);
  res.send(session);
});

ruby heron Sep 14, 2021, 1:35 PM

#

yep, then in the client you'd redirect to the url (or use stripe.redirectToCheckout({sessionId})

modern panther Sep 14, 2021, 1:36 PM

#

so baiscally

#

it goes wrong in this part

#

success_url: `http://localhost:3000/order/${order._id}?success`, cancel_url: `http://localhost:3000/order/${order._id}?canceled`,

ruby heron Sep 14, 2021, 1:37 PM

#

what do you mean? what goes wrong?

modern panther Sep 14, 2021, 1:37 PM

#

well you say that the problem lays at the URL? so I thought that was the issue?

ruby heron Sep 14, 2021, 1:38 PM

#

no, the session URL, the same one you were redirecting to from the server

#

do the same thing, but redirecting from the client side

modern panther Sep 14, 2021, 1:38 PM

#

return res.redirect(303, session.url); you mean this url in client side?

ruby heron Sep 14, 2021, 1:40 PM

#

yes, exactly

#

so you can send back session.url then in the client do a redirect via location

modern panther Sep 14, 2021, 1:42 PM

#

hmm I will try, can we keep this thread open?

ruby heron Sep 14, 2021, 1:53 PM

#

yep, i'm here for a bit 🙂

modern panther Sep 14, 2021, 1:58 PM

#

hmm I am struggling a bit now getting proxy errors?

Proxy error: Could not proxy request /api/orders/612e0d843a9540842cb2a6a9 from localhost:3000 to http://127.0.0.1:5003.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /checkout-session?sessionId= from localhost:3000 to http://127.0.0.1:5003.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Proxy error: Could not proxy request /api/orders/612e0d843a9540842cb2a6a9 from localhost:3000 to http://127.0.0.1:5003.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

#

I got now this


orderRouter.get('/checkout-session', async (req, res) => {
  const { sessionId } = req.query;
  const session = await stripe.checkout.sessions.retrieve(sessionId);
  res.send(session);
});

orderRouter.post(
  "/:id/create-checkout-session",
  expressAsyncHandler(async (req, res) => {
    const domainURL = process.env.DOMAIN;
    const order = await Order.findById(req.params.id);
    if (order) {
      var s = order.totalPrice.toFixed(2) + "";
      s = s.replace(".", "");
      s = parseInt(s);
      const session = await stripe.checkout.sessions.create({
        payment_method_types: ["card"],
        mode: 'payment',
        line_items: [
          {
            name: "NightCoach",
            description: "Coaching Session",
            amount: s,
            quantity: 1,
            currency: "EUR",
          },
        ],
        // ?session_id={CHECKOUT_SESSION_ID} means the redirect will have the session ID set as a query param
        success_url: `${domainURL}/order/${order._id}?session_id={CHECKOUT_SESSION_ID}`,
        cancel_url: `${domainURL}/order/${order._id}?canceled`,
      });
      return res.redirect(303, session.url); 
    }
  })
);

#

the change was that I took out the const stripe = new Stripe(); and putted it on top to make it global for all the posts/puts/gets/sets

ruby heron Sep 14, 2021, 2:01 PM

#

that shouldn't have made a difference related to the proxy error you're seeing - that sounds more like something related to create react app / webpack config and how the app is running

modern panther Sep 14, 2021, 2:02 PM

#

If I change it back it works again

ruby heron Sep 14, 2021, 2:03 PM

#

ok so for the time being i'd say just have it in both, solve that issue later 😄

modern panther Sep 14, 2021, 2:09 PM

#

Sorry I am just confused...

export const stripePayment = (orderId) => async (dispatch, getState) => {
  dispatch({ type: ORDER_STRIPE_REQUEST, payload: { orderId } });
  const {
    userSignin: { userInfo },
  } = getState();
  try {
    const { data } = await Axios.post(
      `/api/orders/${orderId}/create-checkout-session`,         {
        headers: { Authorization: `Bearer ${userInfo.token}` },
      });
    dispatch({ type: ORDER_STRIPE_SUCCESS, payload: data });
  } catch (error) {
    const message =
      error.response && error.response.data.message
        ? error.response.data.message
        : error.message;
    dispatch({ type: ORDER_STRIPE_FAIL, payload: message });
  }
};

So this is how I post the stripe payment method, but basically this needs to get a /create-checkout-session url?

ruby heron Sep 14, 2021, 2:12 PM

#

alright, so in your handler for the post, instead of directing respond with the session object / url

#

and does your client application get back the response with that payload in the browser?

modern panther Sep 14, 2021, 2:14 PM

#

it gets the url;

#

sorry I dont understand what you mean with this "instead of directing respond with the session object / url"

ruby heron Sep 14, 2021, 2:25 PM

#

which server hander are you using currently?

modern panther Sep 14, 2021, 2:27 PM

#

Reactjs?

#

Redux

ruby heron Sep 14, 2021, 2:33 PM

#

i mean your client app is calling /:id/create-checkout-session?

modern panther Sep 14, 2021, 2:34 PM

#

:id is the order id

#

http://localhost:3000/order/612e0d843a9540842cb2a6a9 /create-checkout-session

#

and the /create-checkout-session is in the orders api

ruby heron Sep 14, 2021, 2:37 PM

#

ok, and does your backend respond to your client app with data successfully?

modern panther Sep 14, 2021, 2:39 PM

#

yes? for everything that comes from the server side its working.

ruby heron Sep 14, 2021, 2:47 PM

#

ok and then you're doing the redirect in the client app?

#

eg using window.location.replace(session.url) ?
https://developer.mozilla.org/en-US/docs/Web/API/Location/replace

Location: replace() - Web APIs | MDN

The replace() method of the Location
interface replaces the current resource with the one at the provided URL. The difference
from the assign() method is that after using
replace() the current page will not be saved in session
History, meaning the user won't be able to use the back button
to navigate to it.

modern panther Sep 14, 2021, 2:48 PM

#

  const [session, setSession] = useState({});
  const location = useLocation();
  const sessionId = location.search.replace('?session_id=', '');

  useEffect(() => {
    async function fetchSession() {
      setSession(
        await fetch('/checkout-session?sessionId=' + sessionId).then((res) =>
          res.json()
        )
      );
    }
    fetchSession();
  }, [sessionId]);

#

you mean this?

ruby heron Sep 14, 2021, 2:49 PM

#

No, where you retrieve the new session from your /order API , you need to redirect there

modern panther Sep 14, 2021, 2:50 PM

#

modern panther Sorry I am just confused... ```js export const stripePayment = (orderId) => asy...

here is where I retrieve the session correct?

ruby heron Sep 14, 2021, 2:51 PM

#

you tell me 😄 but it looks like it yes

#

so there you would use the contents of data to redirect

modern panther Sep 14, 2021, 2:52 PM

#

but I am getting that here already right?

  const successPaymentHandler = () => {
    dispatch(stripePayment(order._id));

  };

ruby heron Sep 14, 2021, 2:55 PM

#

i'm really not sure what you're doing, this is your app, but i expected to see something like:

 const { data } = await Axios.post(
      `/api/orders/${orderId}/create-checkout-session`,         {
        headers: { Authorization: `Bearer ${userInfo.token}` },
      });
 window.location.replace(data.session.url);

#

any other state management and such is an app concern unrelated to the stripe integration

modern panther Sep 14, 2021, 2:57 PM

#

now I get CORS Missing Allow Origin

ruby heron Sep 14, 2021, 3:05 PM

#

hmm

#

i think the options headers are carrying forward with the redirect

#

can you try using window.location.href = data.session.url instead of replace()?

modern panther Sep 14, 2021, 3:11 PM

#

#

sorry not working.

ruby heron Sep 14, 2021, 3:24 PM

#

well hang on, those seems seem to conflict

#

whats happening with that json parse error?

#

whats the network response from your server?

modern panther Sep 14, 2021, 3:30 PM

#

modern panther ]

Still this

ruby heron Sep 14, 2021, 3:31 PM

#

whats "this"?

#

the image you linked to is a request to checkout.stripe.com -- i'd like to see what your server is respond to your client with

modern panther Sep 14, 2021, 3:36 PM

#

Those are the only network responses I got?

modern panther Sep 14, 2021, 3:36 PM

#

ruby heron whats happening with that json parse error?

Thats from the location.windows.href

ruby heron Sep 14, 2021, 4:06 PM

#

i need to step away, but @smoky zodiac can take another look with you, and i can help again when i return to get this figured out. i think we're missing something small.

smoky zodiac Sep 14, 2021, 4:11 PM

#

👋 Give me a minute to get settle in and I'll take a look @modern panther

modern panther Sep 14, 2021, 4:15 PM

#

Great! I am atm having dinner will take a look again after dinner

modern panther Sep 14, 2021, 4:34 PM

#

I am back, have you found anything interesting? or do you need all the code?

smoky zodiac Sep 14, 2021, 4:43 PM

#

I didn't get very far, but now that you're here I have a question - can you give me more details about that json parse error you're getting?

#

and yes, the current state of your code would be helpful!

modern panther Sep 14, 2021, 4:46 PM

#

could you give me an email address where I can add you to the github? since it has senstive information (secret key)

#

the Json.Parse

#

has nothing to do with the code

#

it seems to be a code I added to check something

#


  useEffect(() => {
    async function fetchSession() {
      setSession(
        await fetch('/checkout-session?sessionId=' + sessionId).then((res) =>
          res.json()
        )
      );
    }
    fetchSession();
  }, [sessionId]);

#

this gave the error

#

since it doesnt have any json.

#

so it couldnt parse.

smoky zodiac Sep 14, 2021, 4:54 PM

#

Unfortuantely I can't give out an email address to be added to a github, but you could paste it somewhere else and strip out the secret key

modern panther Sep 14, 2021, 4:57 PM

#

okay I will give you the router/server/action/reducer/constant/screen

#

import express from "express";
import mongoose from "mongoose";
import dotenv from "dotenv";
import coachRouter from "./routers/coachRouter.js";
import userRouter from "./routers/userRouter.js";
import bookingRouter from "./routers/bookingRouter.js";
import orderRouter from "./routers/orderRouter.js";
import cors from 'cors';

dotenv.config();

const app = express();
app.use(cors())

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested With, Content-Type, Accept');
  next();
});

app.use(express.json());
app.use(express.urlencoded({ extended: true }));


mongoose.connect(process.env.MONGODB_URL || "mongodb://localhost/nightcoachy", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
});
app.use("/api/users", userRouter);
app.use("/api/coaches", coachRouter);
app.use("/api/bookings", bookingRouter);
app.use("/api/orders", orderRouter);

app.get("/api/config/stripe", (req, res) => {
  res.send(process.env.STRIPE_CLIENT_ID || 'sb');
});

app.get("/", (req, res) => {
  res.send("Server is ready");
});

app.use((err, req, res, next) => {
  res.status(500).send({ message: err.message });
});

const port = process.env.PORT || 5003;
app.listen(port, () => {
  console.log(`Serve at http://localhost:${port}`);
});

Server.js

#

orderRouter.get('/checkout-session', async (req, res) => {
  const stripe = Stripe(process.env.STRIPE_CLIENT_ID);
  const { sessionId } = req.query;
  const session = await stripe.checkout.sessions.retrieve(sessionId);
  res.send(session);
});

orderRouter.post(
  "/:id/create-checkout-session",
  expressAsyncHandler(async (req, res) => {
    const domainURL = process.env.DOMAIN;
    const order = await Order.findById(req.params.id);
    if (order) {

      var s = order.totalPrice.toFixed(2) + "";
      s = s.replace(".", "");
      s = parseInt(s);
      const stripe = Stripe(process.env.STRIPE_CLIENT_ID);
      const session = await stripe.checkout.sessions.create({
        payment_method_types: ["card"],
        mode: 'payment',
        line_items: [
          {
            name: "NightCoach",
            description: "Coaching Session",
            amount: s,
            quantity: 1,
            currency: "EUR",
          },
        ],
        // ?session_id={CHECKOUT_SESSION_ID} means the redirect will have the session ID set as a query param
        success_url: `http://localhost:3000/order/${order._id}?session_id={CHECKOUT_SESSION_ID}`,
        cancel_url: `http://localhost:3000/order/${order._id}?canceled`,
      });
      return res.redirect(303, session.url); 
    }
  })
);

export default orderRouter;
``` router

#

export const stripePayment = (orderId) => async (dispatch, getState) => {
  dispatch({ type: ORDER_STRIPE_REQUEST, payload: { orderId } });
  const {
    userSignin: { userInfo },
  } = getState();
  try {
    const { data } = await Axios.post(
      `/api/orders/${orderId}/create-checkout-session`,         {
        headers: { Authorization: `Bearer ${userInfo.token}` },
      });  
    dispatch({ type: ORDER_STRIPE_SUCCESS, payload: data });
  } catch (error) {
    const message =
      error.response && error.response.data.message
        ? error.response.data.message
        : error.message;
    dispatch({ type: ORDER_STRIPE_FAIL, payload: message });
  }
};
``` Action (frontend)

#

export const ORDER_CREATE_REQUEST = 'ORDER_CREATE_REQUEST';
export const ORDER_CREATE_SUCCESS = 'ORDER_CREATE_SUCCESS';
export const ORDER_CREATE_FAIL = 'ORDER_CREATE_FAIL';
export const ORDER_CREATE_RESET = 'ORDER_CREATE_RESET';

export const ORDER_DETAILS_REQUEST = 'ORDER_DETAILS_REQUEST';
export const ORDER_DETAILS_SUCCESS = 'ORDER_DETAILS_SUCCESS';
export const ORDER_DETAILS_FAIL = 'ORDER_DETAILS_FAIL';

export const ORDER_PAY_REQUEST = 'ORDER_PAY_REQUEST';
export const ORDER_PAY_SUCCESS = 'ORDER_PAY_SUCCESS';
export const ORDER_PAY_FAIL = 'ORDER_PAY_FAIL';
export const ORDER_PAY_RESET = 'ORDER_PAY_RESET';

export const ORDER_STRIPE_REQUEST = 'ORDER_STRIPE_REQUEST';
export const ORDER_STRIPE_SUCCESS = 'ORDER_STRIPE_SUCCESS';
export const ORDER_STRIPE_FAIL = 'ORDER_STRIPE_FAIL';


export const ORDER_MINE_LIST_REQUEST = 'ORDER_MINE_LIST_REQUEST';
export const ORDER_MINE_LIST_SUCCESS = 'ORDER_MINE_LIST_SUCCESS';
export const ORDER_MINE_LIST_FAIL = 'ORDER_MINE_LIST_FAIL';
``` order constants

#

  export const orderStripeReducer = (state = {}, action) => {
    switch (action.type) {
      case ORDER_STRIPE_REQUEST:
        return { loading: true };
      case ORDER_STRIPE_SUCCESS:
        return { loading: false, success: true };
      case ORDER_STRIPE_FAIL:
        return { loading: false, error: action.payload };
      default:
        return state;
    }
  };
``` reducer

#

📎 message.txt

#

the screen

#

hopefully this helps.

smoky zodiac Sep 14, 2021, 5:10 PM

#

Yup, that helps! Let me take a look

#

I don't see you setting window.location.replace anywhere in this code?

modern panther Sep 14, 2021, 5:21 PM

#

ruby heron can you try using `window.location.href = data.session.url` instead of `replace(...

@smoky zodiac

#

I had it in my action.js file

#

in the try catch

ruby heron Sep 14, 2021, 5:31 PM

#

picking this back up

#

let me just start from scratch and see if its something new

modern panther Sep 14, 2021, 7:08 PM

#

Found smth?

ruby heron Sep 14, 2021, 7:58 PM

#

got pulled into some meeting but back on running the checkout example in a few minutes 👍

ruby heron Sep 14, 2021, 8:54 PM

#

So I confirmed the base case as demonstrated here for react+node works as written:
https://stripe.com/docs/checkout/integration-builder
note though that it uses a form submission to point to the supplied endpoint

Prebuilt Checkout page

Explore a full, working code sample of an integration with Stripe Checkout.

#

but the localhost redirect does work without any cors errors, so there's something integration-specific going on

#

reviewing what you'd shared, i noticed there was duplication of the cors config with the package version and the custom headers

#

can you try commenting out the cors() version to see if it matters?

ruby heron Sep 14, 2021, 9:22 PM

#

I also confirmed it works switching to a fetch() to a get endpoint, then using location.href = url, so i'm not sure which part of the stack is failing for you

modern panther Sep 15, 2021, 12:59 PM

#

Will try now.

ruby heron Sep 15, 2021, 1:03 PM

#

hello again! i'm around here for a couple of hours so happy to try to repro things -- my example is running 🙂

modern panther Sep 15, 2021, 1:14 PM

#

So I have tried switching off cors and it does not matter

with fetch() do you mean fetching the create-session-checkout? or fetching the result?

ruby heron Sep 15, 2021, 1:21 PM

#

const handleClick = async () => {
  const result = await fetch('/create-checkout-session');
  console.log(result);
  const data = await result.json();
  console.log(data);

  window.location.href = data.url;
}

#

this is what i do when clicking a "checkout" button

#

on the server its just this:

#

app.get('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        // TODO: replace this with the `price` of the product you want to sell
        price: 'price_1JSMgnLt4dXK03v5HDK12AWF',
        quantity: 1,
      },
    ],
    payment_method_types: [
      'card',
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}?success=true`,
    cancel_url: `${YOUR_DOMAIN}?canceled=true`,
  });

  // res.redirect(303, session.url)
  res.json({url: session.url})
});

modern panther Sep 15, 2021, 1:26 PM

#

Working on it! found the res.json url on google and that stops giving an error!

ruby heron Sep 15, 2021, 1:28 PM

#

nice 🙂 hopefully the client redirect works then, too

modern panther Sep 15, 2021, 1:30 PM

#

good news it shows the checkout page! new errors but moving forward

ruby heron Sep 15, 2021, 1:37 PM

#

huzzah!

#

what are the errors?

modern panther Sep 15, 2021, 1:43 PM

#

well those are my end, they are related to securing that its paid.

#

now i can type ?success=true and its paid 😛

ruby heron Sep 15, 2021, 1:45 PM

#

can you elaborate on that?

modern panther Sep 15, 2021, 1:46 PM

#

after you make a payment you need to be able to check if its paid or not

#

now if you change the header you can make it "paid" without paying

#

I believe I need to be using this: ?session_id={CHECKOUT_SESSION_ID}

ruby heron Sep 15, 2021, 1:49 PM

#

right, so yes you customer could "trick" you if you fulfill on that return url, so you should make sure to check the session status by retrieving it from the api before fulfilling

modern panther Sep 15, 2021, 1:49 PM

#

do you know how I can get the payment result out of the session id?

ruby heron Sep 15, 2021, 1:50 PM

#

as in checking if it was paid?

#

You can check if payment_status=paid
https://stripe.com/docs/api/checkout/sessions/object#checkout_session_object-payment_status

modern panther Sep 15, 2021, 2:04 PM

#

hmm I got issues with it

#

orderRouter.get('/checkout-session', async (req, res) => {
  const stripe = Stripe(process.env.STRIPE_CLIENT_ID);
  const { sessionId } = req.query;
  const session = await stripe.checkout.sessions.retrieve(sessionId);
  const isPaid = await stripe.paymentResult.session.retrieve(sessionId);
  res.send(session);
});

#

I have this to get the session for now

#

in the github I saw that this was used

#

  const [session, setSession] = useState({});
  const location = useLocation();
  const sessionId = location.search.replace('?session_id=', '');

  useEffect(() => {
    async function fetchSession() {
      setSession(
        await fetch('/checkout-session?sessionId=' + sessionId).then((res) =>
          res.json()
        )
      );
    }
    fetchSession();
  }, [sessionId]);

#

so I did

#

            <pre>{JSON.stringify(session, null, 2)}</pre>

#

this was used to read out of it

#

but the result is {}

#

while it does get the sessionId.

ruby heron Sep 15, 2021, 2:12 PM

#

well wait thats for after the session, on complete

#

that's what you're doing now?

#

to be clear: are you past the problems with redirected to checkout?

modern panther Sep 15, 2021, 2:15 PM

#

yes

#

thats fixed!

ruby heron Sep 15, 2021, 2:21 PM

#

ok awesome 🙂

#

now you're trying to handle fulfillment, something customized upon redirect to your success url after checkout payment?

modern panther Sep 15, 2021, 2:30 PM

#

now I want to check if its paid or not ^^

ruby heron Sep 15, 2021, 2:30 PM

#

are you being redirected to the expected URL with a session id?

modern panther Sep 15, 2021, 2:30 PM

#

yes

ruby heron Sep 15, 2021, 3:01 PM

#

ok and having a problem parsing the session out of the URL?

#

what does your JS look like to get this?

modern panther Sep 15, 2021, 3:14 PM

#

Not really, its redirecting the session to check if the session is paid

ruby heron Sep 15, 2021, 3:18 PM

#

what do you mean redirecting?

#

when your customer ends up back on your success page, you'll want to grab the session id out of the url, then send that you your server to retrieve from the api and pass back the relevant parts for your client to display

modern panther Sep 15, 2021, 3:48 PM

#

Yes

modern panther Sep 15, 2021, 3:48 PM

#

modern panther ```js orderRouter.get('/checkout-session', async (req, res) => { const stripe ...

This is not returning

#

A value

#

It gives {} empty array

worthy gust Sep 15, 2021, 4:00 PM

#

@modern panther Add logs, at every line

#

try to debug this as the developer, what is each line getting, is the sessionId present? Can you retrieve it from Stripe? What are you returning?

modern panther Sep 15, 2021, 4:01 PM

#

Will do going to eat first👍

modern panther Sep 15, 2021, 4:43 PM

#

So I recieve an object

#

but it gives me an error related to a parse

#

maybe it has to do with the fetch()? Normally I use axios for get from the server

worthy gust Sep 15, 2021, 4:49 PM

#

@modern panther separate client-side and server-side. Step 1: what happens server-side what do you retrieve from Stripe's API, do you have the correct Session id, etc. Once you have proven the server-side code retrieves the session successfully and returns it, then you can debug the client-side code

modern panther Sep 15, 2021, 5:19 PM

#

worthy gust <@456226577798135808> separate client-side and server-side. Step 1: what happens...

the problem I found is that the server not recieves the sessionId and gives an error 404 not found.

worthy gust Sep 15, 2021, 5:21 PM

#

Perfect, that's great progress

#

So now: does it not receive the id? Or is the code trying to find the id incorrect?

modern panther Sep 15, 2021, 5:22 PM

#

I checked in Stripe

#

and the id is the same as the one in the dashboard.

worthy gust Sep 15, 2021, 5:23 PM

#

sure sure but that's not the issue

#

your code, that tries to get the Session Id (the cs_test_123) and send it to your server is likely bugged and that's what you need to debug

modern panther Sep 15, 2021, 5:25 PM

#

u mean the server side does not see the correct session id?

#

so the transition goes wrong from client to server

worthy gust Sep 15, 2021, 5:28 PM

#

Possibly. All I mean is that you can debug this with logs: where do you get the session id the first time, log it, how do you send it to the server, log this, what the server gets, etc.

#

const sessionId = location.search.replace('?session_id=', ''); this for example seems fishy to me and I'd log that

modern panther Sep 15, 2021, 5:38 PM

#

worthy gust Possibly. All I mean is that you can debug this with logs: where do you get the ...

found where the issue lays

#

const session = await stripe.checkout.sessions.retrieve(sessionId);

#

somehow this is undefined

#

ah I made it work

#

but now a new error 😛

#

Error: Objects are not valid as a React child (found: object with keys {id, object, after_expiration, allow_promotion_codes, amount_subtotal, amount_total, automatic_tax, billing_address_collection, cancel_url, client_reference_id, consent, consent_collection, currency, customer, customer_details, customer_email, expires_at, livemode, locale, metadata, mode, payment_intent, payment_method_options, payment_method_types, payment_status, recovered_from, setup_intent, shipping, shipping_address_collection, submit_type, subscription, success_url, total_details, url}). If you meant to render a collection of children, use an array instead.

worthy gust Sep 15, 2021, 5:42 PM

#

Hard to say, seems like a React error with the way you deserialize the Session. There's no reason to send the entire Session object client-side

modern panther Sep 15, 2021, 5:44 PM

#

worthy gust Hard to say, seems like a React error with the way you deserialize the Session. ...

thats true but its in the example ^^

#

session.payment_status

#

this should send the payment status?

#

it gives a blank response

worthy gust Sep 15, 2021, 5:47 PM

#

sorry you keep doing it. I need you to be a bit clearer and more specific to get help

#

what is giving a blank response? Stripe's API? Your server-side code? the client-side code that deserializes it?

modern panther Sep 15, 2021, 5:48 PM

#

sorry,

worthy gust Sep 15, 2021, 5:48 PM

#

It's crucial that you debug things slowly, add logs and understand your own code. We love to help but we can't answer 200 questions as you come across them

modern panther Sep 15, 2021, 5:49 PM

#

the redux method I created to respond to the client side

I want to know how to send only the payment result to the client side.

worthy gust Sep 15, 2021, 5:53 PM

#

So have you logged session.payment_status server-side? Is it the value you want? If so, what's blocking you? Returning a string to the client isn't Stripe-specific, it's something you likely do dozens of times in your app today

modern panther Sep 15, 2021, 6:43 PM

#

Problem solved, thanks for your time everything works like it should now.

worthy gust Sep 15, 2021, 6:48 PM

#

Amazing!

#nightfly-react-checkout