Jquery 条纹卡元素在窗体上不可见
我是angularjs新手,只是想在angular应用程序中集成3版的stripe api。我尝试按照stripe站点中给出的步骤进行操作。现在的问题是,在stripe站点中,整个代码都基于普通的js或jquery。我试着把stripe中的整个js代码放到angular控制器中,它加载得很好,但问题是在ui表单中card元素仍然是空的,而且我在控制台上没有收到任何错误 以下是我的控制器代码和html代码:Jquery 条纹卡元素在窗体上不可见,jquery,html,angularjs,stripe-payments,dom-manipulation,Jquery,Html,Angularjs,Stripe Payments,Dom Manipulation,我是angularjs新手,只是想在angular应用程序中集成3版的stripe api。我尝试按照stripe站点中给出的步骤进行操作。现在的问题是,在stripe站点中,整个代码都基于普通的js或jquery。我试着把stripe中的整个js代码放到angular控制器中,它加载得很好,但问题是在ui表单中card元素仍然是空的,而且我在控制台上没有收到任何错误 以下是我的控制器代码和html代码: myapp.controller('paymentCtrl', ['$scope', fu
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>
名称
电话
卡片
付25美元
我也试着把这个表单改成指令,但还是不起作用
注意:加载到一个名为main.html的文件中,该文件基本上是我的angularjs应用程序的入口点
编辑:经过多次尝试后,我发现卡安装正确,并且在我发布时发送了卡输入,所以问题是我在卡输入上输入的内容并没有显示出来
是因为我在本地主机上,而https不在那里吗?它应该可以在http下使用测试密钥正常工作,只有在生产系统上https是必需的 我也使用angular(4),我也有类似的问题,卡输入没有显示。事实证明,在我的情况下,这只是一个造型问题。通过玩弄这些样式,我得到了卡片输入字段。最后,我添加了这些样式元素(为清晰起见,内联显示):
这应标记为正确答案
style=“width:30em”
是解决方案
<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>