Kepar•15mo 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•15mo 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.

Helpful Links: HTTP Requests - Deno by Example Deno Deploy | Deploy Docs How to Build an E-commerce Site with a Perfect Lighthouse Score The Future (and the Past) of the Web is Server Side Rendering

KeparOP•15mo ago

@Deno AI Helper

Deno AI Helper•15mo ago

I'm sorry, but I didn't see a question in your last message. Could you please ask your question again?

Helpful Links: How to Build a CRUD API with Oak and Deno KV Roll your own JavaScript runtime, pt. 2 Deno Deploy | Deploy Docs How to Build an E-commerce Site with a Perfect Lighthouse Score

KeparOP•15mo ago

@Deno AI Helper TypeError: Cannot read properties of null (reading 'getAttribute')

Deno AI Helper•15mo 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.•15mo 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.

KeparOP•15mo ago

app20.js

checkout.html

KeparOP•15mo ago

@marvinh.

marvinh.•15mo ago

@Kepar Can you point me to the script tag with a data-userid attribute in your snippet?

KeparOP•15mo 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.•15mo ago

Reach out to PayPal, it's an issue with their script. It's not something related to Deno

KeparOP•15mo 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?