Added card library

bower.json

@@ -34,7 +34,8 @@
     "jSignature": "brinley/jSignature#^2.1.0",
     "select2": "select2-dist#^4.0.3",
     "mousetrap": "^1.6.0",
-    "tablesorter": "jquery.tablesorter#^2.28.4"
+    "tablesorter": "jquery.tablesorter#^2.28.4",
+    "card": "^2.1.1"
   },
   "resolutions": {
     "jquery": "~1.11"

gulpfile.js

@@ -95,6 +95,10 @@ elixir(function(mix) {
         bowerDir + '/bootstrap-daterangepicker/daterangepicker.js'
     ], 'public/js/daterangepicker.min.js');
 
+    mix.scripts([
+        bowerDir + '/card/dist/card.js',
+    ], 'public/js/card.min.js');
+
     mix.scripts([
         bowerDir + '/tablesorter/dist/js/jquery.tablesorter.combined.js',
         bowerDir + '/tablesorter/dist/js/widgets/widget-grouping.min.js',

resources/lang/en/texts.php

@@ -2370,6 +2370,9 @@ $LANG = array(
 	// New Client Portal styling
 	'invoice_from' => 'Invoices From:',
     'email_alias_message' => 'Note: we require each user to have a unique email address.<br/>Consider using an alias. ie, email+label@example.com',
+    'full_name' => 'Full Name',
+    'month_year' => 'MONTH/YEAR',
+    'valid_thru' => 'Valid\nthru',
 
 );
 

resources/views/payments/credit_card.blade.php

@@ -3,7 +3,10 @@
 @section('head')
     @parent
 
+    <script src="{{ asset('js/card.min.js') }}"></script>
+
     <script type="text/javascript">
+
         $(function() {
             $('.payment-form').submit(function(event) {
                 var $form = $(this);
@@ -13,6 +16,43 @@
 
                 return true;
             });
+
+            @if ($accountGateway->gateway_id != GATEWAY_BRAINTREE)
+                var card = new Card({
+                    form: 'form#payment-form', // *required*
+                    container: '.card-wrapper', // *required*
+
+                    formSelectors: {
+                        numberInput: 'input#card_number', // optional — default input[name="number"]
+                        expiryInput: 'input#expiry', // optional — default input[name="expiry"]
+                        cvcInput: 'input#cvv', // optional — default input[name="cvc"]
+                        nameInput: 'input#first_name, input#last_name'
+                    },
+
+                    width: 255, // optional — default 350px
+                    formatting: true, // optional - default true
+
+                    // Strings for translation - optional
+                    messages: {
+                        monthYear: "{{ trans('texts.month_year') }}",
+                        validDate: "{{ trans('texts.valid_thru') }}",
+                    },
+
+                    // Default placeholders for rendered fields - optional
+                    placeholders: {
+                        number: '•••• •••• •••• ••••',
+                        name: "{{ $client ? ($contact->first_name . ' ' . $contact->last_name) : trans('texts.full_name') }}",
+                        expiry: '••/••',
+                        cvc: '•••'
+                    },
+
+                    masks: {
+                        cardNumber: '•' // optional - mask card number
+                    },
+                    debug: true,
+                });
+
+            @endif
         });
     </script>
 
@@ -155,10 +195,22 @@
         <p>&nbsp;<br/>&nbsp;</p>
     @endif
 
-    <h3>{{ trans('texts.billing_method') }}</h3>
+    <div class="row">
+        <div class="col-md-{{ ($accountGateway->gateway_id == GATEWAY_BRAINTREE) ? 12 : 8 }}">
+
+            <h3>
+                {{ trans('texts.billing_method') }}
+                @if (isset($acceptedCreditCardTypes))
+                    &nbsp;
+                    @foreach ($acceptedCreditCardTypes as $card)
+                        <img src="{{ $card['source'] }}" alt="{{ $card['alt'] }}" style="width: 34px; display: inline; margin-left: 8px;"/>
+                    @endforeach
+                @endif
+                <br/>
+            </h3>
 
             <div class="row">
-        <div class="col-md-9">
+                <div class="col-md-12">
                     @if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
                         <div id="card_number" class="braintree-hosted form-control"></div>
                     @else
@@ -169,20 +221,9 @@
                                 ->label('') !!}
                     @endif
                 </div>
-        <div class="col-md-3">
-            @if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
-                <div id="cvv" class="braintree-hosted form-control"></div>
-            @else
-                {!! Former::text(!empty($tokenize) ? '' : 'cvv')
-                        ->id('cvv')
-                        ->placeholder(trans('texts.cvv'))
-                        ->autocomplete('off')
-                        ->label('') !!}
-            @endif
-        </div>
             </div>
             <div class="row">
-        <div class="col-md-6">
+                <div class="col-md-5">
                     @if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
                         <div id="expiration_month" class="braintree-hosted form-control"></div>
                     @else
@@ -205,7 +246,7 @@
                                 !!}
                     @endif
                 </div>
-        <div class="col-md-6">
+                <div class="col-md-4">
                     @if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
                         <div id="expiration_year" class="braintree-hosted form-control"></div>
                     @else
@@ -227,9 +268,23 @@
                                   !!}
                     @endif
                 </div>
+                <div class="col-md-3">
+                    @if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
+                        <div id="cvv" class="braintree-hosted form-control"></div>
+                    @else
+                        {!! Former::text(!empty($tokenize) ? '' : 'cvv')
+                                ->id('cvv')
+                                ->placeholder(trans('texts.cvv'))
+                                ->autocomplete('off')
+                                ->label('') !!}
+                    @endif
                 </div>
+            </div>
+
             <div class="row" style="padding-top:18px">
+
                 <div class="col-md-5">
+
                     @if (isset($amount) && $client && $account->showTokenCheckbox($storageGateway/* will contain gateway id */))
                         <input id="token_billing" type="checkbox" name="token_billing" {{ $account->selectTokenCheckbox() ? 'CHECKED' : '' }} value="1" style="margin-left:0px; vertical-align:top">
                         <label for="token_billing" class="checkbox" style="display: inline;">{{ trans('texts.token_billing') }}</label>
@@ -242,15 +297,10 @@
                         </span>
                     @endif
                 </div>
-
-        <div class="col-md-7">
-            @if (isset($acceptedCreditCardTypes))
-                <div class="pull-right">
-                    @foreach ($acceptedCreditCardTypes as $card)
-                        <img src="{{ $card['source'] }}" alt="{{ $card['alt'] }}" style="width: 70px; display: inline; margin-right: 6px;"/>
-                    @endforeach
             </div>
-            @endif
+        </div>
+        <div class="col-md-4">
+            <div class='card-wrapper'></div>
         </div>
     </div>
 

resources/views/payments/payment_css.blade.php

@@ -42,6 +42,7 @@ body {
 }
 
 div.col-md-3,
+div.col-md-4,
 div.col-md-5,
 div.col-md-6,
 div.col-md-7,