#Cixz

1 messages · Page 1 of 1 (latest)

latent flickerBOT
long prairie
#

To save time, these are the codes that I want to merge from his guide // client/index.js Code 1 document.addEventListener("DOMContentLoaded", async () => { // Retrieve and render our readers const res = await fetch("/list-readers"); const { readers, error: readerError } = await res.json(); // Error retrieving readers if (readerError) { // Add to error messages div and console.log() w/ addMessage helper from utils.js addMessage(`Error: ${readerError.message}`); return; } // Success, but no readers retrieved. if (readers.length === 0) { addMessage( `No online readers retrieved. Have you added any to your account?` ); } const readerSelect = document.getElementById("reader-select"); readers.forEach((el) => { const readerOption = document.createElement("option"); readerOption.value = el.id; readerOption.text = `${el.label} (${el.id})`; readerSelect.append(readerOption); }); });

document.addEventListener("DOMContentLoaded", async () => {
  // ... code from previous post in index.js
  // Process payment and prompt reader on submit
  const form = document.getElementById("confirm-form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    form.querySelector("button").disabled = true;
    // Get the amount and reader ID from the form
    const amountInput = parseInt(document.querySelector("#amount").value, 10);
    const selectedReaderId = document.querySelector("#reader-select").value;
  
    // Call backend to process payment with amount and reader ID
    const res = await fetch("/process-payment", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        reader_id: selectedReaderId,
        amount: amountInput,
      }),
    });
    const { error: readerError, paymentIntentId, readerId } = await res.json();
    // Handle error
    if (readerError) {
      addMessage(`Error: ${readerError}`);
      form.querySelector("button").disabled = false;
      return;
    }
    // Return a message and redirect
    addMessage(
      `Created PaymentIntent for ${amountInput} for reader ${readerId}.`
    );
    window.location.replace(
      `/reader.html?reader_id=${readerId}&payment_intent_id=${paymentIntentId}&amount=${amountInput}`
    );
  });
});```
verbal needle
#

What error do you get?

long prairie
#

Okay this is before inputting(merging) code 2, I am able to retrieve the reader from my stripe account

image.png
#

This is with the merged code, the select reader could not retrieve the physical card reader after the code merging.

image.png
# 
document.addEventListener("DOMContentLoaded", async () => {
  // Retrieve and render our readers
  const res = await fetch("/list-readers");
  const { readers, error: readerError } = await res.json();
  const form = document.getElementById("confirm-form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    form.querySelector("button").disabled = true;
    // Get the amount and reader ID from the form
    const amountInput = parseInt(document.querySelector("#amount").value, 10);
    const selectedReaderId = document.querySelector("#reader-select").value;

    // Call backend to process payment with amount and reader ID
    const res = await fetch("/process-payment", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        reader_id: selectedReaderId,
        amount: amountInput,
      }),
    });
  // Error retrieving readers
   const { error: readerError, paymentIntentId, readerId } = await res.json();
       // Handle error
  if (readerError) {
    // Add to error messages div and console.log() w/ addMessage helper from utils.js
    addMessage(`Error: ${readerError.message}`);
    form.querySelector("button").disabled = false;
    return;
  }
  // Return a message and redirect
    addMessage(
      `Created PaymentIntent for ${amountInput} for reader ${readerId}.`
    );

    window.location.replace(
     `/reader.html?reader_id=${readerId}&payment_intent_id=${paymentIntentId}&amount=${amountInput}`
   );
  // Success, but no readers retrieved.
  if (readers.length === 0) {
    addMessage(
      `No online readers retrieved. Have you added any to your account?`
    );
  }
  const readerSelect = document.getElementById("reader-select");
  readers.forEach((el) => {
    const readerOption = document.createElement("option");
    readerOption.value = el.id;
    readerOption.text = `${el.label} (${el.id})`;
    readerSelect.append(readerOption);
  });
});``` the merged code
verbal needle
#

In your merged code, can you try logging res from const res = await fetch("/list-readers") and share the result?

long prairie
#

As in, replacing res with another name or taking out res, sorry not too familiar and I'm much too inexperienced, but here are both results from my interpretation of your statement

1)Replacing res

ReplacingRes_with_A.png
verbal needle
#

Since the reader list is empty in the UI, I would like to confirm what res response is since res = await fetch("/list-readers") is the function to retrieve the reader list

long prairie
#

Thank you

#

How do I rate 5 stars and give you a good feedback?

verbal needle
#

Thanks for your feedback! Sharing here will be wonderful 😄

long prairie
#

Ah sorry to bother again

#

just one last problem, How can I fix this, and what does this mean?

image.png
#

> Error: The card_present source type with currency usd is not supported in SG. for this line

verbal needle
#

This means that you can't process USD with SG account

#

You can try changing the currency to SGD

long prairie
#

under stripe account settings right?

verbal needle
#

Nope! It will be the code during Payment Intent creation.

Based on the code, you can change the currency in server.js. More specifically these lines:

const { id: paymentIntentId } = await stripe.paymentIntents.create({
  currency: 'usd',
  amount: amount,
  payment_method_types: ["card_present"],
  capture_method: "manual",
});
#

The currency can be updated to sgd

long prairie
#

ah thank you

verbal needle
#

No problem 😄