表格中未设置条纹元素

Question

我必须在ASP.NET 项目中实现Stripe 表单，并愿意执行以下操作：

Stripe Payment Form

这可以正常工作，并且能够在 ASP.NET 项目中创建带有需要集成的文件的表单。但是当从 JsFiddle 导入所有必需的文件时，我无法在文本框中写入内容。虽然我有以下所有引用的代码：

<input type="hidden" name="token" />
<div class="group">
  <label>
    <span>Card number</span>
    <div id="card-number-element" class="field"></div>
    <span class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></span>
  </label>
  <label>
    <span>Expiry date</span>
    <div id="card-expiry-element" class="field"></div>
  </label>
  <label>
    <span>CVC</span>
    <div id="card-cvc-element" class="field"></div>
  </label>
  <label>
    <span>Postal code</span>
    <input id="postal-code" name="postal_code" class="field" placeholder="90210" />
  </label>
</div>
<button type="submit">Pay $25</button>
<div class="outcome">
  <div class="error"></div>
  <div class="success">
    Success! Your Stripe token is <span class="token"></span>
  </div>
</div>

我使用浏览器的检查功能在控制台中遇到异常 - 未捕获的集成错误：您指定的选择器 (#card-number-element) 适用于当前页面上的任何 DOM 元素。在调用 mount() 之前确保该元素存在于页面上。 我在这里遗漏了什么？还有一件事，我愿意从卡号等元素中获取值。真的有可能得到吗？虽然我之前尝试过但无法检索元素生成的输入类型的名称属性值，如下所示：

var cardNo = $('select[name=cardnumber]').val();

Answer 1

该错误可能意味着您的代码在 DOM 完全加载之前运行（在 JSFiddle 上，所有代码在加载事件之后运行）。您可能希望将挂载 Stripe 元素的代码移动到加载事件的处理程序中。

window.onload = function(){
  ...
  var cardNumberElement = elements.create('cardNumber', {
    style: style
  });
  cardNumberElement.mount('#card-number-element');
  ...
}

我愿意从卡号等元素中获取值。真的可以得到吗？

不，对于PCI-compliance reasons，Elements 不允许访问原始卡详细信息。