351 lines
17 KiB
PHP
351 lines
17 KiB
PHP
<!-- Main content -->
|
|
<?php include('common/userstrip.php'); ?>
|
|
|
|
<!--begin::Row-->
|
|
<div class="row g-5 g-xl-8">
|
|
<!--begin::Col-->
|
|
<div class="col-xl-6">
|
|
<!--begin::Tables Widget 3-->
|
|
<div class="card card-xl-stretch mb-xl-8">
|
|
|
|
|
|
|
|
|
|
|
|
<!--begin::Header-->
|
|
<div class="card-header border-0 pt-5">
|
|
<h3 class="card-title align-items-start flex-column">
|
|
<span class="card-label fw-bolder fs-3 mb-1">Payment Methods</span>
|
|
</h3>
|
|
<div class="card-toolbar">
|
|
Credit / Debit Card
|
|
</div>
|
|
</div>
|
|
<!--end::Header-->
|
|
<!--begin::Body-->
|
|
<div class="card-body py-3">
|
|
<!--begin::Table container-->
|
|
<form method="POST" action="/paymnt/newcc">
|
|
|
|
|
|
<div class="row mb-10">
|
|
<!--begin::Col-->
|
|
<div class="col-md-8 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="required fs-6 fw-bold form-label mb-2">Amount($)</label>
|
|
<!--end::Label-->
|
|
<!--begin::Row-->
|
|
<div class="row fv-row">
|
|
<!--begin::Col-->
|
|
<div class="col-6">
|
|
<input type="text" class="form-control form-control-solid" placeholder="" name="amount" value="" />
|
|
</div>
|
|
<!--end::Col-->
|
|
<!--begin::Col-->
|
|
<div class="col-6">
|
|
|
|
</div>
|
|
<!--end::Col-->
|
|
</div>
|
|
<!--end::Row-->
|
|
</div>
|
|
<!--end::Col-->
|
|
<!--begin::Col-->
|
|
<div class="col-md-4 fv-row">
|
|
|
|
|
|
</div>
|
|
<!--end::Col-->
|
|
</div>
|
|
|
|
|
|
<!--begin::Input group-->
|
|
<div class="d-flex flex-column mb-7 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
|
|
<span class="required">Name On Card</span>
|
|
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a card holder's name"></i>
|
|
</label>
|
|
|
|
<!--end::Label-->
|
|
<input type="text" class="form-control form-control-solid" placeholder="" name="description" value="<?=$_SESSION['firstname']?> <?=$_SESSION['lastname']?>" />
|
|
</div>
|
|
<!--end::Input group-->
|
|
<!--begin::Input group-->
|
|
<div class="d-flex flex-column mb-7 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="required fs-6 fw-bold form-label mb-2">Card Number</label>
|
|
<!--end::Label-->
|
|
<!--begin::Input wrapper-->
|
|
<div class="position-relative">
|
|
<!--begin::Input-->
|
|
<input type="text" class="form-control form-control-solid" placeholder="Enter card number" name="cardnumber" value="" />
|
|
<!--end::Input-->
|
|
<!--begin::Card logos-->
|
|
<div class="position-absolute translate-middle-y top-50 end-0 me-5">
|
|
<img src="/site3/assets/media/svg/card-logos/visa.svg" alt="" class="h-25px" />
|
|
<img src="/site3/assets/media/svg/card-logos/mastercard.svg" alt="" class="h-25px" />
|
|
<img src="/site3/assets/media/svg/card-logos/american-express.svg" alt="" class="h-25px" />
|
|
</div>
|
|
<!--end::Card logos-->
|
|
</div>
|
|
<!--end::Input wrapper-->
|
|
</div>
|
|
<!--end::Input group-->
|
|
|
|
<!--begin::Input group-->
|
|
<div class="row mb-10">
|
|
<!--begin::Col-->
|
|
<div class="col-md-8 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="required fs-6 fw-bold form-label mb-2">Expiration Date</label>
|
|
<!--end::Label-->
|
|
<!--begin::Row-->
|
|
<div class="row fv-row">
|
|
<!--begin::Col-->
|
|
<div class="col-6">
|
|
<select name="exp_month" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Month">
|
|
<option></option>
|
|
<option value="01">1</option>
|
|
<option value="02">2</option>
|
|
<option value="03">3</option>
|
|
<option value="04">4</option>
|
|
<option value="05">5</option>
|
|
<option value="06">6</option>
|
|
<option value="07">7</option>
|
|
<option value="08">8</option>
|
|
<option value="09">9</option>
|
|
<option value="10">10</option>
|
|
<option value="11">11</option>
|
|
<option value="12">12</option>
|
|
</select>
|
|
</div>
|
|
<!--end::Col-->
|
|
<!--begin::Col-->
|
|
<div class="col-6">
|
|
<select name="exp_year" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Year">
|
|
<option></option>
|
|
<option value="2022">2022</option>
|
|
<option value="2023">2023</option>
|
|
<option value="2024">2024</option>
|
|
<option value="2025">2025</option>
|
|
<option value="2026">2026</option>
|
|
<option value="2027">2027</option>
|
|
<option value="2028">2028</option>
|
|
<option value="2029">2029</option>
|
|
<option value="2030">2030</option>
|
|
<option value="2031">2031</option>
|
|
<option value="2032">2032</option>
|
|
</select>
|
|
</div>
|
|
<!--end::Col-->
|
|
</div>
|
|
<!--end::Row-->
|
|
</div>
|
|
<!--end::Col-->
|
|
<!--begin::Col-->
|
|
<div class="col-md-4 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
|
|
<span class="required">CVV</span>
|
|
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Enter a card CVV code"></i>
|
|
</label>
|
|
<!--end::Label-->
|
|
<!--begin::Input wrapper-->
|
|
<div class="position-relative">
|
|
<!--begin::Input-->
|
|
<input type="text" class="form-control form-control-solid" minlength="3" maxlength="4" placeholder="CVV" name="cvc" />
|
|
<!--end::Input-->
|
|
<!--begin::CVV icon-->
|
|
<div class="position-absolute translate-middle-y top-50 end-0 me-3">
|
|
<!--begin::Svg Icon | path: icons/duotune/finance/fin002.svg-->
|
|
<span class="svg-icon svg-icon-2hx">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M22 7H2V11H22V7Z" fill="black" />
|
|
<path opacity="0.3" d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19ZM14 14C14 13.4 13.6 13 13 13H5C4.4 13 4 13.4 4 14C4 14.6 4.4 15 5 15H13C13.6 15 14 14.6 14 14ZM16 15.5C16 16.3 16.7 17 17.5 17H18.5C19.3 17 20 16.3 20 15.5C20 14.7 19.3 14 18.5 14H17.5C16.7 14 16 14.7 16 15.5Z" fill="black" />
|
|
</svg>
|
|
</span>
|
|
<!--end::Svg Icon-->
|
|
</div>
|
|
<!--end::CVV icon-->
|
|
</div>
|
|
<!--end::Input wrapper-->
|
|
</div>
|
|
<!--end::Col-->
|
|
</div>
|
|
<!--end::Input group-->
|
|
|
|
<!--begin::Input group-->
|
|
<div class="d-flex flex-column mb-7 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
|
|
<span class="required">Billing Address</span>
|
|
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Same as on the profile"></i>
|
|
</label>
|
|
|
|
|
|
|
|
<!--end::Label-->
|
|
<input type="text" class="form-control form-control-solid" placeholder="" name="billing_address" value="" />
|
|
</div>
|
|
<!--end::Input group-->
|
|
|
|
<div class="row mb-10">
|
|
<!--begin::Col-->
|
|
<div class="col-md-8 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="required fs-6 fw-bold form-label mb-2">Postal code</label>
|
|
<!--end::Label-->
|
|
<!--begin::Row-->
|
|
<div class="row fv-row">
|
|
<!--begin::Col-->
|
|
<div class="col-6">
|
|
<input type="text" class="form-control form-control-solid" placeholder="" name="postal" value="" />
|
|
</div>
|
|
<!--end::Col-->
|
|
<!--begin::Col-->
|
|
<div class="col-6">
|
|
|
|
</div>
|
|
<!--end::Col-->
|
|
</div>
|
|
<!--end::Row-->
|
|
</div>
|
|
<!--end::Col-->
|
|
<!--begin::Col-->
|
|
<div class="col-md-4 fv-row">
|
|
|
|
|
|
</div>
|
|
<!--end::Col-->
|
|
</div>
|
|
|
|
<!--begin::Input group-->
|
|
<div class="d-flex flex-stack">
|
|
<!--begin::Label-->
|
|
<div class="me-5">
|
|
<label class="fs-6 fw-bold form-label">Save Card for further purchases?</label>
|
|
</div>
|
|
<!--end::Label-->
|
|
<!--begin::Switch-->
|
|
<label class="form-check form-switch form-check-custom form-check-solid">
|
|
<input class="form-check-input" type="checkbox" value="1" />
|
|
<span class="form-check-label fw-bold text-muted">Save Card</span>
|
|
</label>
|
|
<!--end::Switch-->
|
|
</div>
|
|
<!--end::Input group-->
|
|
|
|
|
|
|
|
<!--begin::Actions-->
|
|
<div class="text-center pt-15">
|
|
<button type="reset" id="kt_modal_new_card_cancel" class="btn btn-light me-3">Discard</button>
|
|
<button type="submit" id="kt_modal_new_card_submit" class="btn btn-primary">
|
|
<span class="indicator-label">Submit</span>
|
|
<span class="indicator-progress">Please wait...
|
|
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
|
|
</button>
|
|
</div>
|
|
<!--end::Actions-->
|
|
</form>
|
|
|
|
<?php
|
|
if (isset($card_test_result) && is_array($card_test_result) && $card_test_result['error_status']==true)
|
|
{
|
|
?>
|
|
<div class="text-center pt-15">
|
|
<div class="d-flex align-items-center bg-light-danger rounded p-5 mb-7">
|
|
<?php
|
|
foreach($card_test_result['error_message'] as $err)
|
|
{
|
|
echo $err ." ,";
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
<!--end::Table container-->
|
|
</div>
|
|
<!--begin::Body-->
|
|
</div>
|
|
<!--end::Tables Widget 3-->
|
|
</div>
|
|
<!--end::Col-->
|
|
<!--begin::Col-->
|
|
<div class="col-xl-6">
|
|
<!--begin::Tables Widget 4-->
|
|
<div class="card card-xl-stretch mb-5 mb-xl-8">
|
|
<!--begin::Header-->
|
|
<div class="card-header border-0 pt-5">
|
|
<h3 class="card-title align-items-start flex-column">
|
|
<span class="card-label fw-bolder fs-3 mb-1">Previous Cards</span>
|
|
<span class="text-muted mt-1 fw-bold fs-7">.<span>
|
|
</h3>
|
|
<div class="card-toolbar">
|
|
|
|
</div>
|
|
</div>
|
|
<!--end::Header-->
|
|
<!--begin::Body-->
|
|
<div class="card-body py-3">
|
|
<div class="tab-content">
|
|
<!--begin::Tap pane-->
|
|
<div class="tab-pane fade show active" id="kt_table_widget_4_tab_1">
|
|
<!--begin::Table container-->
|
|
<?php
|
|
foreach ($card_table_result as $cr){
|
|
?>
|
|
<!--begin::Card-->
|
|
<div class="card card-dashed h-xl-100 flex-row flex-stack flex-wrap p-6">
|
|
<!--begin::Info-->
|
|
<div class="d-flex flex-column py-2">
|
|
<!--begin::Owner-->
|
|
<div class="d-flex align-items-center fs-4 fw-bolder mb-5"><?=$cr->firstname?> <?=$cr->lastname?>
|
|
<span class="badge badge-light-success fs-7 ms-2">Primary</span></div>
|
|
<!--end::Owner-->
|
|
<!--begin::Wrapper-->
|
|
<div class="d-flex align-items-center">
|
|
<!--begin::Icon-->
|
|
<img src="/site3/assets/media/svg/card-logos/<?=strtolower($cr->description)?>.svg" alt="" class="me-4" />
|
|
<!--end::Icon-->
|
|
<!--begin::Details-->
|
|
<div>
|
|
<div class="fs-4 fw-bolder"><?=$cr->description?> **** <?=$cr->digits?></div>
|
|
<div class="fs-6 fw-bold text-gray-400">Card expires at <?=$cr->expiration_month?>/<?=$cr->expiration_year?></div>
|
|
</div>
|
|
<!--end::Details-->
|
|
</div>
|
|
<!--end::Wrapper-->
|
|
</div>
|
|
<!--end::Info-->
|
|
<!--begin::Actions-->
|
|
<div class="d-flex align-items-center py-2">
|
|
<button type="reset" class="btn btn-sm btn-danger btn-active-light-primary me-3">Delete</button>
|
|
</div>
|
|
<!--end::Actions-->
|
|
</div>
|
|
<!--end::Card-->
|
|
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
|
|
<!--end::Table-->
|
|
</div>
|
|
<!--end::Tap pane-->
|
|
|
|
</div>
|
|
</div>
|
|
<!--end::Body-->
|
|
</div>
|
|
<!--end::Tables Widget 4-->
|
|
</div>
|
|
<!--end::Col-->
|
|
</div>
|
|
<!--end::Row-->
|