条纹“卡片元素”不可见（Python/Django）答案

【问题标题】：Stripe 'card-element' isn't visible (Python/Django)条纹“卡片元素”不可见（Python/Django）
【发布时间】：2022-01-10 17:22:26
【问题描述】：

这是我第一次使用这个网站来提问。感谢您的帮助，我今天必须将这个项目作为我课程的一部分上交:(

我正在关注本教程：https://www.youtube.com/watch?v=ncsCnC3Ynlw（章节：条纹元素）

当我访问结帐页面时，卡片元素没有显示。

我在 3:45:00 左右的阶段，查看结帐时，卡片元素的 div 只是一个细的空条。

谁能帮我找出我犯错的地方？我认为这可能是脚本和模板之间的联系，或者只是脚本本身，但我想弄清楚我做错了什么。

我的意见.py：

def BasketView(request):
    carrinho = Carrinho(request)
    total = str(carrinho.gettotal())
    total = total.replace('.', '')
    total = int(total)
    stripe.api_key='sk_test_[...]'
    intent = stripe.PaymentIntent.create(
        amount=total,
        currency='brl',
        metadata={'integration_check': 'accept_a_payment', 'userid': request.user.id}
    )
    return render(request, 'pedido/pedido_novo.html', {'client_secret': intent.client_secret})

我的html模板：

{% load static %}

{% block title %}Livraria Aquaflora | Novo Pedido{% endblock %}

{% block adtscripts %}
<script src="https://js.stripe.com/v3/"></script>

<script src="https://unpkg.com/imask@6.0.7/dist/imask.js"></script>

<script src="{% static 'js/orderform.js' %}"></script>

<script src="{% static 'js/payment.js' %}" data-rel-js></script>

{% endblock %}



{% block conteudo %}

<div class="container-fluid">
  <div class="row no-gutter">
    <div class="col-md-12">
      <div class="login d-flex align-items-center py-5">
        <div class="container">
          <div class="row">
            <form id="payment-form" class="col-12 col-lg-6 mx-auto">
              <div class="form-group">
                <label class="small font-weight-bold">Nome</label>
                <input type="text" class="form-control" id="custName" placeholder="Nome Completo" required>
              </div>
              <div class="form-group">
                <label class="small font-weight-bold">CPF</label>
                <input type="text" class="form-control" id="cpf" placeholder="CPF" required>
              </div>
              <div class="form-group">
                <label class="small font-weight-bold">CEP</label>
                <input type="text" class="form-control" id="cep" placeholder="CEP" required>
              </div>
              <div class="form-group">
                <label class="small font-weight-bold">Endereço</label>
                <input type="text" class="form-control" id="ender" placeholder="Endereço com Número e complemento" required>
              </div>
              <div class="form-group">
                <label class="small font-weight-bold">Bairro</label>
                <input type="text" class="form-control" id="bairro" placeholder="Bairro" required>
              </div>
              <div class="form-group">
                <label class="small font-weight-bold">Cidade</label>
                <input type="text" class="form-control" id="cidade" placeholder="Cidade" required>
              </div>
              <div class="form-group">
                <label class="small font-weight-bold">Estado</label>
                <input type="text" class="form-control" id="estado" placeholder="Estado" required>
              </div>
              
              <hr class="my-4">
              <h4 class="mb-3">Pagamento</h4>
              
              <hr class="my-4">

              <div id="payment-element" class="form-control form-control-payment">
              
              </div>
              <button id="submit" class="btn btn-primary btn-block py-2 mb-4 mt-5 fw500 w-100" data-secret="{{ client_secret }}">Pagar</button>
              
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
    var CSRF_TOKEN = '{{ csrf_token }}';
</script>


{% endblock %}

最后是我的脚本

var stripe = Stripe('pk_test_[...]');

var elem = document.getElementById('submit');
clientsecret = elem.getAttribute('data-secret');

var elements = stripe.elements();
var style = {
base: {
  color: "#000",
  lineHeight: '2.4',
  fontSize: '16px'
    }
};

var card = elements.create("card", { style: style });
card.mount("#card-element");

card.on('change', function(event) {
var displayError = document.getElementById('card-errors')
if (event.error) {
  displayError.textContent = event.error.message;
  $('#card-errors').addClass('alert alert-info');
} else {
  displayError.textContent = '';
  $('#card-errors').removeClass('alert alert-info');
}
});

【问题讨论】：

编辑：我的带有 id payment-element 的 DIV 实际上是 card-element。信用卡元素仍然没有出现。
编辑 2：检查元素告诉我 'elem' 和 'el' 为 NULL。未捕获的类型错误：el 为空 InputMask input.js:50 IMask holder.js:11 orderform.js:21 input.js:50:4 InputMask input.js:50 IMask holder.js:11 orderform。 js:21 Uncaught TypeError: elem is null 127.0.0.1:8000/static/js/payment.js:7 payment.js:7:1 127.0.0.1:8000/static/js/payment.js:7
编辑 3：好的，我的 javascript 已正确链接到 html，但不会超过 'var elem = document.getElementById'。它根本没有捕获任何价值。为什么？
编辑 4：这接近于放弃和锤击我的电脑。无论如何，由于某些上帝遗弃的原因，elem 的值为 NULL，所以错误肯定存在......但我不知道是什么！我试过重命名血腥的ID，改变引号，什么都没有。 Grrrr。

标签： javascript html jquery django stripe-payments

【解决方案1】：

我想通了。留在这里给像我这样的其他傻瓜。

不要将 .js 文件添加到页面顶部。将它添加到底部，在 /body 标记之后。如果 javascript 在页面之前加载，结果值将为 NULL。

【讨论】：

【解决方案2】：

Python 代码看起来是正确的，至少它看起来像我在使用 Django 的工作集成中所做的那样。所以这里有几件事可以尝试：

在您使用 stripe.confirmCardPayment() 之前，您不需要 clientSecret，所以不要获取它。
尝试将data-secret="{{client_secret}}" 放在<form> 元素上。无论如何，您都需要向<form> 的"submit" 事件添加一个事件侦听器，以防止默认提交并触发确认，因此不妨检索client_secret。

我知道这并不能解释为什么按钮不可选择，但至少它为您提供了一些后续步骤。

【讨论】：