给定代码的条纹元素不显示自定义付款表格 | 给定代码的条纹元素不显示自定义付款表格
本文介绍了给定代码的条纹元素不显示自定义付款表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述 我简单地复制并粘贴了 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></表单>
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>
I have simply copied and pasted the 3 codes that Stripe gives in its elements page :
https://stripe.com/docs/elements
The html in an html file,The CSS in the css file, connected to the htmland the js in a js file, connected to the html
The result is disappointing and not showing at all what's in their "result" section.
I can only see the text : Credit or debit card and the button Submit Payment, with no styling at all,
Am I missing something ? Obviously yes :p
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<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">
</div>
<!-- Used to display Element errors -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</body>
</html>
The css
.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
the js
// Create a Stripe client
var stripe = Stripe('pk_test_xxxxxxxxxxxxxx');
// Create an instance of Elements
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
解决方案
Check out the code below. You still have to add stripe element though.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
// Create an instance of Elements
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 31px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 90%;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
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: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
.ElementsApp, .ElementsApp .InputElement {
color: #32325d;line-height: 24px;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 16px;height: 24px;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ElementsApp:not(.is-autofilled) .InputElement:-webkit-autofill {
color: #32325d;
-webkit-text-fill-color: #32325d;
}
.ElementsApp .InputElement + .Input-placeholder--ie {
opacity: 1;color: #aab7c4;
}
.ElementsApp .InputElement::-webkit-input-placeholder {
opacity: 1;color: #aab7c4;
}
.ElementsApp .InputElement::-moz-placeholder {
opacity: 1;color: #aab7c4;
}
.ElementsApp .InputElement:-ms-input-placeholder {
opacity: 1;color: #aab7c4;
}
.ElementsApp .InputElement::placeholder {
opacity: 1;color: #aab7c4;
}
.ElementsApp .InputElement.is-invalid {
color: #fa755a;
}
.ElementsApp:not(.is-autofilled) .InputElement.is-invalid:-webkit-autofill {
color: #fa755a;
-webkit-text-fill-color: #fa755a;
}
.ElementsApp.is-invalid .Icon-fill--invalid {
fill: #fa755a;
}<script src="//js.stripe.com/v3/"></script>
<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>
这篇关于给定代码的条纹元素不显示自定义付款表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-21 19:03