Added the titles of the input fields

This commit is contained in:
PCoder 2017-07-16 21:29:42 +05:30
parent f4d3d53d0c
commit c09947ef12
3 changed files with 39 additions and 34 deletions

View file

@ -524,29 +524,30 @@ a.unlink:hover {
}
.brand {
float: left;
width: 10%;
}
.brand #brand-icon {
vertical-align: bottom;
padding-top: 13px;
}
.card-number-element {
float: left;
width: 63%;
}
.card-expiry-element {
float: left;
width: 17%;
}
.card-cvc-element {
float: left;
width: 10%;
}
.card-element {
margin-bottom: 10px;
padding: 0;
}
.card-element label{
width:100%;
margin-bottom:0px;
}
.my-input {
border-bottom: 1px solid #ccc;
}
#card-errors {
clear: both;
@ -604,21 +605,18 @@ a.unlink:hover {
margin-bottom: 30px;
}
.credit-card-element-with-brand {
width: 100%;
float: left;
}
.brand {
width: 16%;
}
.card-expiry-element {
width: 40%;
padding-right: 10px;
}
.card-cvc-element {
width: 15%;
padding-left: 10px;
}
.hide-mobile{
display:none;
}
}

View file

@ -68,7 +68,7 @@ $(document).ready(function () {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
lineHeight: '25px',
fontWeight: 300,
fontFamily: "'lato-light', sans-serif",
fontSize: '14px',
@ -79,7 +79,7 @@ $(document).ready(function () {
invalid: {
iconColor: '#eb4d5c',
color: '#eb4d5c',
lineHeight: '40px',
lineHeight: '25px',
fontWeight: 300,
fontFamily: "'lato-regular', sans-serif",
fontSize: '14px',
@ -93,7 +93,7 @@ $(document).ready(function () {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
lineHeight: '25px',
fontWeight: 300,
fontFamily: "'lato-regular', sans-serif",
fontSize: '14px',
@ -104,7 +104,7 @@ $(document).ready(function () {
invalid: {
iconColor: '#eb4d5c',
color: '#eb4d5c',
lineHeight: '40px',
lineHeight: '25px',
fontWeight: 300,
fontFamily: "'lato-regular', sans-serif",
fontSize: '14px',
@ -117,7 +117,7 @@ $(document).ready(function () {
var cardNumberElement = elements.create('cardNumber', {
style: credit_card_text_style,
placeholder: "____ ____ ____ ____"
placeholder: "Enter your credit card number"
});
cardNumberElement.mount('#card-number-element');

View file

@ -108,17 +108,24 @@
<form action="" id="payment-form-new" method="POST">
<input type="hidden" name="token"/>
<div class="group">
<div class="credit-card-element-with-brand">
<div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div>
<div class="card-number-element">
<div id="card-number-element" class="field"></div>
</div>
</div>
<div class="card-expiry-element">
<div id="card-expiry-element" class="field"></div>
</div>
<div class="card-cvc-element">
<div id="card-cvc-element" class="field"></div>
<div class="credit-card-goup">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element card-number-element">
<label>Card Number</label>
<div id="card-number-element" class="field my-input"></div>
</div>
<div class="col-xs-6 col-sm-5 col-md-3 col-lg-3 card-element card-expiry-element">
<label>Expiry Date</label>
<div id="card-expiry-element" class="field my-input"></div>
</div>
<div class="col-xs-12 col-sm-2 col-md-6 col-lg-6 hide-mobile"></div>
<div class="col-xs-6 col-sm-5 col-md-3 col-lg-3 card-element card-cvc-element">
<label>CVC</label>
<div id="card-cvc-element" class="field my-input"></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element brand">
<label>Card Type</label>
<i class="pf pf-credit-card" id="brand-icon"></i>
</div>
</div>
</div>
<div id="card-errors" role="alert"></div>