Javascript 条纹形式不'；不能正常显示

我正在建立一个基于订阅的网站。对于签出页面，条带表单无法正确显示

下面是问题的屏幕截图。 我试图确保我的脚本不会覆盖stripe中的任何元素，但我仍然存在这个问题。您可以在下面看到

checkout.html

、

checkout.css

和

checkout.js

checkout.html

{%extends'home/base.html%}
{%load static%}
{%block head%}
结账
#签出方法{
背景：#fff；
边界半径：2px；
显示：内联块；
最大高度：700px；
保证金：1rem；
位置：相对位置；
宽度：700px；
盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）；
}
{%endblock头%}
{%block content%}
在下面输入凭证代码
如果有多个凭证代码，请用逗号分隔
{%csrf_令牌%}


订单摘要
{%用于订单中的项目。获取\u购物车\u项目%}
{{item}}
${{item.product.price}
{%endfor%}
订单总数
${{order.get\u cart\u total}
用信用卡结账
{%csrf_令牌%}
用Braintree结账
带条纹结账
信用卡还是借记卡
付款
成功！获得令牌：
var form=document.querySelector（“#付款单”）；
var client_token='{{client_token}}}'；
braintree.dropin.create({
授权：客户端\u令牌，
容器：“#bt dropin”，
贝宝：{
流程：“保险库”
}
}，函数（createErr，实例）{
表单.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
requestPaymentMethod（函数（err，有效负载）{
如果（错误）{
console.log（'Error'，err）；
返回；
}
//将nonce添加到表单并提交
document.querySelector（“#nonce”）.value=payload.nonce；
表单提交（）；
});
});
});
函数toggleDisplay（）{
var x=document.getElementById（“collapseStripe”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
};
{%endblock内容%}

checkout.css

body，html{
身高：100%；
背景色：#f7f8f9；
颜色：#6b7c93；
}
*，标签{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
字体大小：16px；
字体变体：正常；
填充：0；
保证金：0；
-webkit字体平滑：抗锯齿；
}
钮扣{
边界：无；
边界半径：4px；
大纲：无；
文字装饰：无；
颜色：#fff；
背景：32325d；
空白：nowrap；
显示：内联块；
高度：40px；
线高：40px；
填充：0 14px；
盒影：0 4px 6px rgba（50,50,93,11），0 1px 3px rgba（0,0,0,08）；
边界半径：4px；
字体大小：15px；
字号：600；
字母间距：0.025em；
文字装饰：无；
-webkit转换：所有150ms的易用性；
过渡：所有150ms缓解；
浮动：左；
左边距：12px；
利润上限：28px；
}
按钮：悬停{
转换：translateY（-1px）；
盒影：0 7px 14px rgba（50,50,93,10），0 3px 6px rgba（0,0,0,08）；
背景色：#43458b；
}
形式{
填充：300px；
高度：1200px；
}
标签{
字号：500；
字体大小：14px；
显示：块；
边缘底部：8px；
}
#卡片错误{
高度：20px；
填充：4px0；
颜色：#fa755a；
}
.表格行{
宽度：70%；
浮动：左；
}
.代币{
颜色：#32325d；
字体系列：“源代码Pro”，monospace；
字号：500；
}
.包装纸{
宽度：670px；
保证金：0自动；
身高：100%；
}
#条带令牌处理程序{
位置：绝对位置；
排名：0；
左：25%；
右：25%；
填充：20px 30px；
边界半径：0 0 4px 4px；
框大小：边框框；
盒影：0 50px 100px rgba（50,50,93,0.1），
0 15px 35px rgba（50,50,93,0.15），
0 5px15px rgba（0,0,0,0.1）；
-webkit转换：所有500毫秒的易入易出；
过渡：所有500ms的缓进缓出；
变换：translateY（0）；
不透明度：1；
背景色：白色；
}
#stripe-token-handler.is-hidden{
不透明度：0；
转换：translateY（-80px）；
}
/**
*此处显示的CSS将不会在《快速入门指南》中介绍，而是显示
*如何使用CSS设置元素容器的样式。
*/
.条纹元素{
背景色：白色；
高度：40px；
填充：10px 12px；
边界半径：4px；
边框：1px实心透明；
盒影：0 1px 3px 0#e6ebf1；
-webkit过渡：盒影150ms轻松；
过渡：长方体阴影150ms缓解；
}
.StripeElement—焦点{
盒影：0 1px 3px 0#cfd7df；
}
.StripeElement--无效{
边框颜色：#fa755a；
}
.StripeElement--webkit自动填充{
背景色：#fefde5！重要；
}

checkout.js

//创建条带客户端。
var条带=条带（'pk_测试1gVJE1B3TYjY3ykiEhZgWeGe00mRO0lVwa'）；
//创建元素的实例。
var elements=stripe.elements（）；
//创建元素时，可以将自定义样式传递给选项。
//（请注意，此演示使用的样式集比下面的指南更广泛。）
变量样式={
基数：{
颜色：“#32325d”，
线宽：“18px”，
fontFamily:“新赫尔维蒂卡”，赫尔维蒂卡，无衬线，
fontSmoothing:'抗锯齿'，
fontSize:'16px'，
“：：占位符”：{
颜色