710 lines
21 KiB
PHP
710 lines
21 KiB
PHP
<!DOCTYPE html>
|
|
|
|
<?php
|
|
|
|
require 'vendor/autoload.php';
|
|
|
|
include 'app/Libraries/LocationInfo.php';
|
|
|
|
|
|
|
|
use Square\Environment;
|
|
|
|
use Ramsey\Uuid\Uuid;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Pulled from the .env file and upper cased e.g. SANDBOX, PRODUCTION.
|
|
|
|
$upper_case_environment = strtoupper(getenv('ENVIRONMENT'));
|
|
|
|
$web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https://web.squarecdn.com/v1/square.js" : "https://sandbox.web.squarecdn.com/v1/square.js";
|
|
|
|
|
|
|
|
|
|
|
|
?>
|
|
|
|
<html lang="en-US">
|
|
|
|
<head>
|
|
|
|
<script type="text/javascript" src="<?php echo $web_payment_sdk_url ?>"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
window.applicationId =
|
|
|
|
"<?php
|
|
|
|
echo getenv('SQUARE_APPLICATION_ID');
|
|
|
|
?>";
|
|
|
|
window.locationId =
|
|
|
|
"<?php
|
|
|
|
echo getenv('SQUARE_LOCATION_ID');
|
|
|
|
?>";
|
|
|
|
window.currency =
|
|
|
|
"<?php
|
|
|
|
echo $location_info->getCurrency();
|
|
|
|
?>";
|
|
|
|
window.country =
|
|
|
|
"<?php
|
|
|
|
echo $location_info->getCountry();
|
|
|
|
?>";
|
|
|
|
window.idempotencyKey =
|
|
|
|
"<?php
|
|
|
|
echo Uuid::uuid4();
|
|
|
|
?>";
|
|
|
|
</script>
|
|
|
|
<!-- <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>public/square-stylesheets/style.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>public/square-stylesheets/sq-payment.css"> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Checkout - Golf Evolution</title>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<?php include 'member_layout/analyticscode.php' ?>
|
|
|
|
<link rel="icon" href="<?= base_url()."/public"; ?>/assets/member_images/favicon.png" sizes="192x192" />
|
|
|
|
<link rel="apple-touch-icon" href="<?= base_url()."/public"; ?>/assets/member_images/favicon.png" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="<?= base_url()."/public"; ?>/assets/member_css/front-style.css">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
|
|
|
<script src="<?= base_url()."/public"; ?>/assets/member_js/ajax.js"></script>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
|
|
|
|
<input id="url" value="<?= base_url() ?>" type="hidden">
|
|
|
|
|
|
|
|
<style typr="text/css">
|
|
|
|
/* Styles for the loading spinner */
|
|
|
|
.loading-spinner-overlay {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
z-index: 9999;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.loading-spinner {
|
|
|
|
border: 8px solid #f3f3f3;
|
|
|
|
border-top: 8px solid #3498db;
|
|
|
|
border-radius: 50%;
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
animation: spin 1s linear infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
0% {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
transform: rotate(360deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="checkout">
|
|
|
|
|
|
|
|
<?php include 'member_layout/header.php' ?>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="pt-5 pb-3">
|
|
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-12">
|
|
|
|
<h1 class="heading-border">Check Out</h1>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row back-card">
|
|
|
|
<div class="col-lg-12">
|
|
|
|
<a href="<?=base_url()."view_cart/".md5(session()->get('logged_user')); ?>"><i class="arrow-left"></i> Back to Cart</a>
|
|
|
|
<!-- <h4>Billing Address</h4> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section class="checkout-inner mt-3">
|
|
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-xl-8">
|
|
<div class="address-form mb-5" >
|
|
|
|
<form id="member_address" >
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-12 d-flex align-items-center mb-3">
|
|
|
|
</div>
|
|
|
|
<!-- <input type="hidden" value="<?= $userdata[0]['id']; ?>" name="id" > -->
|
|
|
|
<div class="col-lg-6 mb-3">
|
|
|
|
<label for="first_name">First Name<span class="text-danger">*</span></label>
|
|
|
|
<input type="text" value="<?= $userdata[0]['name']; ?>" name="name" id="first_name" required>
|
|
<span id="first_name_span_message"> </span>
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-3">
|
|
|
|
<label for="last_name">Last Name<span class="text-danger">*</span></label>
|
|
|
|
<input type="text" value="<?= $userdata[0]['last_name']; ?>" name="last_name" id="last_name" required>
|
|
<span id="last_name_span_message"> </span>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-lg-12 mb-3">
|
|
|
|
<label for="address">Street Address<span class="text-danger">*</span></label>
|
|
|
|
<input type="text" value="<?= $userdata[0]['address']; ?>" name="address" id="address" required>
|
|
<span id="address_span_message"> </span>
|
|
</div>
|
|
|
|
<div class="col-lg-4 mb-3">
|
|
|
|
<label for="state">Province<span class="text-danger">*</span></label>
|
|
<input type="hidden" id="state_value" value="<?= $userdata[0]['state']; ?>" >
|
|
<input type="text" name="state" id="state" value="<?= $userdata[0]['state']; ?>" required>
|
|
<select name="canada_state" id="state2" required>
|
|
</select>
|
|
<span id="state_span_message"> </span> <span id="state2_span_message"> </span>
|
|
</div>
|
|
|
|
<div class="col-lg-4 mb-3">
|
|
|
|
<label for="city">City<span class="text-danger">*</span></label>
|
|
|
|
<input type="text" value="<?= $userdata[0]['city']; ?>" name="city" id="city" required>
|
|
<span id="city_span_message"> </span>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
|
|
<label for="country">Country<span class="text-danger">*</span></label>
|
|
|
|
<select name="country" id="country" class="js-example-basic-single" required>
|
|
|
|
<?php if ($userdata[0]['country'] == "") { ?>
|
|
<option value="Canada"> Canada </option>
|
|
<?php }
|
|
else { ?>
|
|
<option value="<?= $userdata[0]['country']?>"> <?= $userdata[0]['country']?> </option>
|
|
<?php }?>
|
|
<?php foreach ($country as $key => $value) { ?>
|
|
<option value="<?= $value['name']?>"> <?= $value['name']?> </option>
|
|
<?php } ?>
|
|
</select>
|
|
<span id="country_span_message"> </span>
|
|
</div>
|
|
|
|
<div class="col-lg-4 mb-3">
|
|
|
|
<label for="zipcode">Postal Code<span class="text-danger">*</span></label>
|
|
|
|
<input type="text" name="pincode" id="pincode" value="<?= $userdata[0]['pincode']; ?>" required>
|
|
<span id="pincode_span_message"> </span>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- <div class="row form-button">
|
|
|
|
<div class="col-lg-2 col-4">
|
|
|
|
<button>Cancel</button>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-4">
|
|
|
|
<input type="button" class="submit" value="Save">
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-7 col-4"></div>
|
|
|
|
</div> -->
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Loading spinner HTML markup -->
|
|
|
|
<div class="loading-spinner-overlay" id="loading-spinner-overlay">
|
|
|
|
<div class="loading-spinner"></div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-xl-4 order-summary-main mb-5">
|
|
|
|
<div class="order-summary">
|
|
|
|
<div class="row order1">
|
|
|
|
<div class="col-lg-12 col-12">
|
|
|
|
<h4>Order Summary</h4>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?php foreach ($packageArray as $row) { ?>
|
|
|
|
<div class="row evo">
|
|
|
|
<div class="col-lg-8 col-8"><div class="product-name"><?php echo $row['package_name']." ($".number_format($row['cost'], 2, '.', '')." x ".$row['count'].")"; ?></div></div>
|
|
|
|
<div class="col-lg-4 col-4 text-end"><div class="product-price"><span class="price-symbol">$</span><?php $number = $row['cost'] * $row['count'];echo number_format($number, 2, '.', ''); ?></div></div>
|
|
|
|
</div>
|
|
|
|
<?php } ?>
|
|
|
|
<div class="row item1">
|
|
|
|
<div class="col-lg-6 col-6"><p>Items (<?= $item_count; ?>) : </p></div>
|
|
|
|
<div class="col-lg-6 col-6 text-end"><p><span class="price-symbol">$</span><?php echo number_format($amount, 2, '.', ''); ?></p></div>
|
|
|
|
</div>
|
|
<?php if($pst != 0){ ?>
|
|
<div class="row item2">
|
|
|
|
<div class="col-lg-6 col-6"><p>PST : </p></div>
|
|
|
|
<div class="col-lg-6 col-6 text-end"><p><span class="price-symbol">$</span><?php $number = $amount * $pst / 100; echo number_format($number, 2, '.', '');?></p></div>
|
|
|
|
</div>
|
|
<?php } ?>
|
|
<div class="row item3">
|
|
|
|
<div class="col-lg-6 col-6"><p>GST : </p></div>
|
|
|
|
<div class="col-lg-6 col-6 text-end"><p><span class="price-symbol">$</span><?php $number = $amount * $gst / 100 ; echo number_format($number, 2, '.', '');?></p></div>
|
|
|
|
</div>
|
|
|
|
<div class="row order2">
|
|
|
|
<div class="col-lg-6 col-6"><h5>Order Total : </h5></div>
|
|
|
|
<div class="col-lg-6 col-6 text-end"><div class="product-total"><span class="price-symbol">$</span><?php $number =$amount + (($amount * ($gst + $pst) ) / 100); echo number_format($number, 2, '.', '');?></div></div>
|
|
|
|
</div>
|
|
|
|
<div class="row order-button">
|
|
|
|
<div class="col-lg-12">
|
|
|
|
<!-- <p>By placing your order, you agree to our company privacy policy and condition of use.</p> -->
|
|
|
|
<!-- <button id="card-button" type="button">Proceed to Pay</button> -->
|
|
|
|
<!-- <input id="card-button" type="submit" value="Proceed to Pay"> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-xl-8">
|
|
<div class="address-form remember-section mb-5">
|
|
<label class="rember-label" for="rememberMe">By placing your order, you agree to our company privacy policy and <a href="https://<?php echo $_SERVER['SERVER_NAME']; ?>/terms-conditions/" target="_blank">condition of use</a>.
|
|
<input type="checkbox" id="rememberMe">
|
|
<span class="checkmark"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="payment-title col-xl-8">Payment Method</h4>
|
|
|
|
<div class="wrapper col-xl-8 mb-4">
|
|
|
|
<div class="credit-card">
|
|
|
|
<form class="payment-form" id="fast-checkout">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-12 ">
|
|
|
|
<!-- Add Payment Method Code-->
|
|
|
|
<input type="hidden" value="<?= $amount; ?>" name="amount" id="amount">
|
|
|
|
<input type="hidden" value="<?= $order_id; ?>" name="order_id" id="order_id">
|
|
|
|
<input type="hidden" value="<?= htmlspecialchars($EncodedArray); ?>" name="EncodedArray" id="EncodedArray">
|
|
|
|
<input type="hidden" value="" name="address_id" id="address_id">
|
|
|
|
<div id="card-container"></div>
|
|
|
|
<span id="payment-flow-message"></span>
|
|
|
|
<div class="text-end" style="margin-top:-45px;" id="payment-button"> <button id="card-button" type="button">Proceed to Pay</button></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <div class="google-pay">
|
|
|
|
<div class="row google-pay-content align-items-center">
|
|
|
|
<div class="col-lg-10 d-flex align-items-center">
|
|
|
|
<span>Google Pay</span>
|
|
|
|
</div>
|
|
|
|
<div id="google-pay-button" alt="google-pay" type="button"></div>
|
|
|
|
<div class="col-lg-2 text-end">
|
|
|
|
<img src="<?= base_url()."/public"; ?>/assets/member_images/g-pay.png" alt="" width="64" height="58"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<?php include 'member_layout/footer.php' ?>
|
|
|
|
<!-- <script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-ach.js"></script>
|
|
|
|
<script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-apple-pay.js"></script>
|
|
|
|
<script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-google-pay.js"></script> -->
|
|
|
|
<script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-card-pay.js"></script>
|
|
|
|
<script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-payment-flow.js"></script>
|
|
|
|
<!-- <script>
|
|
$(document).ready(function() {
|
|
$("#card-button").removeAttr('disabled');
|
|
$('.js-example-basic-single').select2();
|
|
$("#fast-checkout").css('display','none');
|
|
$(".payment-title").css('display','none');
|
|
});
|
|
|
|
$('#card-button').click(function() {
|
|
// $('#card-button').prop("disabled", true);
|
|
// $('#loading-spinner-overlay').css('visibility', 'visible');
|
|
$('#card-button').prop("disabled", true);
|
|
$('#loading-spinner-overlay').css('visibility', 'visible');
|
|
});
|
|
|
|
|
|
$('#rememberMe').click(function() {
|
|
if ($(this).is(':checked')) {
|
|
ValidateForm();
|
|
}else {
|
|
$("#fast-checkout").css('display','none');
|
|
$(".payment-title").css('display','none');
|
|
}
|
|
|
|
});
|
|
|
|
function ValidateForm() {
|
|
var formInvalid = false;
|
|
$('#member_address input').each(function() {
|
|
if ($(this).val() === '') {
|
|
var id = $(this).attr('id');
|
|
var input_id = id+'_span_message';
|
|
|
|
$('#'+input_id+'').html('input required').css('color','red');
|
|
formInvalid = true;
|
|
}
|
|
});
|
|
|
|
if (formInvalid)
|
|
{ $('#rememberMe').prop('checked', false);}
|
|
else{ $("#fast-checkout").css('display','block'); $(".payment-title").css('display','block');}
|
|
|
|
}
|
|
|
|
$('#first_name').keyup(function() {$('#first_name_span_message').html(''); if($('#first_name').val().length == 0){uncheck() }});
|
|
$('#last_name').keyup(function() {$('#last_name_span_message').html(''); if($('#last_name').val().length == 0){uncheck() }});
|
|
$('#address').keyup(function() {$('#address_span_message').html(''); if($('#address').val().length == 0){uncheck() } });
|
|
$('#state').keyup(function() {$('#state_span_message').html(''); if($('#state').val().length == 0){uncheck() }});
|
|
$('#city').keyup(function() { $('#city_span_message').html('');if($('#city').val().length == 0){uncheck() }});
|
|
$('#country').keyup(function() {$('#country_span_message').html(''); if($('#country').val().length == 0){uncheck() }});
|
|
$('#pincode').keyup(function() {$('#pincode_span_message').html(''); if($('#pincode').val().length == 0){uncheck() }});
|
|
|
|
function uncheck(){ $('#rememberMe').prop('checked', false); $(".payment-title").css('display','none'); $("#fast-checkout").css('display','none'); }
|
|
</script> -->
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
$('#card-button').prop("disabled", true);
|
|
$('#card-button').css("background-color", "gray");
|
|
$('.js-example-basic-single').select2();
|
|
var state_value = $('#state_value').val();
|
|
if(state_value == ''){ $('#state_value').val('Enter Province'); }
|
|
var country = $("#country").val();
|
|
if(country == 'Canada')
|
|
{
|
|
$('#state').attr('required', false);
|
|
$('#state').val($('#state_value').val());
|
|
$('#state2').attr('required', true);
|
|
$('#state_span_message').hide();
|
|
} else{
|
|
$('#state2').attr('required', false);
|
|
$('#state').attr('required', true);
|
|
$('#state2_span_message').hide();
|
|
}
|
|
});
|
|
|
|
$('#country').change(function() {
|
|
var country = $("#country").val();
|
|
$('#rememberMe').prop('checked', false);
|
|
if(country == 'Canada')
|
|
{
|
|
$('#state').attr('required', false);
|
|
$('#state').val($('#state_value').val());
|
|
$('#state2').attr('required', true);
|
|
$('#state_span_message').hide();
|
|
$('#state2_span_message').show();
|
|
} else{
|
|
$('#state2').attr('required', false);
|
|
$('#state2').val($('#state_value').val());
|
|
$('#state').attr('required', true);
|
|
$('#state').val('');
|
|
$('#state2_span_message').hide();
|
|
$('#state_span_message').show();
|
|
}
|
|
});
|
|
|
|
$('#card-button').click(function() {
|
|
// $('#card-button').prop("disabled", true);
|
|
// $('#loading-spinner-overlay').css('visibility', 'visible');
|
|
|
|
});
|
|
|
|
|
|
$('#rememberMe').click(function() {
|
|
if ($(this).is(':checked')) {
|
|
ValidateForm();
|
|
}else {
|
|
$('#card-button').prop("disabled", true);
|
|
$('#card-button').css("background-color", "gray");
|
|
}
|
|
|
|
});
|
|
|
|
function ValidateForm() {
|
|
var formInvalid = false;
|
|
$('#member_address input,select').each(function() {
|
|
// alert($(this).val());
|
|
if ($(this).val() === '') {
|
|
var id = $(this).attr('id');
|
|
var input_id = id+'_span_message';
|
|
$('#'+input_id+'').html('input required').css('color','red');
|
|
formInvalid = true;
|
|
}
|
|
});
|
|
|
|
if (formInvalid)
|
|
{
|
|
$('#rememberMe').prop('checked', false);
|
|
$(window).scrollTop($('#member_address').offset().top);
|
|
} else {
|
|
$("#card-button").removeAttr('disabled');
|
|
$('#card-button').css("background-color", "#00B4D5");
|
|
}
|
|
|
|
}
|
|
|
|
$('#first_name').keyup(function() {$('#first_name_span_message').html(''); if($('#first_name').val().length == 0){uncheck() }});
|
|
$('#last_name').keyup(function() {$('#last_name_span_message').html(''); if($('#last_name').val().length == 0){uncheck() }});
|
|
$('#address').keyup(function() {$('#address_span_message').html(''); if($('#address').val().length == 0){uncheck() } });
|
|
$('#state').keyup(function() {$('#state_span_message').html(''); if($('#state').val().length == 0){uncheck() }});
|
|
$('#state2').change(function() {$('#state2_span_message').html(''); if($('#state2').val().length == 0){uncheck() }});
|
|
$('#city').keyup(function() { $('#city_span_message').html('');if($('#city').val().length == 0){uncheck() }});
|
|
$('#country').keyup(function() {$('#country_span_message').html(''); if($('#country').val().length == 0){uncheck() }});
|
|
$('#pincode').keyup(function() {$('#pincode_span_message').html(''); if($('#pincode').val().length == 0){uncheck() }});
|
|
|
|
|
|
function uncheck(){ $('#rememberMe').prop('checked', false); $('#card-button').prop("disabled", true); $('#card-button').css("background-color", "gray"); }
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|