'Stripe implementation was working, but then event listener failed

I had a node implementation for variable payment amounts in Stripe checkout working for hours, so I started focusing on improving the CSS.

This was the working html file (test keys are from the Stripe demo):

<html>
  <head>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <form id="donation-form">
      <label>Amount
        <input type="number" step="0.01" id="amount">
      </label>
      <button>Donate</button>
    </form>
    <script>
      const stripe = Stripe("pk_test_vAZ3gh1LcuM7fW4rKNvqafgB00DR9RKOjN")

      const form = document.getElementById("donation-form")
      form.addEventListener("submit", async (e) => {
        e.preventDefault();
        // Create the checkout session on the server
        const {sessionId} = await fetch("/create-session", {
          method: 'POST', 
          headers: {
            'Content-type': 'application/json',
          },
          body: JSON.stringify({
            donationAmount: amount.value,
          })
        }).then(r => r.json())

        // redirect to checkout
        await stripe.redirectToCheckout({
          sessionId: sessionId
        })
      })

    </script>
  </body>
</html>

But then as I was trying to improve the design, the button broke, and I eventually started getting this error:

(index):55 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

This was my code by that time:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="styles.css">
     <style>
       label{
        display: block;
        line-height:11px;
        padding: 0px;
        font-family: "Avenir", sans-serif;
        font-size: 20px;
        font-weight: lighter;
        text-align: center;
       }
      button {
        display: block;
        margin: 0 auto;
        margin-top:15px;
        background-color: #FFFFFF;
        border-radius: 5px;
        border: 4px;
        color: #eeeeee;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        text-color: #000000
        font-family: "Avenir", sans-serif;
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
        width: 100px;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
    </style>

    <script src="https://js.stripe.com/v3/"></script>

  </head>
  
  <body>
       <a href="https://www.seedsgives.com" target="_blank"><img src = "https://images.squarespace-cdn.com/content/v1/5bf36b4936099bd154911b7e/1592428554342-PP47P5BP6DD7WML6KW13/Seeds+High+Res+Logo.png?format=1500w" alt="seedsgives.com" width="150"></a

    <form id="donation-form">
      <label><p>We appreciate your kindness! 💗</p><p> Please enter your gift amount in USD:</p>   
        <input type="number" step="0.01" id="amount">
      </label>
      <button>Next</button>
    </form>

   <script>
      const stripe = Stripe("pk_test_51HTHi2...")

      const form = document.getElementById("donation-form")
      form.addEventListener("submit", async (e) => {
        e.preventDefault();
        // Create the checkout session on the server
        const {sessionId} = await fetch("/create-session", {
          method: 'POST', 
          headers: {
            'Content-type': 'application/json',
          },
          body: JSON.stringify({
            donationAmount: amount.value,
          })
        }).then(r => r.json())

        // redirect to checkout
        await stripe.redirectToCheckout({
          sessionId: sessionId
        })
      })
    </script>
  </body>
</html>

I thought it might help to check that form is not null before adding the event listener, so did this:

const form = document.getElementById("donation-form")
      form.addEventListener("submit", async (e) => {
        e.preventDefault();
        // Create the checkout session on the server
        const {sessionId} = await fetch("/create-session", {
          method: 'POST', 
          headers: {
            'Content-type': 'application/json',
          },
          body: JSON.stringify({
            donationAmount: amount.value,
          })
        }).then(r => r.json())

        // redirect to checkout
        await stripe.redirectToCheckout({
          sessionId: sessionId
        })
      })
    </script>
  </body>
</html>

...but then it started giving me this error:

Uncaught SyntaxError: missing ) after argument list

Trying to figure out how to fix this, and why the event listener broke in the first place (?).

Appreciate any help!

javascripthtmlcssnode.jsstripe-payments


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions