Viewing file:  index.blade.php (23.17 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.dashboard')
@section('title',trans('layout.payment_title'))
@section('css')
<style>
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
@endsection
@section('main-content')
<div class="row">
<div class="col-lg-12">
<div class="card">
<form action="{{route('payment.process')}}" method="post" id="payment-form">
@csrf
<input type="hidden" name="plan" value="{{$plan->id}}">
<div class="card-body">
<div class="row">
@if($plan->cost>0)
<div class="col-xl-7">
<div class="card">
<div class="card-header d-block">
<h4 class="card-title">{{trans('layout.payment_method')}}</h4>
</div>
<div class="card-body">
<!-- Default accordion -->
<div id="accordion-one" class="accordion accordion-primary">
@php $paymentSetting= json_decode(get_settings('payment_gateway')) @endphp
@if(isset($paymentSetting->paypal_status) && $paymentSetting->paypal_status=='active')
<div class="accordion__item">
<div class="accordion__header rounded-lg collapsed"
data-toggle="collapse"
data-target="#default_collapseOne" aria-expanded="false">
<div class="d-none">
<input value="paypal" name="payment_type" type="radio"
id="paypalRadio">
</div>
<span
class="accordion__header--text">{{trans('layout.paypal')}}</span>
</div>
<div id="default_collapseOne" class="accordion__body collapse"
data-parent="#accordion-one"
style="">
<div class="accordion__body--text">
{{trans('layout.paypal_des')}}
</div>
</div>
</div>
@endif
@if(isset($paymentSetting->stripe_status) && $paymentSetting->stripe_status=='active')
<div class="accordion__item">
<div class="accordion__header collapsed rounded-lg"
data-toggle="collapse"
data-target="#default_collapseTwo">
<div class="d-none">
<input value="card" name="payment_type" type="radio"
id="cardRadio">
</div>
<span
class="accordion__header--text">{{trans('layout.credit_or_debit')}}</span>
</div>
<div id="default_collapseTwo" class="collapse accordion__body"
data-parent="#accordion-one">
<div class="accordion__body--text">
<div id="card-element"
class="border-1-gray p-3 border-radius-1"></div>
<div id="card-errors" role="alert"></div>
</div>
</div>
</div>
@endif
@if(isset($paymentSetting->paytm_status) && $paymentSetting->paytm_status=='active')
<div class="accordion__item">
<div class="accordion__header rounded-lg collapsed"
data-toggle="collapse"
data-target="#paytmSection" aria-expanded="false">
<div class="d-none">
<input value="paytm" name="payment_type" type="radio"
id="paytmRadio">
</div>
<span
class="accordion__header--text">{{trans('layout.paytm')}}</span>
</div>
<div id="paytmSection" class="accordion__body collapse"
data-parent="#accordion-one"
style="">
<div class="accordion__body--text">
{{trans('layout.pay_with_paytm')}}
</div>
</div>
</div>
@endif
@if(isset($paymentSetting->mollie_status) && $paymentSetting->mollie_status=='active')
<div class="accordion__item">
<div class="accordion__header rounded-lg collapsed"
data-toggle="collapse"
data-target="#mollie_collapseOne" aria-expanded="false">
<div class="d-none">
<input value="mollie" name="payment_type" type="radio"
id="mollieRadio">
</div>
<span
class="accordion__header--text">{{trans('layout.mollie')}}</span>
</div>
<div id="mollie_collapseOne" class="accordion__body collapse"
data-parent="#accordion-one"
style="">
<div class="accordion__body--text">
{{trans('layout.pay_with_mollie')}}
</div>
</div>
</div>
@endif
@if(isset($paymentSetting->paystack_status) && $paymentSetting->paystack_status=='active')
<div class="accordion__item">
<div class="accordion__header rounded-lg collapsed"
data-toggle="collapse"
data-target="#paystack_collapseOne" aria-expanded="false">
<div class="d-none">
<input value="paystack" name="payment_type" type="radio"
id="paystackRadio">
</div>
<span
class="accordion__header--text">{{trans('layout.paystack')}}</span>
</div>
<div id="paystack_collapseOne" class="accordion__body collapse"
data-parent="#accordion-one"
style="">
<div class="accordion__body--text">
{{trans('layout.pay_with_paystack')}}
</div>
</div>
</div>
@endif
@if(isset($paymentSetting->offline_status) && $paymentSetting->offline_status=='active')
<div class="accordion__item">
<div class="accordion__header collapsed rounded-lg"
data-toggle="collapse"
data-target="#default_collapseOffline">
<div class="d-none">
<input value="offline" name="payment_type" type="radio"
id="offlineRadio">
</div>
<span
class="accordion__header--text">{{trans('layout.offline')}}</span>
</div>
<div id="default_collapseOffline"
class="collapse accordion__body"
data-parent="#accordion-one">
<div class="accordion__body--text">
<div class="row">
<div class="col-12">
{!! clean($paymentSetting->instructions) !!}
</div>
<div class="col-12">
<div class="form-group">
<label
for="reference">{{trans('Reference')}}*</label>
<input required type="text" name="reference"
class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
@endif
<div class="col-xl-5">
<div class="card-header">
<h4 class="card-title">Plan summary</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<ul>
<li><strong>{{trans('layout.pay_plan_title')}}</strong></li>
<li><strong>{{trans('layout.start_date')}}</strong></li>
<li><strong>{{trans('layout.expiry_date')}}</strong></li>
</ul>
</div>
<div class="col-sm-6">
<ul>
<li>{{$plan->title}}</li>
<li>{{formatDate(now())}}</li>
@if($plan->recurring_type=='onetime')
<li>{{trans('layout.lifetime')}}</li>
@elseif($plan->recurring_type=='weekly')
<li>{{formatDate(now()->addWeek())}}</li>
@elseif($plan->recurring_type=='monthly')
<li>{{formatDate(now()->addMonth())}}</li>
@elseif($plan->recurring_type=='yearly')
<li>{{formatDate(now()->addYear())}}</li>
@endif
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6">
<ul>
<li><strong>{{trans('layout.total_cost')}}</strong></li>
</ul>
</div>
<div class="col-sm-6">
<ul>
<li>{{formatNumberWithCurrSymbol($plan->cost)}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-right">
@if($plan->cost>0)
<button disabled type="submit" id="paynow"
class="btn btn-sm btn-primary">{{trans('layout.pay_now')}}</button>
@else
<button type="submit" id="paynow"
class="btn btn-sm btn-primary">{{trans('layout.upgrade')}}</button>
@endif
</div>
</form>
</div>
</div>
</div>
@endsection
@section('js')
@if(isset($paymentSetting->stripe_status) && $paymentSetting->stripe_status=='active')
<script src="https://js.stripe.com/v3/"></script>
<script !src="">
"use strict";
// Create a Stripe client.
var stripe = Stripe('{{get_stripe_publish_key()}}');
let clientSecret = '{{isset($clientSecret)?$clientSecret:''}}';
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.on('change', function (event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
var cardRadio = document.getElementById('cardRadio');
if (cardRadio.checked) {
stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card
}
})
.then(function (result) {
var displayError = document.getElementById('card-errors');
if (result.error) {
// Show error to your customer
displayError.textContent = result.error.message;
} else {
// The payment succeeded!
stripeTokenHandler(result.paymentIntent.id);
}
});
} else {
form.submit();
}
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
@endif
<script>
function checkRadioButton() {
let isOneChecked = false;
let testimonialElements = $('[name="payment_type"]');
for (let i = 0; i < testimonialElements.length; i++) {
let element = testimonialElements.eq(i);
if (element.is(':checked')) {
isOneChecked = true;
break;
}
}
if (isOneChecked)
$('#paynow').removeAttr('disabled');
else
$('#paynow').attr('disabled', 'true');
if ($('[name=payment_type]:checked').val() == 'offline') {
$('#default_collapseOffline input').each(function (index, value) {
$(value).attr('required', 'true');
})
} else {
$('#default_collapseOffline input').each(function (index, value) {
$(value).removeAttr('required');
})
}
$('[name=reference]').removeAttr('required');
}
$('#default_collapseTwo,#default_collapseOne,#default_collapseOffline,#paytmSection,#mollie_collapseOne,#paystack_collapseOne').on('show.bs.collapse', function (e) {
$('[name="payment_type"]').removeAttr('checked');
let type = $(this).parent().find('[name="payment_type"]');
type.attr('checked', 'true');
type.trigger('change');
checkRadioButton();
});
$('#default_collapseTwo,#default_collapseOne,#default_collapseOffline,#paytmSection,#mollie_collapseOne,#paystack_collapseOne').on('hide.bs.collapse', function (e) {
// $('[name="payment_type"]').removeAttr('checked');
let type = $(this).parent().find('[name="payment_type"]');
type.removeAttr('checked');
type.trigger('change');
checkRadioButton();
});
</script>
@endsection
|