Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/mcoil.corals.io/resources/views/front/quote/ |
@extends('layouts.front.app')
@section('css')
<style>
.card_payment_type{
display:none;
}
</style>
@endsection
@section('content')
@include('layouts.front.product-menu')
<section class="container content">
<div class="row">
<div class="col-md-12">
<ul class="stepper stepper-horizontal">
<li class="circle">
<a href="#!">
<span class="circle"><i class="fa fa-check"></i></span>
<span class="label">Delivery</span>
</a>
</li>
<li class="active">
<a href="#!">
<span class="circle">2</span>
<span class="label">Payment</span>
</a>
</li>
<li class="circle">
<a href="#!">
<span class="circle">3</span>
<span class="label">Confirmation</span>
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="container content">
<div class="row">
<form id="frmStripePayment" action="{{ route('checkout.payment.submit') }}" method="post">
<input type='hidden' name='currency_code' value='EUR'>
{{csrf_field()}}
<div class="col-md-8">
<div class="logincontainer">
<div class="header-lined">
<div id="errorDiv" style="display:none;">
<p class="alert alert-error alert-dismissible" id="errorMessage">
Error
</p>
</div>
<h2>Payment Method</h2>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<select name="payment_option" id="payment_option" class="form-control input-lg btn-margin-top payment_option">
<!--<option>Select Payemnt Method</option>-->
<!--<option value="Cash">Cash</option>-->
<!--<option value="Cheque">Cheque</option>-->
<!--<option value="Credit Account">Credit Account</option>-->
<!--<option value="Credit Card">Credit Card</option>-->
<option value="{{$customer_data->payment_option}}" selected>{{$customer_data->payment_option}}</option>
</select>
</div>
</div>
</div>
</div>
<div id="cardpayment" class="card_payment_type">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Card Holder Name <span class="text-danger">*</span></label>
<input type="text" id="name" name="name" class="form-control input-lg" data-card-details="cardholder-name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Email Address <span class="text-danger">*</span></label>
<input type="text" id="email" name="email" class="form-control input-lg" readonly value="{{ $customer_data->email }}" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="card-number">Card Number <span class="text-danger">*</span></label>
<input type="text" id="card-number" name="card-number" class="form-control input-lg" data-card-details="card-number" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="month">Expiry Month / Year <span class="text-danger">*</span></label>
<div class="row">
<div class="col-md-6">
<select name="month" id="month" class="form-control input-lg">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-md-6">
<select name="year" id="year" class="form-control input-lg">
<option value="20">2020</option>
<option value="21">2021</option>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
<option value="25">2025</option>
<option value="26">2026</option>
<option value="27">2027</option>
<option value="28">2028</option>
<option value="29">2029</option>
<option value="30">2030</option>
<option value="31">2031</option>
<option value="32">2032</option>
<option value="33">2033</option>
<option value="34">2034</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="cvc">CVC <span class="text-danger">*</span></label>
<input type="text" name="cvc" id="cvc" class="form-control input-lg cvv-input" data-card-details="security-code">
<input type="hidden" name="card-identifier">
<input type="hidden" name="merchent_key" value="<?php echo $merchantSessionKey; ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img class="img-fluid m-1" src="{{ URL::asset('/images/opayo.png') }}" alt="Opayo Secure Payment" />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="logincontainer">
<div class="header-lined">
<h2>Order Summary</h2>
</div>
<div class="row">
<div class="col-md-6">
<span>Oil Type</span>
</div>
<div class="col-md-6 pull-right">
<strong><span>{{ $product_session_data->name }}</span></strong>
</div>
</div>
<div class="row">
<div class="col-md-6">
<span>Liters</span>
</div>
<div class="col-md-6 pull-right">
<strong><span>@if($quantity == 0){{'Fill the Tank'}}@else{{ $quantity }}@endif</span></strong>
</div>
</div>
<div class="row">
<div class="col-md-6">
<span>Subtotal</span>
</div>
<div class="col-md-6 pull-right">
<strong><span>{{ config('cart.currency_symbol') }}{{ $initial_quote_price }}</span></strong>
</div>
</div>
<div class="row">
<div class="col-md-6">
<span>Vat {{ '@' . floatval($vat_percentage) . '%' }}</span>
</div>
<div class="col-md-6 pull-right">
<strong><span>{{ config('cart.currency_symbol') }}{{ number_format($vat_value, 2) }}</span></strong>
</div>
</div>
@if( $applied_discount_code != '' && $applied_discount_amount != '' )
<div class="row">
<div class="col-md-6">
<span>Discount</span>
</div>
<div class="col-md-6 pull-right">
<strong><span>{{ config('cart.currency_symbol') }}{{ number_format($applied_discount_amount, 2) }}</span></strong>
</div>
</div>
@endif
<hr>
<div class="row">
<div class="col-md-6">
<span>Order Total</span>
</div>
<div class="col-md-6 pull-right">
<h2><span>{{ config('cart.currency_symbol') }}{{ number_format($order_total, 2) }}</span></h2>
</div>
</div>
<div class="row">
@csrf
<div class="col-md-6"></div>
<div class="col-md-6">
@if($customer_data->payment_option == 'Credit Card')
<input type="submit" name="pay_now" value="Pay Now" id="submit-btn card_pay_Now" class="btn btn-lg btn-block btn-send" onClick="stripePay(event);" id="card_pay_Now" />
<input type="submit" name="pay_now" value="Pay Now" id="submit-btn other_pay_now" class="btn btn-lg btn-block btn-send" style="display: none;"/>
@else
<input type="submit" name="pay_now" value="Pay Now" id="submit-btn card_pay_Now" class="btn btn-lg btn-block btn-send" onClick="stripePay(event);" id="card_pay_Now" style="display: none;"/>
<input type="submit" name="pay_now" value="Pay Now" id="submit-btn other_pay_now" class="btn btn-lg btn-block btn-send" />
@endif
<div id="loader" style="display: none;"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i></div>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
@include('layouts.front.call-to-action-footer')
@endsection
@section('js')
<script src="{{ config('constants.evalon_url') }}/api/v1/js/sagepay.js"></script>
<script type="text/javascript">
function cardValidation () {
var valid = true;
var name = $('#name').val();
var cardNumber = $('#card-number').val();
var month = $('#month').val();
var year = $('#year').val();
var cvc = $('#cvc').val();
$("#error-message").html("").hide();
if (name.trim() == "") {
valid = false;
}
if (cardNumber.trim() == "") {
valid = false;
}
if (month.trim() == "") {
valid = false;
}
if (year.trim() == "") {
valid = false;
}
if (cvc.trim() == "") {
valid = false;
}
if (valid == false) {
$("#error-message").html("All Fields are required").show();
}
return valid;
}
function stripePay(e) {
e.preventDefault();
var valid = cardValidation();
if (valid == true) {
var month = $('#month').val();
var year = $('#year').val();
$("#submit-btn").hide();
$( "#loader" ).css("display", "inline-block");
sagepayOwnForm({
merchantSessionKey: "<?php echo $merchantSessionKey; ?>" })
.tokeniseCardDetails({
cardDetails: {
cardholderName: document.querySelector('[data-card-details="cardholder-name"]').value,
cardNumber: document.querySelector('[data-card-details="card-number"]').value,
expiryDate: month.trim()+year.trim(),
securityCode: document.querySelector('[data-card-details="security-code"]').value },
onTokenised : function(result) {
if (result.success) {
document.querySelector('[name="card-identifier"]').value = result.cardIdentifier;
document.getElementById('frmStripePayment').submit();
}
else {
var x = document.getElementById('errorDiv');
x.style.display = "block";
document.getElementById("loader").style.display = "none";
document.getElementById("errorMessage").innerHTML = result.errors[0].message;
}
}
});
return false;
} else {
alert("Invalid Entries"); return false;
}
}
$(document).ready(function () {
var customer_payment_option = "{{$customer_data->payment_option}}";
if(customer_payment_option == 'Credit Card'){
$('.card_payment_type').css("display", "block");
$('#other_pay_now').css("display","none");
$('#card_pay_now').css("display","block");
}else{
$('.card_payment_type').css("display", "none");
$('#other_pay_now').css("display","none");
$('#card_pay_now').css("display","none");
}
$(document).on('change','.payment_option',function(){
let payment_option = $(this).val();
if(payment_option == 'Credit Card'){
$('.card_payment_type').css("display", "block");
$('#other_pay_now').css("display","none");
$('#card_pay_now').css("display","block");
}else{
$('.card_payment_type').css("display", "none");
$('#other_pay_now').css("display","none");
$('#card_pay_now').css("display","none");
}
return false;
});
});
</script>
@endsection