Javascript Laravel：信用卡字段赢得'；带条带集成时不显示

我已将文档中必要的条纹代码复制并粘贴到我的Laravel应用程序中的checkout.blade.php中：

@section('content')
<!-- Stripe elements -->
            <form action="/charge" method="post" id="payment-form">
                <div class="form-row">
                  <label for="card-element">
                    Credit or debit card
                  </label>
                  <div id="card-element">
                    <!-- A Stripe Element will be inserted here. -->

                  </div>

                  <!-- Used to display form errors. -->
                  <div id="card-errors" role="alert"></div>
                </div>

                <button>Submit Payment</button>
            </form>
            <!-- end Stripe elements -->
@endsection

@节（“内容”）
信用卡还是借记卡
付款
@端部

@节（“条带”）
（功能（）{
//创建条带客户端。
var stripe=stripe（'blablabla'）；
//创建元素的实例。
var elements=stripe.elements（）；
//创建元素时，可以将自定义样式传递给选项。
//（请注意，此演示使用的样式集比下面的指南更广泛。）
变量样式={
基数：{
颜色：“#32325d”，
fontFamily:“新赫尔维蒂卡”，赫尔维蒂卡，无衬线，
fontSmoothing:'抗锯齿'，
fontSize:'16px'，
“：：占位符”：{
颜色：“#aab7c4”
}
},
无效：{
颜色：“#fa755a”，
iconColor:“#fa755a”
}
};
//创建卡元素的实例。
var card=elements.create（'card'，{style:style}）；
//将card元素的实例添加到“card元素”中。
卡。挂载（“#卡元素”）；
//处理来自卡元素的实时验证错误。
card.addEventListener（'change'，函数（事件）{
var displayError=document.getElementById（'card-errors'）；
if（event.error）{
displayError.textContent=event.error.message；
}否则{
displayError.textContent=''；
}
});
//处理表格提交。
var form=document.getElementById（'payment-form'）；
表单.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
stripe.createToken（卡片）.then（函数（结果）{
if（result.error）{
//如果出现错误，请通知用户。
var errorElement=document.getElementById（'card-errors'）；
errorElement.textContent=result.error.message；
}否则{
//将令牌发送到服务器。
stripeTokenHandler（result.token）；
}
});
});
//提交带有令牌ID的表单。
函数stripeTokenHandler（令牌）{
//将令牌ID插入表单，以便将其提交到服务器
var form=document.getElementById（'payment-form'）；
var hiddenInput=document.createElement（'input'）；
setAttribute（'type'，'hidden'）；
setAttribute（'name'，'stripeToken'）；
hiddenInput.setAttribute（'value'，token.id）；
表格.appendChild（hiddenInput）；
//提交表格
表单提交（）；
}
})();
@端部

标签和按钮会显示在屏幕上，但由于某些原因，实际的信用卡输入字段不会显示

card.mount('#card-element');


<div id="card-element">
<!-- A Stripe Element will be inserted here. -->              
</div>

card.mount（“#card元素”）；

难道不应该用上面的代码自动挂载吗

在阅读了文档之后，我认为UI组件应该包含在代码中，并且可以显示所有内容

card.mount('#card-element');


<div id="card-element">
<!-- A Stripe Element will be inserted here. -->              
</div>

---

我遗漏了什么？

在html中包含Stripe js

<script src="https://js.stripe.com/v3/"></script>

---

对不起，我忘了说我已经有了。它在我的刀片档案里。