条纹卡元素在窗体上不可见

Question

我是angularjs的新手，只是尝试在我的angular应用程序中集成版本3的Stripe API。我试图按照条纹站点中给出的步骤进行操作。现在的问题是，在带区站点中，整个代码都基于纯js或jquery。我试图将整个js代码从stripe放到我的角度控制器中，并且可以很好地加载，但是问题是card元素在ui形式中仍然为空白，而且在控制台上没有任何错误。

这是我的控制器代码和html代码：

myapp.controller('paymentCtrl', ['$scope', function($scope) 
{
  var stripe = Stripe('abcdedfght');
  var elements = stripe.elements();
  var card = elements.create('card', 
  {
    hidePostalCode: true,
    style: {
            base: {
                    iconColor: '#F99A52',
                    color: '#32315E',
                    lineHeight: '48px',
                    fontWeight: 400,
                    fontFamily: '"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) 
    {
      // 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,
                        address_zip: form.querySelector('input[name=address-zip]').value
                      };
    stripe.createToken(card, extraDetails).then(setOutcome);
  });

}]);

用于angularjs状态的HTML文件：

<div ng-controller='paymentCtrl'>
<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" role="alert"></div>
  </div>
</form>
</div>

我也尝试将这种形式更改为指令，但仍然无法正常工作。

注意：加载到名为main.html的文件中，该文件基本上是我的angularjs应用程序的入口。

编辑：尝试了很多次后，我发现卡安装正确并且在发帖时发送了卡输入，所以问题是我在卡输入上输入的内容没有得到显示。

是因为我在本地主机上，而https不在那里吗？

Answer 1

在带有测试密钥的http下，它应该可以正常工作，只有在生产系统上必须使用https。

我还使用了角度（4），并且卡输入没有显示时也遇到了类似的问题。事实证明，就我而言，这只是一个样式问题。通过玩转样式，我看到了卡片输入字段。最后，我添加了以下样式元素（为清晰起见，以内联方式显示）：

  <div>
    <div style="width: 30em" #stripecardelement id="card-element"></div>
  </div>
  <div>
    <!-- Used to display Element errors -->
    <span style="width: 30em; height: 2em; letter-spacing: 0em" id="card-errors" role="alert"></span>
  </div>