给定代码的条纹元素不显示自定义付款表格 [英] Stripe Elements given code don't show the custom payment form
本文介绍了给定代码的条纹元素不显示自定义付款表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我简单地复制并粘贴了 Stripe 在其元素页面中提供的 3 个代码:
https://stripe.com/docs/elements
html 文件中的 html，css文件中的css，连接到html和js文件中的js，连接到html
结果令人失望，根本没有显示结果"部分中的内容.
我只能看到文字:信用卡或借记卡以及提交付款按钮，完全没有样式，
我错过了什么吗?显然是的:p
<head profile="http://www.w3.org/2005/10/profile"><link rel="icon" type="image/png" href="icone.png"/><link rel="stylesheet" type="text/css" href="stripeCSS.css"><script src="https://js.stripe.com/v3/"></script><script src="stripejs.js"></script><身体><form action="/charge" method="post" id="payment-form"><div class="form-row"><label for="card-element">信用卡或借记卡<div id="卡片元素"><!-- 用于显示元素错误--><div id="card-errors" role="alert"></div>
<button>提交付款</button></表单></html>
CSS
.StripeElement {背景颜色:白色；填充:8px 12px；边框半径:4px；边框:1px 实心透明；框阴影:0 1px 3px 0 #e6ebf1;-webkit-transition: box-shadow 150ms 缓解；过渡:box-shadow 150ms 缓和；}.StripeElement--焦点{框阴影:0 1px 3px 0 #cfd7df;}.StripeElement--无效{边框颜色:#fa755a；}.StripeElement--webkit-autofill {背景颜色:#fefde5 ！重要；}js
//创建一个 Stripe 客户端var stripe = Stripe('pk_test_xxxxxxxxxxxxxxx');//创建一个元素的实例var 元素 = stripe.elements();//创建元素时可以将自定义样式传递给选项.//(请注意，此演示使用的样式集比下面的指南更广泛.)var 样式 = {根据: {颜色:'#32325d'，线高: '24px',fontFamily: '"Helvetica Neue", Helvetica, sans-serif',fontSmoothing: '抗锯齿',字体大小:'16px'，'::占位符':{颜色:'#aab7c4'}},无效的: {颜色:'#fa755a'，iconColor: '#fa755a'}};//创建卡片元素的实例var card = elements.create('card', {style: style});//将卡片元素的实例添加到`card-element` <div>card.mount('#card-element');//处理来自卡片元素的实时验证错误.card.addEventListener('change', function(event) {var displayError = document.getElementById('card-errors');如果(事件.错误){displayError.textContent = event.error.message;} 别的 {displayError.textContent = '';}});//处理表单提交var form = document.getElementById('payment-form');form.addEventListener('submit', function(event) {event.preventDefault();stripe.createToken(card).then(function(result) {如果(结果.错误){//如果有错误通知用户var errorElement = document.getElementById('card-errors');errorElement.textContent = result.error.message;} 别的 {//将令牌发送到您的服务器stripeTokenHandler(result.token);}});}); 解决方案
查看下面的代码.尽管如此，您仍然需要添加条纹元素.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');//创建一个元素的实例var 元素 = stripe.elements();//创建元素时可以将自定义样式传递给选项.//(请注意，此演示使用的样式集比下面的指南更广泛.)var 样式 = {根据: {颜色:'#32325d'，线高: '24px',fontFamily: '"Helvetica Neue", Helvetica, sans-serif',fontSmoothing: '抗锯齿',字体大小:'16px'，'::占位符':{颜色:'#aab7c4'}},无效的: {颜色:'#fa755a'，iconColor: '#fa755a'}};//创建卡片元素的实例var card = elements.create('card', {style: style});//将 card Element 的一个实例添加到 `card-element` <div>card.mount('#card-element');//处理来自卡片元素的实时验证错误.card.addEventListener('change', function(event) {var displayError = document.getElementById('card-errors');如果(事件.错误){displayError.textContent = event.error.message;} 别的 {displayError.textContent = '';}});//处理表单提交var form = document.getElementById('payment-form');form.addEventListener('submit', function(event) {event.preventDefault();stripe.createToken(card).then(function(result) {如果(结果.错误){//如果有错误通知用户var errorElement = document.getElementById('card-errors');errorElement.textContent = result.error.message;} 别的 {//将令牌发送到您的服务器stripeTokenHandler(result.token);}});});body, html {高度:100%；背景色:#f7f8f9；颜色:#6b7c93；}*， 标签 {font-family: "Helvetica Neue", Helvetica, sans-serif;字体大小:16px；字体变体:正常；填充:0；边距:0；-webkit-font-smoothing:抗锯齿；}按钮 {边界:无；边框半径:4px；大纲:无；文字装饰:无；颜色:#fff;背景:#32325d；空白:nowrap；显示:内联块；高度:40px；行高:40px；填充:0 14px；box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);边框半径:4px；字体大小:15px；字体粗细:600；字母间距:0.025em；文字装饰:无；-webkit-transition:所有 150 毫秒的缓解；过渡:所有 150 毫秒缓动；向左飘浮;左边距:12px；边距顶部:31px；}按钮:悬停{变换:translateY(-1px);box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);背景颜色:#43458b；}形式 {填充:30px；高度:120px；}标签 {字体粗细:500；字体大小:14px；显示:块；底边距:8px；}#card-errors {高度:20px；填充:4px 0;颜色:#fa755a；}.form-row {宽度:70%；向左飘浮;}.token {颜色:#32325d；字体系列:源代码专业版"，等宽；字体粗细:500；}.包装{宽度:90%；边距:0 自动；高度:100%；}#stripe-token-handler {位置:绝对；顶部:0；左:25%；正确:25%；填充:20px 30px；边界半径:0 0 4px 4px；box-sizing: 边框框；box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),0 15px 35px rgba(50, 50, 93, 0.15),0 5px 15px rgba(0, 0, 0, 0.1);-webkit-transition:所有 500 毫秒的缓入缓出；过渡:所有 500 毫秒的缓入缓出；变换:translateY(0);不透明度:1；背景颜色:白色；}#stripe-token-handler.is-hidden {不透明度:0；变换:translateY(-80px);}/*** 这里显示的 CSS 不会在快速入门指南中介绍，但会显示* 如何使用 CSS 来设置 Element 容器的样式.*/.StripeElement {背景颜色:白色；填充:8px 12px；边框半径:4px；边框:1px 实心透明；框阴影:0 1px 3px 0 #e6ebf1;-webkit-transition: box-shadow 150ms 缓解；过渡:box-shadow 150ms 缓和；}.StripeElement--焦点{框阴影:0 1px 3px 0 #cfd7df;}.StripeElement--无效{边框颜色:#fa755a；}.StripeElement--webkit-autofill {背景颜色:#fefde5 ！重要；}.ElementsApp, .ElementsApp .InputElement {颜色:#32325d；行高:24px；字体系列:Helvetica Neue"，Helvetica，无衬线字体；字体大小:16px；高度:24px；-webkit-font-smoothing:抗锯齿；-moz-osx-font-smoothing:灰度；}.ElementsApp:not(.is-autofill) .InputElement:-webkit-autofill {颜色:#32325d；-webkit-text-fill-color: #32325d;}.ElementsApp .InputElement + .Input-placeholder--ie {不透明度:1；颜色:#aab7c4；}.ElementsApp .InputElement::-webkit-input-placeholder {不透明度:1；颜色:#aab7c4；}.ElementsApp .InputElement::-moz-placeholder {不透明度:1；颜色:#aab7c4；}.ElementsApp .InputElement:-ms-input-placeholder {不透明度:1；颜色:#aab7c4；}.ElementsApp .InputElement::placeholder {不透明度:1；颜色:#aab7c4；}.ElementsApp .InputElement.is-invalid {颜色:#fa755a；}.ElementsApp:not(.is-autofill) .InputElement.is-invalid:-webkit-autofill {颜色:#fa755a；-webkit-text-fill-color: #fa755a;}.ElementsApp.is-invalid .Icon-fill--invalid {填充:#fa755a；}<script src="//js.stripe.com/v3/"></script><form action="/charge" method="post" id="payment-form"><div class="form-row"><label for="card-element">信用卡或借记卡<div id="卡片元素"><!-- 将在此处插入条纹元素.--><!-- 用于显示表单错误--><div id="card-errors" role="alert"></div>
<button>提交付款</button>
