带有条纹元素的网站格式不起作用答案

【问题标题】：Website Format with Stripe Elements Not Working带有条纹元素的网站格式不起作用
【发布时间】：2020-08-01 15:12:30
【问题描述】：

好的，所以我对 HTML、CSS 和 JS 比较陌生，基本上是在自学类似于我在 Ruby 等方面所做的事情。我正在为我在空闲时间制作的燃木制品建立一个网站，并正在讨论如何使用 Stripe 出售这些产品。

我的网站很简单。只是一个基本的“嘿，这是我”部分，其中添加了一些细节，但它仍然是一个 WIP。我有一个布局良好的网站，并且正在努力修复它的格式，但是我去添加 Elements，这一切都变得有点混乱，我的 Elements 甚至无法工作，因为控制台显示了一个错误，指出 Uncaught TypeError: Cannot read property 'value' of null at HTMLFormElement.<anonymous>

我的元素的 CSS 影响了整个页面，但不确定如何解决这个问题。我正在考虑创建一个 div 来保存我的元素，但这似乎失败了。

有什么想法吗？这是我的 Codepen：https://codepen.io/Codekraker95/pen/mdyNwPR 和代码：

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>

【问题讨论】：

在 javascript 中您引用的是：'input[name=address-zip]' 但该字段在您的 html 中不存在。此外，您的 body 标记应该将 HTML 包装在其中。
谢谢，我会做出这些改变，看看结果如何。我更改了 HTML 中的 ZIP 部分以收集电子邮件地址，但完全忘记了它也在我的 JavaScript 中，rip
我编辑了我的问题以显示我正在使用的当前代码。我的 Elements 现在可以正常工作并创建应有的令牌（我没有构建后端代码，因此可以正常工作），但只需要修复我的网站页面以使其更整洁。它的 CSS 很乱。我添加了标签来包含我所有的 HTML，但网站的格式保持不变。我会继续玩这个，然后根据需要进行编辑。如果有人有任何建议，请随时留下更多建议！
尝试删除'display: flex;'从你的身体风格。

标签： javascript html css stripe-payments

【解决方案1】：

您的 HTML 中有一些拼写错误，f.i. div 没有结束标签，有图片。

这里是修改后的 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>

【讨论】：

感谢艾尔的帮助！我还删除了你提到的 display:flex，这有助于修复我的 CSS 本身的定位，并添加了修改后的 HTML。