Stripe JS 卡片元素不允许用户在 Flask 中输入答案

【问题标题】：Stripe JS card element won't allow user input in FlaskStripe JS 卡片元素不允许用户在 Flask 中输入
【发布时间】：2019-03-09 01:19:15
【问题描述】：

我使用了 Stripe 的 Element 示例 1，在此处找到：https://jsfiddle.net/ywain/2qyamjga/ 用 Flask 测试 Stripe Elements。在我的应用中，姓名和电话号码字段允许用户输入，但卡片字段不允许。

这是我的视图函数代码：

@billing.route('/charge', methods=['GET', 'POST'])
def charge():
    if request.method == 'POST':
        customer = stripe.Customer.create(
            email='customer@example.com',
            source=request.form['stripeToken']
        )

        charge = stripe.Charge.create(
            customer=customer.id,
            amount=request.form['amountInCents'],
            currency='usd',
            description='Flask Charge'
        )
    return render_template('billing/charge.html')

查看网络控制台后，我收到此错误：

Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount().

我该怎么做呢？任何建议将不胜感激。条带源代码可以在这里找到：https://github.com/stripe/elements-examples/#example-1

【问题讨论】：

标签： javascript stripe-payments

【解决方案1】：

调试后我发现错误是因为我的 Javascript 在 html 之前。 Javascript 应放在 html 下方，以便表单字段正常工作：

<script src="https://js.stripe.com/v3/"></script>
<body>
  <form>
    <div class="group">
      <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>
    </div>
    <div class="group">
      <label>
        <span>Card</span>
        <div id="card-element" class="field"></div>
      </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>
  </form>
</body>

<script>
var stripe = Stripe('pk_test_XXXXXXXXXXXXXXXX');
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
var style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: "#32325d",
  }
};

var card = elements.create('card', {
  style: {
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: 'Helvetica Neue',
      fontSize: '15px',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});
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) {
    // Use the token to create a charge or a customer
    // https://stripe.com/docs/charges
    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,
  };
  stripe.createToken(card, extraDetails).then(setOutcome);
});

</script>

【讨论】：