Cannot read property 'name' of undefined
Closed this issue · 18 comments
The error:
Error during invocation: {
errorMessage: "Cannot read property 'name' of undefined",
errorType: 'TypeError'
After following the final video in the series on egghead.io, Im getting an error in the final netlify call.
my code look slike this:
name: product.name,
description: product.description,
images: [product.image],
amount: product.amount,
currency: product.currency,
quantity: validatedQuantity,
Heya, have you checked that you're importing your inventory correctly? https://github.com/stripe-samples/checkout-netlify-serverless/blob/master/functions/create-checkout.js#L20
What's the console.log for the inventory, product, and sku variables?
it looks like my inventory is being imported, for more reference here is more of the error
Unfortunately this is not useful. Can you please console.log the following variables inventory, product, quantity, and sku?
im a beginner, how would I go about doing the console.log on the variables?
You can find some docs on it here: https://developer.mozilla.org/en-US/docs/Web/API/Console/log
In your create-checkout.js file, add the following code on line 28: https://github.com/stripe-samples/checkout-netlify-serverless/blob/master/functions/create-checkout.js#L28
console.log(inventory, product, quantity, sku)When the function runs you will then see the value of these variables logged to your terminal window.
Heres what I am receiving on my end so far, looks like when i console.logged, it did not output anything to the console. Maybe the file is not being ran.
@daryldauphin it won't be logged to the browser but to your terminal. The same place you took the screenshot of the error above. In fact it should get logged just before the error itself.
Here you go!
Thanks, can you please paste the code of your create-checkout.js file here as well.
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const inventory = require('./data/products.json');
exports.handler = async (event) => {
const { sku, quantity } = JSON.parse(event.body);
const product = inventory.find((p) => p.sku === sku);
const validatedQuantity = quantity > 0 && quantity < 11 ? quantity : 1;
console.log(inventory, product, quantity, sku);
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
billing_address_collection: 'auto',
shipping_address_collection: {
allowed_countries: ['US', 'CA'],
},
success_url: ${process.env.URL}/success.html,
cancel_url: process.env.URL,
line_items: [
{
name: product.name,
description: product.description,
images: [product.image],
amount: product.amount,
currency: product.currency,
quantity: validatedQuantity,
},
],
});
return {
statusCode: 200,
body: JSON.stringify({
sessionId: session.id,
publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
}),
};
};
Any updates on the code? I was not able to debug it yet.
@daryldauphin the function code looks fine, but it seems like your frontend code is not sending the sku ID correctly which is why the product is undefined.
In your chrome dev tools, can you inspect the network request to the function in check that the sku parameter value is sent correctly?
looks like its not pushing the sku
Yes, that's the issue. Do you have your frontend code deployed somewhere? If you can point me to the URL for it I can have a look what's going wrong.
Thanks, the problem is that the value for the hidden sku input is not correctly set:
It needs to be set within the value parameter.
The source of the issue is in your load-products.js file on line 9:
It needs to be product.querySelector('[name=sku]').value = item.sku;
that fixed it! thank you!
Great 👍