mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-05-24 02:14:21 -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",
|
||||
"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"
|
||||
|
||||
@ -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',
|
||||
|
||||
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
|
||||
'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',
|
||||
|
||||
);
|
||||
|
||||
|
||||
@ -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,102 +195,112 @@
|
||||
<p> <br/> </p>
|
||||
@endif
|
||||
|
||||
<h3>{{ trans('texts.billing_method') }}</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
@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-{{ ($accountGateway->gateway_id == GATEWAY_BRAINTREE) ? 12 : 8 }}">
|
||||
|
||||
<div class="col-md-7">
|
||||
@if (isset($acceptedCreditCardTypes))
|
||||
<div class="pull-right">
|
||||
<h3>
|
||||
{{ trans('texts.billing_method') }}
|
||||
@if (isset($acceptedCreditCardTypes))
|
||||
|
||||
@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
|
||||
@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>
|
||||
@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>
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user