如何使用 Bootstrap 设置条纹元素输入的样式? - IT屋-程序员软件开发技术分享社区
首页 其他开发 如何使用 Bootstrap 设置条纹元素输入的样式?
如何使用 Bootstrap 设置条纹元素输入的样式?
[英] How can I style a Stripe Elements input with Bootstrap?
本文介绍了如何使用 Bootstrap 设置条纹元素输入的样式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个使用 Stripe 处理付款的简单网站.我正在使用 Bootstrap 进行造型.当我使用 Stripe Elements 插入付款字段时，它们没有使用 Bootstrap 设置样式.如何将 Bootstrap 的样式应用于 Elements 付款字段?
解决方案
好吧，所以我必须弄清楚这一点，因为我使用的是 Stripe.js v2，并且 Stripe 技术支持向我解释了安全漏洞，所以我觉得有必要切换到 Stripe.js v3 Elements".他们说的是，与您的信用卡表单元素位于同一页面上的任何 javascript 都可以获取敏感信用卡数据的值.我想这可能发生在一个人拉入外部脚本的情况下……我想它一定发生了，否则他们不会关心它.无论如何，这就是我如何让我的 Stripe.js v3 元素与 Bootstrap 4 输入组一起工作.这是一个完整的工作示例，您只需要更改公钥.
基于 jQuery 的默认示例 <html lang="zh-cn"><头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><title>Stripe.js v3 with Bootstrap 4 Test</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinAmAmFcFAGORIGINSIGINX"><风格>/* 焦点上的蓝色轮廓 */.StripeElement--焦点{边框颜色:#80BDFF；大纲:0;box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);过渡:边框颜色 0.15 秒缓出，框阴影 0.15 秒缓入；}/* 没有这个就看不到我输入的内容 */#card-number.form-control,#card-cvc.form-control,#card-exp.form-control {显示:内联块；}</风格><身体><div class="container-fluid"><h1 class="mt-5">Stripe.js v3 与 Bootstrap 4(测试版)测试</h1><div id="card-errors" role="alert"></div><div class="card"><div class="card-body"><form id="payment-form"><label for="name">卡片上的姓名</label><div class="input-group mb-2"><div class="input-group-prepend"><span class="input-group-text">A</span> <input type="text" class="form-control" id="name"><div class="input-group-append"><span class="input-group-text">B</span>
<label for="card-number">信用卡号码</label><div class="input-group mb-2"><div class="input-group-prepend"><span class="input-group-text">C</span>
<span id="card-number" class="form-control"><!-- 条纹卡片元素--></span><div class="input-group-append"><span class="input-group-text">D</span>
<label for="card-cvc">CVC 号码</label><div class="input-group mb-2"><div class="input-group-prepend"><span class="input-group-text">E</span>
<span id="card-cvc" class="form-control"><!-- 条纹 CVC 元素 --></span>
<label for="card-exp">过期</label><div class="input-group mb-2"><span id="card-exp" class="form-control"><!-- 条纹卡到期元素--></span><div class="input-group-append"><span class="input-group-text">F</span>
<button id="payment-submit" class="btn btn-primary mt-1">提交付款</button></表单>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNGt4="crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39jQxfakfakvskor匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7s/脚本><script src="https://js.stripe.com/v3/"></script><脚本>$(document).ready(function(){//创建一个 Stripe 客户端var stripe = Stripe('pk_test_XxXxXxXxXxXxXxXxXxXxXxXx');//创建一个元素的实例var 元素 = stripe.elements();//尝试匹配 bootstrap 4 样式var 样式 = {根据: {'lineHeight': '1.35','fontSize': '1.11rem','颜色':'#495057'，'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'}};//卡号var card = elements.create('cardNumber', {'占位符':'','风格':风格});card.mount('#card-number');//CVCvar cvc = elements.create('cardCvc', {'占位符':'','风格':风格});cvc.mount('#card-cvc');//卡到期var exp = elements.create('cardExpiry', {'占位符':'','风格':风格});exp.mount('#card-exp');//提交$('#payment-submit').on('click', function(e){e.preventDefault();var cardData = {'name': $('#name').val()};stripe.createToken(card, cardData).then(function(result) {控制台日志(结果)；if(result.error && result.error.message){警报(结果.错误.消息)；}别的{警报(result.token.id)；}});});});
</html>我仅在 Android 上的 Firefox、Chrome 和 Chrome 中进行了测试.似乎工作正常.如果您遇到任何问题，请告诉我.
可选的基于 Vue.js 的示例 <html lang="zh-cn"><头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><title>Stripe.js v3 与 Bootstrap 4 和 Vue.js</title><link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/><风格>/* 这个背景颜色对于示例来说不是必需的 */html，正文{背景:#999;}/* 条纹元素容器的填充 */.stripe-element-container {填充顶部:.55rem；填充底部:.50rem；}/* 焦点上的蓝色轮廓 */.StripeElement--焦点{边框颜色:#80BDFF；大纲:0;box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);过渡:边框颜色 0.15 秒缓入淡出，框阴影 0.15 秒缓入缓出；}/* 没有这个就看不到我输入的内容 */#card-number.form-control,#card-cvc.form-control,#card-exp.form-control {显示:内联块；}</风格><身体><div id="应用程序"><stripe-form inline-template><div class="container-fluid"><div class="row"><div class="col-md-4 offset-md-4 pt-5"><div class="card"><div class="card-header"><h3 class="mb-0">立即付款</h3><div class="card-body"><div v-bind:class="{alert: activeError, 'alert-danger': activeError}" role="alert" v-html="errorText"></div><表格><div class="form-group mb-4"><label for="name">卡片上的姓名</label><input type="text" class="form-control" v-model="ccName"/>
<div class="form-group"><label for="card-number">信用卡号码</label><span id="card-number" class="form-control stripe-element-container"><!-- 条纹卡片元素--></span>
<div class="form-group"><label for="card-cvc">CVC 号码</label><span id="card-cvc" class="form-control stripe-element-container"><!-- 条纹 CVC 元素 --></span>
<div class="form-group"><label for="card-exp">过期</label><span id="card-exp" class="form-control stripe-element-container"><!-- 条纹卡到期元素--></span>
<button @click.prevent="paymentSubmit" class="btn btn-primary mt-1 float-right">提交付款</button></表单>
</stripe-form><模态></模态>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script><script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script><script src="https://js.stripe.com/v3/"></script><脚本>//你的 Stripe 公钥const stripePublicKey = 'pk_test_XxXxXxXxXxXxXxXxXxXxXxXx';/*** 类允许触发事件和* 监听组件之间的事件*/window.Events = 新类{构造函数(){this.vue = new Vue();}火(事件，数据=空){this.vue.$emit( 事件, 数据);}监听(事件，回调){this.vue.$on( 事件, 回调);}}/*** 见:https://bootstrap-vue.js.org/docs/components/modal/*/Vue.component('modal', {模板:`<div><b-modal ref="myModalRef" ok-only ok-title="Close" v-bind:title="title"><p class="mb-0">{{ body }}</p></b-modal>
`，数据:函数(){返回 {标题: ''，身体: ''}},方法: {显示模态(){this.$refs.myModalRef.show()}/* 这个例子不需要,隐藏模态(){this.$refs.myModalRef.hide()}*/},创建(){Events.listenFor('modalShow', ( data ) => {this.title = data.title;this.body = data.message;this.showModal();});}});Vue.component('stripe-form', {数据:函数(){返回 {活动错误:假，错误文本:''，ccName: '',条纹:空，卡:空，CVC:空，exp:空}},方法: {付款提交:函数(){让 cardData = {'name': this.ccName};//确保名称字段不为空if( cardData.name.trim() == '' ){//显示错误this.activeError = true;this.errorText = '<b>提交错误:</b><br/>姓名为必填项.';//中止！！返回;}this.stripe.createToken( this.card, cardData).then( (result) => {if(result.error && result.error.message){//显示任何错误this.activeError = true;this.errorText = '<b>提交错误:</b><br/>'+ result.error.message;}别的{/*** 模式中的成功消息.* 这通常是您发布到服务器的地方，* 并让它实际尝试信用卡交易* 使用刚刚收到的令牌 ID.*/Events.fire('modalShow', {'title': '成功',消息":result.token.id});//清除表单this.activeError = false;this.errorText = '';this.ccName = '';//条带元素必须以特殊方式清除this.card.clear();this.cvc.clear();this.exp.clear();}});}},安装:功能(){//创建一个 Stripe 客户端this.stripe = Stripe(stripePublicKey);//创建一个元素的实例const 元素 = this.stripe.elements();/*** 尝试匹配 bootstrap 4 样式.* --------------------------------* fontSize 以 rem 为单位，但 Stripe 说它应该以像素为单位.*/常量样式 = {根据: {'字体大小': '16px','颜色':'#495057'，'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'}};//卡号this.card = elements.create('cardNumber', {'占位符':'','风格':风格});this.card.mount('#card-number');//CVCthis.cvc = elements.create('cardCvc', {'占位符':'','风格':风格});this.cvc.mount('#card-cvc');//卡到期this.exp = elements.create('cardExpiry', {'占位符':'','风格':风格});this.exp.mount('#card-exp');}});new Vue({ el: '#app' });</html>
这个 Vue.js 示例可以从一些工作中受益，但可以帮助您入门.
I'm building a simple website that will process payments with Stripe. I'm using Bootstrap for my styling. When I use Stripe Elements to insert the payment fields, they aren't styled with Bootstrap. How can I apply Bootstrap's styling to the Elements payment fields?
解决方案
Alright, so I had to figure this out, because I was using Stripe.js v2, and the security vulnerability was explained to me by Stripe tech support, so I felt obligated to switch to Stripe.js v3 "Elements". What they said was that any javascript on the same page as your credit card form elements could obtain the values of the sensitive credit card data. I suppose this could happen if a person was pulling in external scripts ... and I suppose it must have happened, or they wouldn't care about it. Anyway, this is how I got my Stripe.js v3 elements working with Bootstrap 4 input groups. It's a full working example, you'd just need to change out the public key.
Default jQuery Based Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Stripe.js v3 with Bootstrap 4 Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* Blue outline on focus */
.StripeElement--focus {
border-color: #80BDFF;
outline:0;
box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* Can't see what I type without this */
#card-number.form-control,
#card-cvc.form-control,
#card-exp.form-control {
display:inline-block;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1 class="mt-5">Stripe.js v3 with Bootstrap 4 (beta) Test</h1>
<div id="card-errors" role="alert"></div>
<div class="card">
<div class="card-body">
<form id="payment-form">
<label for="name">Name on Card</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<span class="input-group-text">A</span>
</div>
<input type="text" class="form-control" id="name">
<div class="input-group-append">
<span class="input-group-text">B</span>
</div>
</div>
<label for="card-number">Credit Card Number</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<span class="input-group-text">C</span>
</div>
<span id="card-number" class="form-control">
<!-- Stripe Card Element -->
</span>
<div class="input-group-append">
<span class="input-group-text">D</span>
</div>
</div>
<label for="card-cvc">CVC Number</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<span class="input-group-text">E</span>
</div>
<span id="card-cvc" class="form-control">
<!-- Stripe CVC Element -->
</span>
</div>
<label for="card-exp">Expiration</label>
<div class="input-group mb-2">
<span id="card-exp" class="form-control">
<!-- Stripe Card Expiry Element -->
</span>
<div class="input-group-append">
<span class="input-group-text">F</span>
</div>
</div>
<button id="payment-submit" class="btn btn-primary mt-1">Submit Payment</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
$(document).ready(function(){
// Create a Stripe client
var stripe = Stripe('pk_test_XxXxXxXxXxXxXxXxXxXxXxXx');
// Create an instance of Elements
var elements = stripe.elements();
// Try to match bootstrap 4 styling
var style = {
base: {
'lineHeight': '1.35',
'fontSize': '1.11rem',
'color': '#495057',
'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'
}
};
// Card number
var card = elements.create('cardNumber', {
'placeholder': '',
'style': style
});
card.mount('#card-number');
// CVC
var cvc = elements.create('cardCvc', {
'placeholder': '',
'style': style
});
cvc.mount('#card-cvc');
// Card expiry
var exp = elements.create('cardExpiry', {
'placeholder': '',
'style': style
});
exp.mount('#card-exp');
// Submit
$('#payment-submit').on('click', function(e){
e.preventDefault();
var cardData = {
'name': $('#name').val()
};
stripe.createToken(card, cardData).then(function(result) {
console.log(result);
if(result.error && result.error.message){
alert(result.error.message);
}else{
alert(result.token.id);
}
});
});
});
</script>
</body>
</html>
I tested only in Firefox, Chrome, and Chrome on Android. Seems to work fine. Let me know if you experience any issues.
Optional Vue.js Based Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Stripe.js v3 with Bootstrap 4 and Vue.js</title>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<style>
/* This background color not essential for the example */
html, body {
background:#999;
}
/* Padding for Stripe Element containers */
.stripe-element-container {
padding-top: .55rem;
padding-bottom: .50rem;
}
/* Blue outline on focus */
.StripeElement--focus {
border-color: #80BDFF;
outline:0;
box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* Can't see what I type without this */
#card-number.form-control,
#card-cvc.form-control,
#card-exp.form-control {
display:inline-block;
}
</style>
</head>
<body>
<div id="app">
<stripe-form inline-template>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 offset-md-4 pt-5">
<div class="card">
<div class="card-header">
<h3 class="mb-0">Pay Now</h3>
</div>
<div class="card-body">
<div v-bind:class="{alert: activeError, 'alert-danger': activeError}" role="alert" v-html="errorText"></div>
<form>
<div class="form-group mb-4">
<label for="name">Name on Card</label>
<input type="text" class="form-control" v-model="ccName" />
</div>
<div class="form-group">
<label for="card-number">Credit Card Number</label>
<span id="card-number" class="form-control stripe-element-container">
<!-- Stripe Card Element -->
</span>
</div>
<div class="form-group">
<label for="card-cvc">CVC Number</label>
<span id="card-cvc" class="form-control stripe-element-container">
<!-- Stripe CVC Element -->
</span>
</div>
<div class="form-group">
<label for="card-exp">Expiration</label>
<span id="card-exp" class="form-control stripe-element-container">
<!-- Stripe Card Expiry Element -->
</span>
</div>
<button @click.prevent="paymentSubmit" class="btn btn-primary mt-1 float-right">Submit Payment</button>
</form>
</div>
</div>
</div>
</div>
</div>
</stripe-form>
<modal></modal>
</div>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
// Your Stripe public key
const stripePublicKey = 'pk_test_XxXxXxXxXxXxXxXxXxXxXxXx';
/**
* Class allows firing of events and
* listening of events between components
*/
window.Events = new class {
constructor(){
this.vue = new Vue();
}
fire( event, data = null ){
this.vue.$emit( event, data );
}
listenFor( event, callback ){
this.vue.$on( event, callback );
}
}
/**
* See: https://bootstrap-vue.js.org/docs/components/modal/
*/
Vue.component('modal', {
template: `
<div>
<b-modal ref="myModalRef" ok-only ok-title="Close" v-bind:title="title">
<p class="mb-0">{{ body }}</p>
</b-modal>
</div>
`,
data: function(){
return {
title: '',
body: ''
}
},
methods: {
showModal () {
this.$refs.myModalRef.show()
}
/* This not needed for this example
,
hideModal () {
this.$refs.myModalRef.hide()
}
*/
},
created(){
Events.listenFor('modalShow', ( data ) => {
this.title = data.title;
this.body = data.message;
this.showModal();
});
}
});
Vue.component('stripe-form', {
data: function(){
return {
activeError: false,
errorText: '',
ccName: '',
stripe: null,
card: null,
cvc: null,
exp: null
}
},
methods: {
paymentSubmit: function(){
let cardData = {
'name': this.ccName
};
// Ensure the name field is not empty
if( cardData.name.trim() == '' ){
// Show an error
this.activeError = true;
this.errorText = '<b>Submission Error:</b><br />Name is required.';
// Abort !!
return;
}
this.stripe.createToken( this.card, cardData).then( (result) => {
if(result.error && result.error.message){
// Show any errors
this.activeError = true;
this.errorText = '<b>Submission Error:</b><br />' + result.error.message;
}else{
/**
* Success message in modal.
* This is normally where you'd post to your server,
* and have it actually attempt the credit card transaction
* using the token ID that was just received.
*/
Events.fire('modalShow', {
'title': 'Success',
'message': result.token.id
});
// Clear the form
this.activeError = false;
this.errorText = '';
this.ccName = '';
// Stripe elements must be cleared in a special way
this.card.clear();
this.cvc.clear();
this.exp.clear();
}
});
}
},
mounted: function(){
// Create a Stripe client
this.stripe = Stripe( stripePublicKey );
// Create an instance of Elements
const elements = this.stripe.elements();
/**
* Try to match bootstrap 4 styling.
* --------------------------------
* fontSize was in rem units, but Stripe says that it should be in pixels.
*/
const style = {
base: {
'fontSize': '16px',
'color': '#495057',
'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'
}
};
// Card number
this.card = elements.create('cardNumber', {
'placeholder': '',
'style': style
});
this.card.mount('#card-number');
// CVC
this.cvc = elements.create('cardCvc', {
'placeholder': '',
'style': style
});
this.cvc.mount('#card-cvc');
// Card expiry
this.exp = elements.create('cardExpiry', {
'placeholder': '',
'style': style
});
this.exp.mount('#card-exp');
}
});
new Vue({ el: '#app' });
</script>
</body>
</html>
This Vue.js example could benefit from some work, but may help get you started.
这篇关于如何使用 Bootstrap 设置条纹元素输入的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
