Kepar
Kepar9mo ago

Help Web.js

rq need help in web.js \
window.paypal
.Buttons({
style: {
shape: "rect",
layout: "vertical",
},
async createOrder() {
try {
const userid = document.querySelector('script[data-userid]').getAttribute('data-userid'); // Access the data attribute

const response = await fetch("/api/orders", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
cart: [
{
id: "1800 Koonies",
quantity: "1",
price: "10",
userid: userid, // Use the userid variable
},
],
}),
});

const orderData = await response.json();

if (orderData.id) {
return orderData.id;
} else {
const errorDetail = orderData?.details?.[0];
const errorMessage = errorDetail
? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
: JSON.stringify(orderData);

throw new Error(errorMessage);
}
} catch (error) {
console.error(error);
resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
}
},
async onApprove(data, actions) {
try {
const response = await fetch(`/api/orders/${data.orderID}/capture/${userid}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
# rest of the code...
window.paypal
.Buttons({
style: {
shape: "rect",
layout: "vertical",
},
async createOrder() {
try {
const userid = document.querySelector('script[data-userid]').getAttribute('data-userid'); // Access the data attribute

const response = await fetch("/api/orders", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
cart: [
{
id: "1800 Koonies",
quantity: "1",
price: "10",
userid: userid, // Use the userid variable
},
],
}),
});

const orderData = await response.json();

if (orderData.id) {
return orderData.id;
} else {
const errorDetail = orderData?.details?.[0];
const errorMessage = errorDetail
? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
: JSON.stringify(orderData);

throw new Error(errorMessage);
}
} catch (error) {
console.error(error);
resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
}
},
async onApprove(data, actions) {
try {
const response = await fetch(`/api/orders/${data.orderID}/capture/${userid}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
# rest of the code...
INFO: 162.158.126.151:55288 - "POST /api/orders/3PE25468C5919202R/capture HTTP/1.1" 404 Not Found the user id is never sent to the /api/order/code/capture like supposed
12 Replies
Deno AI Helper
Deno AI Helper9mo ago
The issue seems to be that the userid variable is not defined in the scope of the onApprove function. This is why it's not being sent in the fetch request to /api/orders/${data.orderID}/capture/${userid}. In the createOrder function, you've defined userid and used it in the fetch request. However, this variable is local to the createOrder function and is not accessible in the onApprove function. To fix this, you could define userid in a scope that is accessible to both functions. Here's how you could do it:
const userid = document.querySelector('script[data-userid]').getAttribute('data-userid'); // Access the data attribute

window.paypal
.Buttons({
style: {
shape: "rect",
layout: "vertical",
},
async createOrder() {
try {
// Use the userid variable
// Rest of the code...
} catch (error) {
console.error(error);
resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
}
},
async onApprove(data, actions) {
try {
const response = await fetch(`/api/orders/${data.orderID}/capture/${userid}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
// Rest of the code...
} catch (error) {
console.error(error);
resultMessage(`Could not capture PayPal order...<br><br>${error}`);
}
},
// Rest of the code...
})
.render("#paypal-button-container");
const userid = document.querySelector('script[data-userid]').getAttribute('data-userid'); // Access the data attribute

window.paypal
.Buttons({
style: {
shape: "rect",
layout: "vertical",
},
async createOrder() {
try {
// Use the userid variable
// Rest of the code...
} catch (error) {
console.error(error);
resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
}
},
async onApprove(data, actions) {
try {
const response = await fetch(`/api/orders/${data.orderID}/capture/${userid}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
// Rest of the code...
} catch (error) {
console.error(error);
resultMessage(`Could not capture PayPal order...<br><br>${error}`);
}
},
// Rest of the code...
})
.render("#paypal-button-container");
In this updated code, userid is defined outside of the Buttons function, making it accessible to both createOrder and onApprove. Please note that this advice is not explicitly stated in the documentation, but it's a common practice in JavaScript programming.
Kepar
Kepar9mo ago
@Deno AI Helper
No description
Deno AI Helper
Deno AI Helper9mo ago
I'm sorry, but I didn't see a question in your last message. Could you please ask your question again?
Kepar
Kepar9mo ago
@Deno AI Helper TypeError: Cannot read properties of null (reading 'getAttribute')
Deno AI Helper
Deno AI Helper9mo ago
The error message you're seeing, TypeError: Cannot read properties of null (reading 'getAttribute'), typically occurs when you're trying to access a property or method (in this case, getAttribute) on null or undefined. In JavaScript, null is a value that represents no value or no object. It is an assignment value that means "no value" or "no object". undefined means a variable has been declared but has not yet been assigned a value. In your case, it seems like the element you're trying to select with document.querySelector('script[data-userid]') is returning null. This could happen if there is no element in the document that matches the provided selector, or the script is running before the DOM is fully loaded. To fix this issue, you can add a check to see if the element exists before trying to access its getAttribute method:
const element = document.querySelector('script[data-userid]');
if (element) {
const userid = element.getAttribute('data-userid');
// Rest of the code...
} else {
console.error('Element with selector "script[data-userid]" not found');
}
const element = document.querySelector('script[data-userid]');
if (element) {
const userid = element.getAttribute('data-userid');
// Rest of the code...
} else {
console.error('Element with selector "script[data-userid]" not found');
}
This way, you're ensuring that element is not null before trying to access getAttribute on it. If the element is not found, an error message will be logged to the console.
marvinh.
marvinh.9mo ago
@Kepar The error is thrown because you don't have the corresponding element on the page that the paypal script is looking for. Maybe you skipped a step in their documentation? Their code expects a <script data-userid="some-value"> element on the page.
Kepar
Kepar9mo ago
@marvinh.
marvinh.
marvinh.9mo ago
@Kepar Can you point me to the script tag with a data-userid attribute in your snippet?
Kepar
Kepar9mo ago
De the I'd is correctly sent yo the html I did the tests, bug seem like it can't be sent to the JavaScript @marvinh.
marvinh.
marvinh.9mo ago
Reach out to PayPal, it's an issue with their script. It's not something related to Deno
Kepar
Kepar9mo ago
Nah,it's not PayPal, is that the JavaScript feature I added won't send the variable I want Want me to do a drawing to show you what I mean?