product image not showing up when using stripe checkout in my nodejs application

Question

Below is the code for my checkout route.

Everything works except for one line: images: [`${process.env.SERVER_URL}/public${item.itemData.images[0]}`]

I tried to console log this path and got the correct one: "http://localhost:5000/public/image/test_image_2.webp" Therefore, I am confused as to why this doesnt work. I am pretty sure the images feild takes an array of image paths for each product, and that is what I have given it, but still I am seeing the little cant find image symbole instead of my product image. What do I do?

const router = require("express").Router();
const Product = require("../models/product-schema");
const { default: Stripe } = require("stripe");
const { getUser, authUser, authAdmin, authAdmin404 } = require("../middleware/authentication");
const stripe = require("stripe")(process.env.STRIPE_PRIVATE_KEY);

router.post("/create-checkout-session", authUser, async (req, res) => {
  try {
    const unresolved = req.body.items.map(async (item, index, arr) => {
      const storeItem = await Product.findById(item.id);
      return arr[index] = { itemData: storeItem, quantity: item.quantity };
    });
    const items = await Promise.all(unresolved);
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      mode: "payment",
      line_items: items.map((item) => {
        return {
          price_data: {
            currency: 'eur',
            product_data: {
              name: item.itemData.product_name,
              images: [`${process.env.SERVER_URL}/public${item.itemData.images[0]}`]
            },
            unit_amount: item.itemData.price_in_cents,
          },
          quantity: item.quantity,
        }
      }),
      success_url: `${process.env.SERVER_URL}/`,
      cancel_url: req.body.url,
    });
    res.json({ url: session.url });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

Answer 1

Stripe will download each image at the URL(s) you provide and cache them locally. When you give a URL that is based on localhost though it has no way to access the data so it just can't cache it and display it later.

You need to make sure that the URL you provide is publicly accessible for them to cache it. It's also possible for your server to be mis-configured (bad TLS certificate for example) causing the attempt to fetch the image to fail and so Stripe will just not render it in that case.