我正在建立一个简单的网站,用Stripe处理付款。我为我的造型使用Bootstrap。当我使用条纹元素插入付款字段时,它们不使用Bootstrap样式。我如何将Bootstrap的样式应用到元素付款字段?如何使用Bootstrap设置Stripe Elements输入的样式?
10
A
回答
6
围绕文档多一点挖后,我发现 https://stripe.com/docs/stripe.js#the-element-container说:“你应该 风格,你安装一个元素就好像它是你的页面上的 容器。”
通过增加引导的form-control
类的<div>
我安装的元素,现场看起来几乎像任何其他引导风格的输入字段:
<div id="card-element" class="form-control"></div>
出于某种原因,现场没有按高度“T相当的比赛,但是经过反复试验,我把它 有:
var stripe = Stripe('your_key');
var elements = stripe.elements();
var card = elements.create('card', { style:
{
base: {
lineHeight: '1.429'
}
}
});
card.mount('#card-element');
10
好了,所以我必须想出解决办法,因为我是用Stripe.js v2和安全漏洞来解释我受条纹技术支持,所以我觉得有义务切换到Stripe.js v3“元素”。他们所说的是,与信用卡表单元素相同页面上的任何javascript都可以获取敏感信用卡数据的值。我想这可能会发生,如果一个人拉外部脚本......我想它肯定发生了,或者他们不会在乎它。无论如何,这就是我使用Bootstrap 4输入组获得Stripe.js v3元素的方式。这是一个完整的工作示例,您只需要更改公钥。
默认基于jQuery例
<!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>
我只在Firefox,铬,铬和Android上进行测试。似乎工作正常。如果您遇到任何问题,请告知我。
可选Vue.js基于实例的
<!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/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>
这Vue.js例子可以从一些工作中获益,但可以帮你开始。
+0
这对我来说很好!你绝对抓到了我错过的几种风格。 – michael
相关问题
- 1. 如何使用CSS设置上传输入的样式?
- 2. 如何在Twitter上设置输入字段的样式?
- 3. 根据仅使用CSS的输入数据设置文本输入样式
- 4. 如何使用Twitter Bootstrap设置Meteor-Angular?
- 5. react-stripe-elements没有检测到Stripe.js
- 6. 如何使用javascript设置输入值
- 7. 如何使用jQuery设置输入值?
- 8. 如何使用按钮代替输入,样式输入?
- 9. 如何在Joomla 3中使用Bootstrap的输入追加样式搜索字段样式?
- 10. 将Bootstrap表行重置为“Stripe”风格
- 11. VS2010:如何设置输入格式
- 12. Bootstrap输入组宽度设置
- 13. 如何使用jQuery设置样式表的位置?
- 14. 如何在Pug中使用数据库值设置嵌入式样式
- 15. 如何设置地址链接的样式,使其看起来像使用CSS的输入按钮
- 16. 如何在twitter引导中设置输入复选框的样式?
- 17. 如何在React-native中设置密码文本输入的样式
- 18. 如何根据“检查”值设置无线电输入的样式
- 19. 如何在输入焦点时设置表单元素的样式?
- 20. 如何使用Apache Poi设置R1C1样式公式
- 21. 样式Recurly.js输入字段
- 22. 如何使用bootstrap制作这样的输出?
- 23. 使用Twitter-Bootstrap&simple_form的Rails:如何以横向形式嵌入输入?
- 24. 如何设置UITextfield的边框样式
- 25. 如何设置TextBox标题的样式?
- 26. 如何设置dojo元素的样式?
- 27. 如何设置样式电网ExtJS的
- 28. 如何设置'EditText'的样式?
- 29. 如何设置ListView项的样式?
- 30. JAVA - 如何设置用户输入的输入范围验证
这是真的,但您还需要在元素聚焦时应用边框颜色。另外,如果您使用的是Bootstrap 4 beta版本,并且正尝试使用输入组,那么您必须更改元素CSS,使其不是“display:flex”而是“display:block”。我有一个这样的工作演示...但它不是真正的问题的答案...除非是这样。 –
好点!这听起来像是答案:)我很想看演示。 – michael