diff --git a/addons/website_payment/static/src/css/website_payment.css b/addons/website_payment/static/src/css/website_payment.css index e61696fcd30..196d6cf8956 100644 --- a/addons/website_payment/static/src/css/website_payment.css +++ b/addons/website_payment/static/src/css/website_payment.css @@ -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; } diff --git a/addons/website_payment/static/src/css/website_payment.sass b/addons/website_payment/static/src/css/website_payment.sass index d467df2de47..b5d4d03a9bd 100644 --- a/addons/website_payment/static/src/css/website_payment.sass +++ b/addons/website_payment/static/src/css/website_payment.sass @@ -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 diff --git a/addons/website_payment/static/src/js/payment_acquirer.js b/addons/website_payment/static/src/js/payment_acquirer.js index 0b0a2369c4e..c0678ba3651 100644 --- a/addons/website_payment/static/src/js/payment_acquirer.js +++ b/addons/website_payment/static/src/js/payment_acquirer.js @@ -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'); + } }); }); diff --git a/addons/website_payment/views/website_payment_templates.xml b/addons/website_payment/views/website_payment_templates.xml index 3201283dd5e..75b0b9336d2 100644 --- a/addons/website_payment/views/website_payment_templates.xml +++ b/addons/website_payment/views/website_payment_templates.xml @@ -38,23 +38,25 @@

Paypal payment: server 2 server

-
+
- + -
+
+
- +
- +
- - +