Added offline payment option to the checkout page

This commit is contained in:
Dave Earley 2016-07-09 11:37:53 +01:00
parent efcb2ba84e
commit 1a4f87521c
4 changed files with 80 additions and 33 deletions

View File

@ -67,7 +67,7 @@ $(function() {
toggleSubmitDisabled($submitButton);
if ($form.hasClass('payment-form')) {
if ($form.hasClass('payment-form') && !$('#pay_offline').is(":checked")) {
clearFormErrors($('.payment-form'));
Stripe.setPublishableKey($form.data('stripe-pub-key'));

View File

@ -4635,7 +4635,7 @@ function log() {
toggleSubmitDisabled($submitButton);
if ($form.hasClass('payment-form')) {
if ($form.hasClass('payment-form') && !$('#pay_offline').is(":checked")) {
clearFormErrors($('.payment-form'));
Stripe.setPublishableKey($form.data('stripe-pub-key'));
@ -4729,6 +4729,15 @@ function log() {
$('.card-number').payment('formatCardNumber');
$('.card-cvc').payment('formatCardCVC');
$('#pay_offline').change(function () {
$('.online_payment').toggle(!this.checked);
$('.offline_payment').toggle(this.checked);
// Disbale CC form inputs to prevent Chrome trying to validate hidden fields
$('.online_payment input:hidden, .online_payment input select:hidden').attr('disabled', this.checked);
}).change();
});
function processFormErrors($form, errors)

View File

@ -133,45 +133,73 @@
</div>
</div>
@if($order_requires_payment && @$payment_gateway->is_on_site)
<style>
.offline_payment_toggle {
padding: 20px 0;
}
</style>
@if($order_requires_payment)
<h3>Payment Information</h3>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{!! Form::label('card-number', 'Card Number') !!}
<input required="required" name="card-number" type="text" autocomplete="off" placeholder="**** **** **** ****" class="form-control card-number" size="20" data-stripe="number">
@if($event->enable_offline_payments)
<div class="offline_payment_toggle">
<div class="custom-checkbox">
<input data-toggle="toggle" id="pay_offline" name="pay_offline" type="checkbox" value="1">
<label for="pay_offline">Pay using offline method</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
{!! Form::label('card-expiry-month', 'Exipry Month') !!}
{!! Form::selectRange('card-expiry-month',1,12,null, [
'class' => 'form-control card-expiry-month',
'data-stripe' => 'exp_month'
] ) !!}
<div class="offline_payment" style="display: none;">
<h5>Offline Payment Instructions</h5>
<div class="well">
{{ $event->offline_payment_instructions }}
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
{!! Form::label('card-expiry-year', 'Exipry Year') !!}
{!! Form::selectRange('card-expiry-year',date('Y'),date('Y')+10,null, [
'class' => 'form-control card-expiry-year',
'data-stripe' => 'exp_year'
] ) !!}</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{!! Form::label('card-expiry-year', 'CVC Number') !!}
<input required="required" name="card-cvc" placeholder="***" class="form-control card-cvc" data-stripe="cvc">
@endif
@if(@$payment_gateway->is_on_site)
<div class="online_payment">
<div class="row">
<div class="col-md-12">
<div class="form-group">
{!! Form::label('card-number', 'Card Number') !!}
<input required="required" name="card-number" type="text" autocomplete="off" placeholder="**** **** **** ****" class="form-control card-number" size="20" data-stripe="number">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
{!! Form::label('card-expiry-month', 'Exipry Month') !!}
{!! Form::selectRange('card-expiry-month',1,12,null, [
'class' => 'form-control card-expiry-month',
'data-stripe' => 'exp_month'
] ) !!}
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
{!! Form::label('card-expiry-year', 'Exipry Year') !!}
{!! Form::selectRange('card-expiry-year',date('Y'),date('Y')+10,null, [
'class' => 'form-control card-expiry-year',
'data-stripe' => 'exp_year'
] ) !!}</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{!! Form::label('card-expiry-year', 'CVC Number') !!}
<input required="required" name="card-cvc" placeholder="***" class="form-control card-cvc" data-stripe="cvc">
</div>
</div>
</div>
</div>
</div>
@endif
@endif

View File

@ -89,7 +89,17 @@
<tr class="checkout">
<td colspan="3">
@if(!$is_free_event)
<img class="hidden-xs pull-left" src="{{asset('assets/images/public/EventPage/credit-card-logos.png')}}" />
<div class="hidden-xs pull-left">
<img class="" src="{{asset('assets/images/public/EventPage/credit-card-logos.png')}}" />
@if($event->enable_offline_payments)
<div class="help-block" style="font-size: 11px;">
Offline Payment Methods Available
</div>
@endif
</div>
@endif
{!!Form::submit('Register', ['class' => 'btn btn-lg btn-primary pull-right'])!!}
</td>