-3

I am implementing Stripe Checkout in a MERN application.

After a customer makes a successful payment, he/she is redirected to a checkout success URL where CheckoutSuccess page renders on the screen. Also, Stripe sends a session_id in the URL, as shown in the picture below. enter image description here

When CheckoutSuccess page renders, I send a POST request to /api/order/success. In the route handler function, I need to access the session-id(which is in the URL) sent by Stripe.

The problem I am facing is when I try to console.log req.query, I get a blank object; therefore req.query.session_id returns undefined. enter image description here

Why is req.query a blank object?

The code snippets are as follows: orderRoutes.js

const express = require("express");
const asyncHandler = require("express-async-handler");
const dotenv = require("dotenv");
dotenv.config();

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

const router = express.Router();

router.post(
  "/success",
  asyncHandler(async (req, res) => {
    console.log(req.query);
    const session = await stripe.checkout.sessions.retrieve(
      req.query.session_id
    );
    const customer = await stripe.customers.retrieve(session.customer);
    res.send(customer);
  })
);

module.exports = router;

orderSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

const initialState = {
  status: "idle",
  customer: null,
  error: null,
};

export const fetchCustomer = createAsyncThunk(
  "order/fetchCustomer",
  async (_, { rejectWithValue }) => {
    try {
      const { data } = await axios.post("/api/order/success");
      return data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);

export const orderSlice = createSlice({
  name: "order",
  initialState,
  reducers: {},
  extraReducers: {
    [fetchCustomer.pending]: (state, action) => {
      state.status = "loading";
    },
    [fetchCustomer.fulfilled]: (state, action) => {
      state.status = "succeeded";
      state.customer = action.payload;
    },
    [fetchCustomer.rejected]: (state, action) => {
      state.status = "failed";
      state.error = action.payload.message;
    },
  },
});

export default orderSlice.reducer;

HKS
  • 526
  • 8
  • 32

1 Answers1

0

Moving out of comment and into an answer

your fetch() call isn't passing any data or query params, right? that seems to be the issue here

hmunoz
  • 2,791
  • 5
  • 11