[IMP] website_payment: form for credit card, using jquery.payment in the module JS file + udpated CSS / SASS
bzr revid: tde@openerp.com-20131112132133-f9nqb7jgy1ovmc5b
This commit is contained in:
Thibault Delavallée
parent
92e72bb317
commit
3d73443fcd
|
|
@ -1,24 +1,53 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@charset "utf-8";
|
||||
input#cc_number {
|
||||
background-image: url('/website_payment/static/src/img/grey-dots.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 14px 14px;
|
||||
background-image: url("/website_payment/static/src/img/grey-dots.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 14px 14px;
|
||||
}
|
||||
|
||||
div.card_placeholder {
|
||||
background-image: url('/website_payment/static/src/img/placeholder.png');
|
||||
background-repeat: no-repeat;
|
||||
width: 32px;
|
||||
height: 20px;
|
||||
background-image: url("/website_payment/static/src/img/placeholder.png");
|
||||
background-repeat: no-repeat;
|
||||
width: 32px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
right: 20px;
|
||||
-webkit-transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*div.visa {
|
||||
background-image: url('/website_payment/static/src/img/placeholder.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 14px 14px;
|
||||
}*/
|
||||
div.amex {
|
||||
background-image: url("/website_payment/static/src/img/amex.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
div.diners {
|
||||
background-image: url("/website_payment/static/src/img/diners.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
div.discover {
|
||||
background-image: url("/website_payment/static/src/img/discover.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
div.jcb {
|
||||
background-image: url("/website_payment/static/src/img/jcb.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
div.mastercard {
|
||||
background-image: url("/website_payment/static/src/img/mastercard.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
div.visa {
|
||||
background-image: url("/website_payment/static/src/img/visa.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
input#cc_number:active, input#cc_number:focus {
|
||||
background-image: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,45 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import "compass/css3"
|
||||
input#cc_number
|
||||
background-image: url('/website_payment/static/src/img/grey-dots.png')
|
||||
background-repeat: no-repeat
|
||||
background-position: 14px 14px
|
||||
|
||||
.css_website_mail
|
||||
.has-error
|
||||
border-color: red
|
||||
.css_nav_month
|
||||
display: none
|
||||
&:first-of-type
|
||||
display: block
|
||||
div.card_placeholder
|
||||
background-image: url('/website_payment/static/src/img/placeholder.png')
|
||||
background-repeat: no-repeat
|
||||
width: 32px
|
||||
height: 20px
|
||||
position: absolute
|
||||
top: 34px
|
||||
right: 20px
|
||||
-webkit-transition: .4s cubic-bezier(0.455,0.03,0.515,0.955)
|
||||
transition: .4s cubic-bezier(0.455,0.03,0.515,0.955)
|
||||
pointer-events: none
|
||||
|
||||
.blog_content
|
||||
a.oe_mail_expand:after
|
||||
content: " →"
|
||||
a.oe_mail_expand
|
||||
font-weight: bold
|
||||
div.amex
|
||||
background-image: url('/website_payment/static/src/img/amex.png')
|
||||
background-repeat: no-repeat
|
||||
|
||||
p.post-meta
|
||||
position: relative
|
||||
top: -5px
|
||||
div.diners
|
||||
background-image: url('/website_payment/static/src/img/diners.png')
|
||||
background-repeat: no-repeat
|
||||
|
||||
.js_website_blog
|
||||
div#right_column
|
||||
section
|
||||
+opacity(0.6)
|
||||
section:hover
|
||||
+opacity(1)
|
||||
@include transition(all 0.2s ease-out)
|
||||
div.discover
|
||||
background-image: url('/website_payment/static/src/img/discover.png')
|
||||
background-repeat: no-repeat
|
||||
|
||||
div.jcb
|
||||
background-image: url('/website_payment/static/src/img/jcb.png')
|
||||
background-repeat: no-repeat
|
||||
|
||||
div.mastercard
|
||||
background-image: url('/website_payment/static/src/img/mastercard.png')
|
||||
background-repeat: no-repeat
|
||||
|
||||
div.visa
|
||||
background-image: url('/website_payment/static/src/img/visa.png')
|
||||
background-repeat: no-repeat
|
||||
|
||||
input#cc_number:active, input#cc_number:focus
|
||||
background-image: none
|
||||
|
|
|
|||
|
|
@ -2,11 +2,56 @@ $(document).ready(function () {
|
|||
|
||||
$('input#cc_number').payment('formatCardNumber');
|
||||
$('input#cc_cvc').payment('formatCardCVC');
|
||||
$('input#cc_expiry_mm').payment('restrictNumeric');
|
||||
$('input#cc_expiry_yy').payment('restrictNumeric');
|
||||
$('input#cc_expiry').payment('formatCardExpiry')
|
||||
|
||||
$('input#cc_number').on('focusout', function (e) {
|
||||
var valid_value = $.payment.validateCardNumber(this.value);
|
||||
console.log('check: ', valid_value);
|
||||
var card_type = $.payment.cardType(this.value);
|
||||
console.log('Validating card', this.value, 'is a', card_type, 'and valid:', valid_value);
|
||||
if (card_type) {
|
||||
$(this).parent('.form-group').children('.card_placeholder').removeClass().addClass('card_placeholder ' + card_type);
|
||||
}
|
||||
else {
|
||||
$(this).parent('.form-group').children('.card_placeholder').removeClass().addClass('card_placeholder');
|
||||
}
|
||||
if (valid_value) {
|
||||
$(this).parent('.form-group').addClass('has-success');
|
||||
$(this).parent('.form-group').removeClass('has-error');
|
||||
}
|
||||
else {
|
||||
$(this).parent('.form-group').addClass('has-error');
|
||||
$(this).parent('.form-group').removeClass('has-success');
|
||||
}
|
||||
});
|
||||
|
||||
$('input#cc_cvc').on('focusout', function (e) {
|
||||
var cc_nbr = $(this).parents('.oe_cc').find('#cc_number').val();
|
||||
var card_type = $.payment.cardType(cc_nbr);
|
||||
var valid_value = $.payment.validateCardCVC(this.value, card_type);
|
||||
console.log('Validating CVC', this.value, 'for card', cc_nbr, 'of type', card_type, 'and is valid:', valid_value);
|
||||
if (valid_value) {
|
||||
$(this).parent('.form-group').addClass('has-success');
|
||||
$(this).parent('.form-group').removeClass('has-error');
|
||||
}
|
||||
else {
|
||||
$(this).parent('.form-group').addClass('has-error');
|
||||
$(this).parent('.form-group').removeClass('has-success');
|
||||
}
|
||||
});
|
||||
|
||||
$('input#cc_expiry').on('focusout', function (e) {
|
||||
var expiry_value = $.payment.cardExpiryVal(this.value);
|
||||
var month = expiry_value.month || '';
|
||||
var year = expiry_value.year || '';
|
||||
var valid_value = $.payment.validateCardExpiry(month, year);
|
||||
console.log('Validating expiry', this.value, 'month', month, 'year', year, 'and is valid:', valid_value);
|
||||
if (valid_value) {
|
||||
$(this).parent('.form-group').addClass('has-success');
|
||||
$(this).parent('.form-group').removeClass('has-error');
|
||||
}
|
||||
else {
|
||||
$(this).parent('.form-group').addClass('has-error');
|
||||
$(this).parent('.form-group').removeClass('has-success');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -38,23 +38,25 @@
|
|||
<div class="container mt16 js_website_blog">
|
||||
<div class="row">
|
||||
<h3>Paypal payment: server 2 server</h3>
|
||||
<form class="form-horizontal col-sm-4" role="form">
|
||||
<form class="form-horizontal col-sm-4 oe_cc" role="form">
|
||||
<div class="form-group col-sm-8">
|
||||
<label for="cc_number">Card number</label>
|
||||
<label class="control-label" for="cc_number">Card number</label>
|
||||
<input type="tel" id="cc_number" class="form-control"/>
|
||||
<div class="pull-right card_placeholder"></div>
|
||||
<div class="card_placeholder"></div>
|
||||
<div class="visa"></div>
|
||||
</div>
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="cc_cvc">Card code</label>
|
||||
<label class="control-label" for="cc_cvc">Card code</label>
|
||||
<input type="text" id="cc_cvc" class="form-control" maxlength="4" palceholder="CVC"/>
|
||||
</div>
|
||||
<div class="form-group col-sm-7">
|
||||
<label for="cc_holder_name">Holder Name</label>
|
||||
<label class="control-label" for="cc_holder_name">Holder Name</label>
|
||||
<input type="text" id="cc_hoder_name" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group col-sm-5">
|
||||
<label for="cc_expires_mm">Expires</label>
|
||||
<select id="cc_expires_mm" class="form-control col-sm-2" maxlength="2">
|
||||
<label class="control-label" for="cc_expires_mm">Expires</label>
|
||||
<input type="text" id="cc_expiry" class="form-control" maxlength="7" placeholder="MM / YY"/>
|
||||
<!-- <select id="cc_expires_mm" class="form-control col-sm-2" maxlength="2">
|
||||
<option>MM</option>
|
||||
<option>01</option>
|
||||
<option>02</option>
|
||||
|
|
@ -66,7 +68,7 @@
|
|||
<option>14</option>
|
||||
<option>15</option>
|
||||
<option>16</option>
|
||||
</select>
|
||||
</select> -->
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue