'stripe invalid integer NaN REACTJS

I keep getting this error and I'm not sure why. I'm sure I'm following the documentation correctly. Have I missed something here? why can stripe not pick up the value?

https://stripe.com/docs/api/payment_intents/update. https://stripe.com/docs/payments/accept-a-payment

stripe session

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

console.log(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY);

export default async (req, res) => {
  //
  const { items} = req.body;
  console.log(items);

  

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        price_data: {
          currency: 'pln',
          product_data: {
            name: items.name,
          },
          unit_amount: items.price * 100,
        },
        quantity: 1,
      },
    ],
    mode: "payment",

    success_url: "http://localhost:3000/Success",
    cancel_url: "http://localhost:3000/Cancel",
   
  });
  res.status(200).json({ id: session.id });
};

Items - this also appears in the console.

{
    "name": "poznan",
    "description": "hey",
    "price": 9.99
}

checkout session error

[ { name: 'poznan', description: 'hey', price: 9.99 } ]
error - Error: Invalid integer: NaN

stripe log

    parameter_invalid_integer - line_items[0][price_data][unit_amount]
    
    {
  "payment_method_types": {
    "0": "card"
  },
  "line_items": {
    "0": {
      "price_data": {
        "currency": "pln",
        "unit_amount": "NaN"
      },
      "quantity": "1"
    }
  },

Solution 1:^[1]

I think your items variable is an array and since you're trying to access the field price on an array items.price * 100 is evaluated as undefined * 100 giving you the NaN value for unit_amount. You either need to access items[0].price instead of items.price or if you’re receiving multiple items why not map your array into line_items like so:

line_items: items.map((item)=> ({
      price_data: {
        currency: 'pln',
        product_data: {
          name: item.name,
        },
        unit_amount: item.price * 100,
      },
      quantity: 1,
    },
})),

Solution 2:^[2]

Needed to map through the objects and do an implicit return

export default async (req, res) => {
  //
  const { items} = req.body;
  console.log(items);

 const transformedItems = items.map(item => ({
   description: item.description,
   quantity: 1,
   price_data: {
     currency: 'gbp',
     unit_amount: item.price * 100,
     product_data: {
       name: item.name,

     },
   }
 }));

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: transformedItems,
    mode: "payment",
    
    success_url: "http://localhost:3000/Success",
    cancel_url: "http://localhost:3000/Cancel",
   
  });
  res.status(200).json({ id: session.id });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tarzan
Solution 2	shar27

'stripe invalid integer NaN REACTJS

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]