mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-05-31 03:14:33 -04:00
Added card library
This commit is contained in:
Hillel Coren
parent
be02c69017
commit
44c2959f05
@ -34,7 +34,8 @@
|
|||||||
"jSignature": "brinley/jSignature#^2.1.0",
|
"jSignature": "brinley/jSignature#^2.1.0",
|
||||||
"select2": "select2-dist#^4.0.3",
|
"select2": "select2-dist#^4.0.3",
|
||||||
"mousetrap": "^1.6.0",
|
"mousetrap": "^1.6.0",
|
||||||
"tablesorter": "jquery.tablesorter#^2.28.4"
|
"tablesorter": "jquery.tablesorter#^2.28.4",
|
||||||
|
"card": "^2.1.1"
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"jquery": "~1.11"
|
"jquery": "~1.11"
|
||||||
|
|||||||
@ -95,6 +95,10 @@ elixir(function(mix) {
|
|||||||
bowerDir + '/bootstrap-daterangepicker/daterangepicker.js'
|
bowerDir + '/bootstrap-daterangepicker/daterangepicker.js'
|
||||||
], 'public/js/daterangepicker.min.js');
|
], 'public/js/daterangepicker.min.js');
|
||||||
|
|
||||||
|
mix.scripts([
|
||||||
|
bowerDir + '/card/dist/card.js',
|
||||||
|
], 'public/js/card.min.js');
|
||||||
|
|
||||||
mix.scripts([
|
mix.scripts([
|
||||||
bowerDir + '/tablesorter/dist/js/jquery.tablesorter.combined.js',
|
bowerDir + '/tablesorter/dist/js/jquery.tablesorter.combined.js',
|
||||||
bowerDir + '/tablesorter/dist/js/widgets/widget-grouping.min.js',
|
bowerDir + '/tablesorter/dist/js/widgets/widget-grouping.min.js',
|
||||||
|
|||||||
2497
public/css/card.css
vendored
Normal file
2497
public/css/card.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
public/css/card.css.map
Normal file
1
public/css/card.css.map
Normal file
File diff suppressed because one or more lines are too long
3
public/js/card.min.js
vendored
Normal file
3
public/js/card.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
public/js/card.min.js.map
Normal file
1
public/js/card.min.js.map
Normal file
File diff suppressed because one or more lines are too long
@ -2370,6 +2370,9 @@ $LANG = array(
|
|||||||
// New Client Portal styling
|
// New Client Portal styling
|
||||||
'invoice_from' => 'Invoices From:',
|
'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',
|
'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',
|
||||||
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,10 @@
|
|||||||
@section('head')
|
@section('head')
|
||||||
@parent
|
@parent
|
||||||
|
|
||||||
|
<script src="{{ asset('js/card.min.js') }}"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
$('.payment-form').submit(function(event) {
|
$('.payment-form').submit(function(event) {
|
||||||
var $form = $(this);
|
var $form = $(this);
|
||||||
@ -13,6 +16,43 @@
|
|||||||
|
|
||||||
return true;
|
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>
|
</script>
|
||||||
|
|
||||||
@ -155,102 +195,112 @@
|
|||||||
<p> <br/> </p>
|
<p> <br/> </p>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<h3>{{ trans('texts.billing_method') }}</h3>
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-9">
|
<div class="col-md-{{ ($accountGateway->gateway_id == GATEWAY_BRAINTREE) ? 12 : 8 }}">
|
||||||
@if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
|
|
||||||
<div id="card_number" class="braintree-hosted form-control"></div>
|
|
||||||
@else
|
|
||||||
{!! Former::text(!empty($tokenize) ? '' : 'card_number')
|
|
||||||
->id('card_number')
|
|
||||||
->placeholder(trans('texts.card_number'))
|
|
||||||
->autocomplete('cc-number')
|
|
||||||
->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">
|
|
||||||
@if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
|
|
||||||
<div id="expiration_month" class="braintree-hosted form-control"></div>
|
|
||||||
@else
|
|
||||||
{!! Former::select(!empty($tokenize) ? '' : 'expiration_month')
|
|
||||||
->id('expiration_month')
|
|
||||||
->autocomplete('cc-exp-month')
|
|
||||||
->placeholder(trans('texts.expiration_month'))
|
|
||||||
->addOption('01 - January', '1')
|
|
||||||
->addOption('02 - February', '2')
|
|
||||||
->addOption('03 - March', '3')
|
|
||||||
->addOption('04 - April', '4')
|
|
||||||
->addOption('05 - May', '5')
|
|
||||||
->addOption('06 - June', '6')
|
|
||||||
->addOption('07 - July', '7')
|
|
||||||
->addOption('08 - August', '8')
|
|
||||||
->addOption('09 - September', '9')
|
|
||||||
->addOption('10 - October', '10')
|
|
||||||
->addOption('11 - November', '11')
|
|
||||||
->addOption('12 - December', '12')->label('')
|
|
||||||
!!}
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
@if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
|
|
||||||
<div id="expiration_year" class="braintree-hosted form-control"></div>
|
|
||||||
@else
|
|
||||||
{!! Former::select(!empty($tokenize) ? '' : 'expiration_year')
|
|
||||||
->id('expiration_year')
|
|
||||||
->autocomplete('cc-exp-year')
|
|
||||||
->placeholder(trans('texts.expiration_year'))
|
|
||||||
->addOption('2016', '2016')
|
|
||||||
->addOption('2017', '2017')
|
|
||||||
->addOption('2018', '2018')
|
|
||||||
->addOption('2019', '2019')
|
|
||||||
->addOption('2020', '2020')
|
|
||||||
->addOption('2021', '2021')
|
|
||||||
->addOption('2022', '2022')
|
|
||||||
->addOption('2023', '2023')
|
|
||||||
->addOption('2024', '2024')
|
|
||||||
->addOption('2025', '2025')
|
|
||||||
->addOption('2026', '2026')->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>
|
|
||||||
<span class="help-block" style="font-size:15px">
|
|
||||||
@if ($storageGateway == GATEWAY_STRIPE)
|
|
||||||
{!! trans('texts.token_billing_secure', ['link' => link_to('https://stripe.com/', 'Stripe.com', ['target' => '_blank'])]) !!}
|
|
||||||
@elseif ($storageGateway == GATEWAY_BRAINTREE)
|
|
||||||
{!! trans('texts.token_billing_secure', ['link' => link_to('https://www.braintreepayments.com/', 'Braintree', ['target' => '_blank'])]) !!}
|
|
||||||
@endif
|
|
||||||
</span>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-7">
|
<h3>
|
||||||
@if (isset($acceptedCreditCardTypes))
|
{{ trans('texts.billing_method') }}
|
||||||
<div class="pull-right">
|
@if (isset($acceptedCreditCardTypes))
|
||||||
|
|
||||||
@foreach ($acceptedCreditCardTypes as $card)
|
@foreach ($acceptedCreditCardTypes as $card)
|
||||||
<img src="{{ $card['source'] }}" alt="{{ $card['alt'] }}" style="width: 70px; display: inline; margin-right: 6px;"/>
|
<img src="{{ $card['source'] }}" alt="{{ $card['alt'] }}" style="width: 34px; display: inline; margin-left: 8px;"/>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
@endif
|
||||||
|
<br/>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
@if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
|
||||||
|
<div id="card_number" class="braintree-hosted form-control"></div>
|
||||||
|
@else
|
||||||
|
{!! Former::text(!empty($tokenize) ? '' : 'card_number')
|
||||||
|
->id('card_number')
|
||||||
|
->placeholder(trans('texts.card_number'))
|
||||||
|
->autocomplete('cc-number')
|
||||||
|
->label('') !!}
|
||||||
|
@endif
|
||||||
</div>
|
</div>
|
||||||
@endif
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-5">
|
||||||
|
@if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
|
||||||
|
<div id="expiration_month" class="braintree-hosted form-control"></div>
|
||||||
|
@else
|
||||||
|
{!! Former::select(!empty($tokenize) ? '' : 'expiration_month')
|
||||||
|
->id('expiration_month')
|
||||||
|
->autocomplete('cc-exp-month')
|
||||||
|
->placeholder(trans('texts.expiration_month'))
|
||||||
|
->addOption('01 - January', '1')
|
||||||
|
->addOption('02 - February', '2')
|
||||||
|
->addOption('03 - March', '3')
|
||||||
|
->addOption('04 - April', '4')
|
||||||
|
->addOption('05 - May', '5')
|
||||||
|
->addOption('06 - June', '6')
|
||||||
|
->addOption('07 - July', '7')
|
||||||
|
->addOption('08 - August', '8')
|
||||||
|
->addOption('09 - September', '9')
|
||||||
|
->addOption('10 - October', '10')
|
||||||
|
->addOption('11 - November', '11')
|
||||||
|
->addOption('12 - December', '12')->label('')
|
||||||
|
!!}
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
@if ($accountGateway->gateway_id == GATEWAY_BRAINTREE)
|
||||||
|
<div id="expiration_year" class="braintree-hosted form-control"></div>
|
||||||
|
@else
|
||||||
|
{!! Former::select(!empty($tokenize) ? '' : 'expiration_year')
|
||||||
|
->id('expiration_year')
|
||||||
|
->autocomplete('cc-exp-year')
|
||||||
|
->placeholder(trans('texts.expiration_year'))
|
||||||
|
->addOption('2016', '2016')
|
||||||
|
->addOption('2017', '2017')
|
||||||
|
->addOption('2018', '2018')
|
||||||
|
->addOption('2019', '2019')
|
||||||
|
->addOption('2020', '2020')
|
||||||
|
->addOption('2021', '2021')
|
||||||
|
->addOption('2022', '2022')
|
||||||
|
->addOption('2023', '2023')
|
||||||
|
->addOption('2024', '2024')
|
||||||
|
->addOption('2025', '2025')
|
||||||
|
->addOption('2026', '2026')->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" 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>
|
||||||
|
<span class="help-block" style="font-size:15px">
|
||||||
|
@if ($storageGateway == GATEWAY_STRIPE)
|
||||||
|
{!! trans('texts.token_billing_secure', ['link' => link_to('https://stripe.com/', 'Stripe.com', ['target' => '_blank'])]) !!}
|
||||||
|
@elseif ($storageGateway == GATEWAY_BRAINTREE)
|
||||||
|
{!! trans('texts.token_billing_secure', ['link' => link_to('https://www.braintreepayments.com/', 'Braintree', ['target' => '_blank'])]) !!}
|
||||||
|
@endif
|
||||||
|
</span>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class='card-wrapper'></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -42,6 +42,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
div.col-md-3,
|
div.col-md-3,
|
||||||
|
div.col-md-4,
|
||||||
div.col-md-5,
|
div.col-md-5,
|
||||||
div.col-md-6,
|
div.col-md-6,
|
||||||
div.col-md-7,
|
div.col-md-7,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user