Website Format with Stripe Elements Not Working

Question

Okay, so I'm somewhat newer with HTML, CSS and JS and am basically self-teaching myself similar to how I did with Ruby and such. I'm building out a website for the woodburnings I make in my free time and am debating on selling these with Stripe.

My website is pretty simple. Just a basic "Hey, this is me" section with little details added in there but it's still a WIP. I had the website with a good layout and was working to fix the format of it, but I went to add in Elements and it all got kind of messy and my Elements doesn't even work as the console shows an error stating Uncaught TypeError: Cannot read property 'value' of null at HTMLFormElement.<anonymous>

The CSS for my Elements is affecting the whole page but not really sure how to fix this. I was thinking create a div to hold my Elements but that seemed to have failed.

Any ideas? This is my Codepen: https://codepen.io/Codekraker95/pen/mdyNwPR and code:

 var stripe = Stripe('pk_test_51HB2tdFCmZwjd6e5ahMS1F7NWJLN5CqIOuoH4d0Hzdes1zQg5YroBi98aNTC5iLST3BwNbQGe1xw0ygB53qa1RE100UjsyFKg3'); var elements = stripe.elements({ fonts: [{ family: 'Open Sans', weight: 400, src: 'local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format("woff2")', unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215', }, ] }); var card = elements.create('card', { hidePostalCode: false, style: { base: { iconColor: '#F99A52', color: '#32315E', lineHeight: '48px', fontWeight: 400, fontFamily: '"Open Sans", "Helvetica Neue", "Helvetica", sans-serif', fontSize: '15px', '::placeholder': { color: '#CFD7DF', } }, } }); card.mount('#card-element'); function setOutcome(result) { var successElement = document.querySelector('.success'); var errorElement = document.querySelector('.error'); successElement.classList.remove('visible'); errorElement.classList.remove('visible'); if (result.token) { successElement.querySelector('.token').textContent = result.token.id; successElement.classList.add('visible'); } else if (result.error) { errorElement.textContent = result.error.message; errorElement.classList.add('visible'); } } card.on('change', function(event) { setOutcome(event); }); document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); var form = document.querySelector('form'); var extraDetails = { name: form.querySelector('input[name=cardholder-name]').value, email_address: form.querySelector('input[name=email-address]').value }; stripe.createToken(card, extraDetails).then(setOutcome); });

 h1 { height: 50px; width: 400px; border: 1px solid black; padding: 50px; font-style: italic; background-image: url('https://previews.123rf.com/images/2nix/2nix1302/2nix130200028/17887014-big-brown-wood-plank-wall-texture-background.jpg'); position: relative; left: 500px; top: 1px; } h3 { height: 30px; } p { border: 300px; color: black; } span { font-style: italic; }.hClass { color: black; } #linkID { color: black; } #impID { font-weight: bold; } div { background-color: lightgrey; } #spanID { font: white; } /*Elements starts here*/ @font-face { font-family: 'Open Sans'; font-weight: 400; src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format("woff2"); unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } * { font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-variant: normal; padding: 0; margin: 0; } html { height: 100%; } body { background: #F6F9FC; display: flex; align-items: center; justify-content: center; min-height: 100%; } form { width: 480px; margin: 20px 0; } label { position: relative; color: #6A7C94; font-weight: 400; height: 48px; line-height: 48px; margin-bottom: 10px; display: flex; flex-direction: row; } label>span { width: 115px; }.field { background: white; box-sizing: border-box; font-weight: 400; border: 1px solid #CFD7DF; border-radius: 24px; color: #32315E; outline: none; flex: 1; height: 48px; line-height: 48px; padding: 0 20px; cursor: text; }.field::-webkit-input-placeholder { color: #CFD7DF; }.field::-moz-placeholder { color: #CFD7DF; }.field:focus, .field.StripeElement--focus { border-color: #F99A52; } button { float: left; display: block; background-image: linear-gradient(-180deg, #6F0CCC 0%, #F99A52 100%); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10), inset 0 -1px 0 0 #E57C45; color: white; border-radius: 24px; border: 0; margin-top: 20px; font-size: 17px; font-weight: 500; width: 100%; height: 48px; line-height: 48px; outline: none; } button:focus { background-image: linear-gradient(-180deg, #6F0CCC 0%, #F99A52 100%); } button:active { background-image: linear-gradient(-180deg, #6F0CCC 0%, #F99A52 100%); }.outcome { float: left; width: 100%; padding-top: 8px; min-height: 20px; text-align: center; }.success, .error { display: none; font-size: 13px; }.success.visible, .error.visible { display: inline; }.error { color: #E4584C; }.success { color: #F8B563; }.success.token { font-weight: 500; font-size: 13px; }

 <body> <div> <h1 class="hClass">Cody's Hot Woodburnings</h1> </div> <div> <h3 class="hClass">About Me</h3> <p>I create fantastic woodburned images in my spare time.</p> <p> I've been woodburning since I was 8 years old with my dad and it used to be the only time we had with each other So it's a hobby I treasure dearly.</p> </div> <div> <p>Feel free to check out my gallery and then message me with <span id="impID">any</span> questions:</p> <h3 class="hClass">Contact:</h3> <a id="linkID" href="https.//www.gmail:com/">Let me know your thoughts:</a> </div> <div> <h3 class="hClass">Gallery.</h3> <img src="https.//i.etsystatic.com/13607553/r/il/da7359/1857097635/il_570xN:1857097635_cdq7:jpg" /> </div> <div> <h3 class="hClass">Art Types.</h3> <ul> <li> <span id="spanID">Landscapes</span> </li> <li> <span id="spanID">Oriental Art</span> </li> <li> <span id="spanID">Portraits</span> </li> </ul> <.--Elements starts here--> <script src="https://js.stripe.com/v3/"></script> <form> <label> <span>Name</span> <input name="cardholder-name" class="field" placeholder="Jane Doe" /> </label> <label> <span>Phone</span> <input class="field" placeholder="(123) 456-7890" type="tel" /> </label> <label> <span>Email Address</span> <input name="email-address" class="field" placeholder="12345" /> </label> <label> <span>Card</span> <div id="card-element" class="field"></div> </label> <button type="submit">Confirm Payment</button> <div class="outcome"> <div class="error"></div> <div class="success"> Payment Successful! </div> </div> </form> </div> </body>

Answer 1

There are some typos in your HTML, fi div with no closing tag and with the image.

Here the revised HTML:

<body>
<div>
  <h1 class="hClass">Cody's Hot Woodburnings</h1>
</div>

<div>
  <h3 class="hClass">About Me</h3> 
  
  <p>I create fantastic woodburned images in my spare time.</p>
 
  <p> I've been woodburning since I was 8 years old with my dad and it used to be the only time we had with each other So it's a hobby I treasure dearly.</p>
</div>

<div>
  <p>Feel free to check out my gallery and then message me with <span id="impID">any</span> questions!</p>
  
  <h3 class="hClass">Contact:</h3>
  <a id="linkID"href="https://www.gmail.com/">Let me know your thoughts!</a>
</div>

<div>
  <h3 class="hClass">Gallery:</h3>
  <img src="https://i.etsystatic.com/13607553/r/il/da7359/1857097635/il_570xN.1857097635_cdq7.jpg" />
</div>

<div>
  <h3 class="hClass">Art Types:</h3>
  <ul>                             
   <li>                           
      <span id="spanID">Landscapes</span>  
   </li>                        
   <li>                           
      <span id="spanID">Oriental Art</span>  
   </li>                          
   <li>                           
      <span id="spanID">Portraits</span>
   </li>                          
 </ul>

<!--Elements starts here-->
  <script src="https://js.stripe.com/v3/"></script>

  <form>
    <label>
      <span>Name</span>
      <input name="cardholder-name" class="field" placeholder="Jane Doe" />
    </label>
    <label>
      <span>Phone</span>
      <input class="field" placeholder="(123) 456-7890" type="tel" />
    </label>
    <label>
      <span>Email Address</span>
      <input name="email-address" class="field" placeholder="12345" />
    </label>
    <label>
      <span>Card</span>
      <div id="card-element" class="field"></div>
    </label>
    <button type="submit">Confirm Payment</button>
    <div class="outcome">
      <div class="error"></div>
      <div class="success">
        Payment Successful!
      </div>
    </div>
  </form>
</div>
</body>