样式
Internal styles
指定排印和颜色的样式配置，从而自定义您的字段。设置您的样式配置为可选。
允许的选择器
input#pan#expiry#cvv.is-valid.is-invalid.is-empty.is-onfocus
注释：所有选择器都可以在 CSS 中组合以增加特殊性，例如 input#pan.is-valid
允许的 CSS 属性
colorfont-familyfont-sizefont-styleline-heighttext-alignfont-weightletter-spacingtext-transform
字体（仅限 Web 安全）
| 示例 | 字体族 |
|---|---|
| Georgia, serif | "Georgia, serif" |
| Palatino Linotype,Book Antiqua, Palatino, serif | "'Palatino Linotype','Book Antiqua', Palatino, serif" |
| Times New Roman, Times, serif | "Times New Roman, Times, serif" |
| Arial, Helvetica, sans-serif | "Arial,Helvetica, sans-serif" |
| Arial Black, Gadget, sans-serif | "'Arial Black', Gadget, sans-serif" |
| Comic Sans MS, Cursive, sans-serif | "'Comic Sans MS', Cursive, sans-serif" |
| Impact, Charcoal, sans-serif | "Impact, Charcoal, sans-serif" |
| Lucida Sans Unicode, sans-serif | "Lucida Sans Unicode" |
| Lucida Sans Unicode, Lucida Grande, sans-serif | "'Lucida Sans Unicode', 'Lucida Grande', sans-serif" |
| Tahoma, Geneva, sans-serif | "Tahoma, Geneva, sans-serif" |
| Trebuchet MS, Helvetica, sans-serif | "'Trebuchet MS', Helvetica, sans-serif |
| Verdana, Geneva, sans-serif | "Verdana, Geneva, sans-serif" |
以下是您应如何设置样式配置的示例。
CSS
Copied!
styles: {
"input": {
"color": "black",
"font-weight": "bold",
"font-size": "20px",
"letter-spacing": "3px"
},
"input#pan": {
"font-size": "24px"
},
"input.is-valid": {
"color": "green"
},
"input.is-invalid": {
"color": "red"
},
"input.is-onfocus": {
"color": "black"
}
}styles: { "input": { "color": "black", "font-weight": "bold", "font-size": "20px", "letter-spacing": "3px" }, "input#pan": { "font-size": "24px" }, "input.is-valid": { "color": "green" }, "input.is-invalid": { "color": "red" }, "input.is-onfocus": { "color": "black" } }External styles
我们的 SDK 通过向结账表添加类别来揭示内部状态。利用您的网站 CSS 使用这些类别来确定您的表格样式。
表格标签
.is-valid.visa.mastercard.amex.jcb.diners.maestro.discoverCSS
Copied!
.card .checkout.visa .label .type:before {
background-image: url("./visa.jpg")
}
.card .checkout.mastercard .label .type:before {
background-image: url("./mastercardjpg");
}
.card .checkout.amex .label .type:before {
background-image: url("./amex.jpg")";
}.card .checkout.visa .label .type:before { background-image: url("./visa.jpg") } .card .checkout.mastercard .label .type:before { background-image: url("./mastercardjpg"); } .card .checkout.amex .label .type:before { background-image: url("./amex.jpg")"; }
字段标签
.is-onfocus.is-empty.is-invalid.is-valid
CSS
Copied!
.card .checkout .field.is-onfocus {
border-color: black;
}
.card .checkout .field.is-empty {
border-color: orange;
}
.card .checkout .field.is-invalid {
border-color: red;
}
.card .checkout .field.is-valid {
border-color: green;
}.card .checkout .field.is-onfocus { border-color: black; } .card .checkout .field.is-empty { border-color: orange; } .card .checkout .field.is-invalid { border-color: red; } .card .checkout .field.is-valid { border-color: green; }
警告：该验证并不会检查客户的卡详情是否正确。验证器只会检查所输入的详情格式。
