條紋卡元素是不可見的形式

我是angularjs的新手，只是試圖在我的角度應用程序中集成版本3的條紋api。我試圖按照條紋網站中給出的步驟操作。現在的問題是，在條紋網站整個代碼是基於普通的js或jQuery。我試圖從條紋的整個js代碼到我的角度控制器，並加載罰款，但問題是，卡元素仍然是空白的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); 
    }); 

}]);

HTML文件的angularjs狀態：

<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，不是嗎？

來源

2017-08-04 morohiki

它應該可以正常工作下的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>

來源

2017-08-25 13:50:07

條紋卡元素是不可見的形式

回答

相關問題