Javascript 条带支付表单不适用于Django，无法检索令牌

我试图在我的网站上添加一个支付页面，我从stripe文档中复制了代码，但是当我按下支付按钮时，什么也没有发生。通过调试，返回的令牌为空。 问题是，当我在JSFIDLE中尝试代码时，它工作了，但是当我将其添加到我的应用程序中时，没有响应，控制台是空的，所以我迷失在故障排除中。 以下是html文件：

{% block content %}
<form   method="POST" id="payment-form" >
{% csrf_token %}
  <input type="hidden" name="token" />
    <div class="group">
      <label>
        <span>Card</span>
        <div id="card-element" class="field"></div>
          <div id="card-errors" role="alert"></div>
      </label>
    </div>
    <div class="group">
      <label>
        <span>Name</span>
        <input id="name" name="name" class="field" placeholder="Jane Doe" />
      </label>
    </div>
    <div class="group">
      <label>
        <span>Address</span>
        <input id="address-line1" name="address_line1" class="field" placeholder="77 Winchester Lane" />
      </label>
      <label>
        <span>Address (cont.)</span>
        <input id="address-line2" name="address_line2" class="field" placeholder="" />
      </label>
      <label>
        <span>City</span>
        <input id="address-city" name="address_city" class="field" placeholder="Coachella" />
      </label>
      <label>
        <span>State</span>
        <input id="address-state" name="address_state" class="field" placeholder="CA" />
      </label>
      <label>
        <span>ZIP</span>
        <input id="address-zip" name="address_zip" class="field" placeholder="92236" />
      </label>
      <label>
        <span>Country</span>
        <input id="address-country" name="address_country" class="field" placeholder="United States" />
      </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>




{% endblock %}

{% block body_scripts %}
<script >
var stripe = Stripe('stripeKeyGoesHere');
var elements = stripe.elements();

var card = elements.create('card', {
  hidePostalCode: true,
  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');
console.log(result);
  if (result.token) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    var form = document.querySelector('form');
    form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    form.submit();
  } 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 options = {
    name: document.getElementById('name').value,
    address_line1: document.getElementById('address-line1').value,
    address_line2: document.getElementById('address-line2').value,
    address_city: document.getElementById('address-city').value,
    address_state: document.getElementById('address-state').value,
    address_zip: document.getElementById('address-zip').value,
    address_country: document.getElementById('address-country').value,
  };
  stripe.createToken(card, options).then(setOutcome);
});

</script>

---

当你说当你点击按钮时什么也没发生，你能看到在调试时（使用浏览器开发工具？）表单提交是否真的发生了吗

另外，您是否可以尝试在

if（result.token）{}

之前的

setoutput

函数中添加

console.log（result）

在调试服务器端代码时，如果提交表单，是否可以看到控制器/视图/处理程序，即

payments（request）

被调用？你能检查一下request.POST字典的内容吗

---

这样做的目的是检查提交表单时是否确实发出POST请求（客户端使用浏览器开发工具），服务器端控制器是否确实接收/处理请求，以及接收到的POST请求的外观（特别是request.POST字典）

这个问题一直没有解决，因为我没有找到调试的方法，也没有找到问题所在，但是Stripe团队帮助我构建了另一个表单，幸运的是，它与Django 1.11一起工作，希望它能帮助遇到同样问题的人：

var stripe = Stripe('stripe key');
var elements = stripe.elements();

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

      '::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) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    //var form = document.querySelector('form');
    //form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    //form.submit();
  } 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 options = {
    name: document.getElementById('name').value,
    address_line1: document.getElementById('address-line1').value,
    address_line2: document.getElementById('address-line2').value,
    address_city: document.getElementById('address-city').value,
    address_state: document.getElementById('address-state').value,
    address_zip: document.getElementById('address-zip').value,
    address_country: document.getElementById('address-country').value,
  };
  stripe.createToken(card, options).then(setOutcome);
});

---

表单提交正在进行，我正在使用pycharm，我可以看到正在提交帖子，在帖子字典中，令牌是一个空字符串。我加载了console.log（result），但控制台中没有发生任何事情。>表单提交正在发生。。我添加了console.log（result），但是在控制台mmm中没有发生任何事情。当卡输入更改时，至少应触发

更改

事件，并且

结果

在该阶段不应为空，因此应在浏览器控制台中记录一些内容。你有一个URL来分享我可以在哪里测试这个吗？这个网站是在一个开发服务器上，我仍然没有对这个问题的解释，但是我重写了另一个方法，它成功了，我不确定一切是如何工作的，我只是使用了Stripe文档中的javascript，并且能够注册信用卡，然后，我对它们进行了跟踪，并添加了其余的元素。很奇怪，但它现在起作用了。我将张贴调整后的代码，以防有人遇到这个问题

var stripe = Stripe('stripe key');
var elements = stripe.elements();

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

      '::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) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    //var form = document.querySelector('form');
    //form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    //form.submit();
  } 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 options = {
    name: document.getElementById('name').value,
    address_line1: document.getElementById('address-line1').value,
    address_line2: document.getElementById('address-line2').value,
    address_city: document.getElementById('address-city').value,
    address_state: document.getElementById('address-state').value,
    address_zip: document.getElementById('address-zip').value,
    address_country: document.getElementById('address-country').value,
  };
  stripe.createToken(card, options).then(setOutcome);
});