条纹卡片元素在表单上不可见

Posted 2023-05-09

【中文标题】条纹卡片元素在表单上不可见

【英文标题】：Stripe card element is not visible on the form

【发布时间】：2018-01-12 12:49:39

【问题描述】：

我是 angularjs 的新手，只是想在我的 angular 应用程序中集成第 3 版的 stripe api。我尝试按照条纹站点中给出的步骤进行操作。现在的问题是，在条带站点中，整个代码都是基于纯 js 或 jquery。我试图将整个 js 代码从 stripe 放入我的角度控制器中，它加载正常，但问题是卡片元素在 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="[phone]" 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 应用程序的入口点。

编辑：经过多次尝试后，我发现卡已正确安装，并且在我发布时发送了卡输入，所以问题是我在卡输入中输入的任何内容都没有显示。

是不是因为我在 localhost 上而 https 不存在？

【参考方案1】：

它应该在 http 下使用您的测试密钥正常工作，只有在您的生产系统上 https 是强制性的。

我也使用 angular (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>

【讨论】：

这应该被标记为正确答案。 style="width: 30em" 是解决方案

【参考方案2】：

我猜有几个开发人员在第一次设置演示时遇到了这个问题。除非有其他问题，否则愚蠢的检查可能会有所帮助：

确保客户端实际连接到https://js.stripe.com/v3/ 并且公钥正确。如果连接失败，付款详情（卡片元素）将不会呈现。

打开检查窗口以查找客户端的任何错误。