D
Deno

help

Help Web.js

KKepar10/16/2023
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
DAHDeno AI Helper10/16/2023
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.
KKepar10/16/2023
@Deno AI Helper
No description
DAHDeno AI Helper10/16/2023
I'm sorry, but I didn't see a question in your last message. Could you please ask your question again?
KKepar10/16/2023
@Deno AI Helper TypeError: Cannot read properties of null (reading 'getAttribute')
DAHDeno AI Helper10/16/2023
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.
Mmarvinh.10/16/2023
@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.
KKepar10/16/2023
@marvinh.
Mmarvinh.10/16/2023
@Kepar Can you point me to the script tag with a data-userid attribute in your snippet?
KKepar10/16/2023
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.
Mmarvinh.10/16/2023
Reach out to PayPal, it's an issue with their script. It's not something related to Deno
KKepar10/16/2023
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?

Looking for more? Join the community!

Recommended Posts
Unable to load env variables in localI'm starting again with deno since a long time with a small telegram bot using the `grammy` frameworWhy Bad resource ID occurs?I ran the following and got `error: BadResource: Bad resource ID` on seek. ```typescript import { toStorybook: some lightweight alternative for Deno?Do you know some lightweight alternative for [Storybook](https://storybook.js.org) to run on Deno?How can i change the location of Cache.open('somedb')We're deploying to docker containers which needs to write to an attached volume (specific path)How do I make Objects, Maps, etc. in rusty_v8 into easy-to-understand String?Hello. I wrote the following code in rusty_v8 ```rs let isolate = &mut v8::Isolate::new(Default:Usage of Deno.Command?Hey guys we use Deno.run to launch shell cmd and pipe the result to log. But Deno.run will be deprecWhen the destination server is down, WebSocketStream stops and the program crashes.I'm running the following code: ```const ws = new WebSocketStream("wss://localhost"); setInterval((Struggling with interactive FreshChartsHi there I'm trying to display charts in my fresh js project. i want to have them as islands accordiTurso with local db fileI wanted to try out Turso's syncURL feature and for that it creates a local db file to read from andImporting local NodeJS module from DenoIs it possible to import a javascript file that has `node` imports for standart modules like `http` how I can install antd in my deno project?how I can install antd in my deno project?Deno Fresh Twind ColorsJust a message to anyone using Deno Fresh and wondering why their tailwindcss colors aren't working-Can you run Deno.serve in a pooled thread mode?is there a way in Deno to run a http request in a separate thread?How do I rerender my island after a signal change?Hi there im trying to rerender this sidebar navigation when you toggle it, making it change size and'Relative import path not prefixed' error from @types/express .d.ts file?Converting an express mjs project to deno & TS, and running into an issue using code from this exampThe requested module 'test/jsx-runtime' does not provide an export named 'jsxs'hej, I have a exported function `jsx()` stored in `jsx-runtime.ts`. I also added these `deno.json` scompiled artifact can't find deno.jsonI'm using github actions to build and publish a binary like so ``` DENO_TLS_CA_STORE=system deno comysql query is skippedHi, I have a function that should retrieve data from the database and then process and return it. ThUsing in-memory KV (sqlite) in productionIs it ok to use the KV backed by a local SQLite database in production ? If not, could you explain wdeno.land servers not reachable / timeoutFor the past few days, I've been encountering timeouts when trying to load modules from deno.land/x.