File: /home/imensosw/public_html/imenso.co/dev/prc/pay-bill_new.html
<!doctype html>
<html lang="en-US" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<title>Patient Portal</title>
<link rel='stylesheet' href='css/bootstrap.min.css' media='all' />
<link rel='stylesheet' href='css/style-2.css' media='all' />
<link rel='stylesheet' href='css/responsive.css' media='all' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" media="all">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="js/popover.js"></script> -->
<script src="js/jquery.creditCardValidator.js"></script>
<script>
$(function(){
$("#includedContent").load("sidebar.html");
$('#cardNumber').validateCreditCard(function(result) {
$(".card_pay").attr("class","form-control card_pay "+result.card_type.name);
});
});
</script>
</head>
<body style="background: #F0F4F7;">
<div class="container-fluid">
<div id="includedContent"></div>
<div class="right right_panel animate dashboard">
<div class="m-5">
<div class="container-fluid">
<div class="row make_payment mb-5">
<div class="col-md-12">
<h1 class="text-center mb-4">Make a Payment</h1>
<ul id="progressbar">
<li class="step-1 active"><a href="#">Review</a></li>
<li class="step-2" data_txt="isDisabled"><a href="#">Pay</a></li>
<li class="step-3" data_txt="isDisabled"><a href="#">Receipt</a></li>
</ul>
</div>
<div class="col-md-12">
<div class="form-wrapper">
<form class="lined-form">
<div class="steps" id="step-1">
<div class="row">
<div class="col-xl-12">
<div class="row">
<div class="col-md-6">
<div class="col-md-12 receipt green-bg-g b-r-4 mb-4">
<div class="p-3 pt-5 pb-5">
<div class="row">
<div class="col-md-4">
<div class="form-group mb-1">
<label for="">Payment Code</label>
<input type="text" class="form-control borderless mt-2" id="" aria-describedby="emailHelp" value="#521585" readonly>
</div>
</div>
<div class="col-md-8">
<div class="form-group mb-1">
<label for="">Total Remaining Balance</label>
<input type="email" class="form-control bold table-borderless" disabled="" id="" aria-describedby="emailHelp" value="$1,023.06">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Payment Amount</label>
<input type="text" class="form-control" id="" placeholder="Enter Amount">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="">E-mail Address</label>
<input type="text" class="form-control" id="" value="john@mps.com">
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end">
<div class="col-md-6">
<div class="text-right">
<a href="javascript:;" class="btn mt-3 mb-3 btn-block btn-secondary next_step" data-cnt="step-2">Continue to Pay</a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="steps" id="step-2" style="display: none;">
<div class="row d-flex">
<div class="col-md-12">
<div class="neg-mar p-3">
<div class="d-flex align-items-center justify-content-between">
<span class="very-sml hide-xs">SELECT A PAYMENT METHOD</span>
<div class="d-flex align-items-center">
<span class="very-sml">PAYMENT AMOUNT:</span>
<span class="big-text bold mx-2">$1,023.06</span>
<!-- <a href="#" class="edit_amount"><i class="fa fa-pencil"></i></a> -->
</div>
</div>
</div>
</div>
</div>
<div class="row d-flex form-height">
<div class="col-xl-4 grey-bg neg-mar-2">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active d-flex justify-content-between align-items-center" id="v-pills-credit-tab" data-toggle="pill" href="#v-pills-credit" role="tab" aria-controls="v-pills-credit" aria-selected="true"><span class="m-hide">Credit/Debit Card</span> <img src="images/card-icon.png" class="" width="30"></a>
<a class="nav-link d-flex justify-content-between align-items-center" id="v-pills-bank-tab" data-toggle="pill" href="#v-pills-bank" role="tab" aria-controls="v-pills-bank" aria-selected="false"><span class="m-hide">Bank Account</span> <img src="images/bank-logo.png" class="" width="30"></a>
<a class="nav-link d-flex justify-content-between align-items-center" id="v-pills-paypal-tab" data-toggle="pill" href="#v-pills-paypal" role="tab" aria-controls="v-pills-paypal" aria-selected="false"><span class="m-hide">PayPal</span><img src="images/paypal.png" class="" width="30"></a>
<a class="nav-link d-flex justify-content-between align-items-center" id="v-pills-google-tab" data-toggle="pill" href="#v-pills-google" role="tab" aria-controls="v-pills-google" aria-selected="false"><span class="m-hide">Google Pay</span> <img src="images/google.png" class="" width="30"></a>
<a class="nav-link d-flex justify-content-between align-items-center" id="v-pills-apple-tab" data-toggle="pill" href="#v-pills-apple" role="tab" aria-controls="v-pills-apple" aria-selected="false"><span class="m-hide">Apple Pay</span> <img src="images/apple.png" class="" width="30"></a>
</div>
</div>
<div class="col-xl-1 d-none d-xl-block">
<div class="vertical_divider1 mx-auto"><!-- <span class=" rounded-circle">OR</span> --></div>
</div>
<div class="col-xl-7" >
<div id="v-pills-tabContent paymentForm" class="payment_options tab-content">
<div class="tab-pane fade show active" id="v-pills-credit" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="row mt-4">
<div class="col-md-12">
<div class="form-group">
<label for="">Card Number</label>
<!-- <p class="log"></p> -->
<input type="text" class="form-control default card_pay" id="cardNumber" aria-describedby="emailHelp" placeholder="XXXX-XXXX-XXXX-XXXX" name="cardNumber">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Name on Account</label>
<input type="text" class="form-control" id="" placeholder="John Doe">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Billing Zip Code</label>
<input type="text" class="form-control" id="" placeholder="123456">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Expiration Date</label>
<input type="text" class="form-control" id="expDate" name="expDate" aria-describedby="emailHelp" placeholder="e.g. 01/21">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">CVV
<span class="rounded-circle where_find">? <img src="images/cvv-card.png" alt="cvv-card" /></span>
</label>
<input type="text" class="form-control" id="cardCode" name="cardCode" placeholder="e.g. 123">
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group">
<label class="checkbox_container"> <span>Save This Card for future use</span>
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="col-md-12 text-right">
<a href="javascript:;" class="btn btn-login next_step mb-4" data-cnt="step-3">Pay $1,023.06</a>
</div>
</div>
</div><!--/credit-->
<div class="tab-pane fade" id="v-pills-bank" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<div class="row mt-4">
<div class="col-md-6">
<div class="form-group">
<label for="">Bank Name</label>
<input type="text" class="form-control" id="" aria-describedby="emailHelp" placeholder="Bank Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Name on Account</label>
<input type="text" class="form-control" id="" placeholder="Name on Account">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Account Number</label>
<input type="text" class="form-control" id="" aria-describedby="emailHelp" placeholder="Account Number">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">ABA Routing Number</label>
<input type="text" class="form-control" id="" placeholder="ABA Routing Number">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="">Account Type</label>
<select class="chosen form-control" name="faculty">
<option >Select Bank Account Type</option>
<option value="AC">Savings </option>
<option value="AD">Checking </option>
</select>
</div>
</div>
<div class="col-md-12 mt-3">
<div class="form-group">
<label class="checkbox_container"> <span>Save This Bank Account information for future use</span>
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="col-md-12 text-right">
<a href="javascript:;" onclick="sendPaymentDataToAnet()" class="btn btn-login next_step mb-4" data-cnt="step-3">Pay $1,023.06</a>
</div>
</div>
</div><!--/bank-->
<div class="tab-pane fade" id="v-pills-paypal" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<div class="merchant-note text-center">
<p>You will be redirected to the merchant site, please do not refresh or close the page.</p>
<a href="javascript:;" class="btn btn-login next_step mb-4" data-cnt="step-3">Continue with PayPal</a>
</div>
</div><!--/paypal-->
<div class="tab-pane fade" id="v-pills-google" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<div class="merchant-note text-center">
<p>You will be redirected to the merchant site, please do not refresh or close the page.</p>
<a href="javascript:;" class="btn btn-login next_step mb-4" data-cnt="step-3">Continue with Google Pay</a>
</div>
</div>
<div class="tab-pane fade" id="v-pills-apple" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<div class="merchant-note text-center">
<p>You will be redirected to the merchant site, please do not refresh or close the page.</p>
<a href="javascript:;" class="btn btn-login next_step mb-4" data-cnt="step-3">Continue with Apple Pay</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="steps" id="step-3" style="display: none;">
<div class="row justify-content-md-center">
<div class="col-xl-6">
<div class="row">
<div class="col-md-12">
<div class="receipt receipt1 b-r-4">
<div class="p-3 pt-5 pb-5">
<div class="text-center">
<div class="check mb-3">
<img src="images/tick.png" width="80" class="rounded-circle" />
</div>
<h4>Payment Successful</h4>
<p>A receipt of this transaction has been e-mailed to you at the e-mail on file</p>
<p>Transaction Code: <strong class="transaction_code">1325</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$( ".login" ).click(function() {
$(this).addClass('btn-primary');
$(this).removeClass('btn-flat');
$('.pay-bill').removeClass('btn-primary');
$('.pay-bill').addClass('btn-flat');
$('.login-fields').show();
$('.pay-bill-fields').hide();
});
$( ".login-first a" ).click(function() {
$('.login-fields').show();
$('.pay-bill-fields').hide();
$('.login-first').hide();
$('.d-pay-bill').show();
});
$( ".d-pay-bill a" ).click(function() {
$('.login-fields').hide();
$('.pay-bill-fields').show();
$('.login-first').show();
$('.d-pay-bill').hide();
});
$( ".pay-bill" ).click(function() {
$(this).addClass('btn-primary');
$(this).removeClass('btn-flat');
$('.login').removeClass('btn-primary');
$('.login').addClass('btn-flat');
$('.login-fields').hide();
$('.pay-bill-fields').show();
});
$( ".register" ).click(function() {
$('#form-1').hide();
$('.slogan-2').hide();
$('#form-2').show();
$('.reg-ben').hide();
$('.reg-cta').show();
});
//data-cnt="step-2"
$( ".next_step" ).click(function() {
var data=$(this).attr("data-cnt");
$(".steps").hide();
$("#"+data).fadeIn();
$("."+data).addClass("active");
$("."+data).removeAttr("data_txt");
});
$(document).ready(function(){
$('.radio_container input[type="radio"]').click(function(){
var inputValue = $(this).attr("value");
var targetBox = $("#" + inputValue);
$(".payment_options").not(targetBox).hide();
$(targetBox).fadeIn();
});
$('.where_find').click(function(){
$(this).find("img").toggleClass("d-none d-block");
});
});
</script>
<script type="text/javascript">
function sendPaymentDataToAnet() {
var authData = {};
authData.clientKey = "796rVn7yYJ7a5pTZus32u7U5M4kxzcTVHBFYSHcA8qj5L65Y9B3pc3wY4H336QyH";
authData.apiLoginID = "376BHsqVW";
var cardData = {};
cardData.cardNumber = document.getElementById("cardNumber").value;
cardData.expDate = document.getElementById("expDate").value;
cardData.cardCode = document.getElementById("cardCode").value;
// If using banking information instead of card information,
// build a bankData object instead of a cardData object.
//
// var bankData = {};
// bankData.accountNumber = document.getElementById('accountNumber').value;
// bankData.routingNumber = document.getElementById('routingNumber').value;
// bankData.nameOnAccount = document.getElementById('nameOnAccount').value;
// bankData.accountType = document.getElementById('accountType').value;
var secureData = {};
secureData.authData = authData;
secureData.cardData = cardData;
// If using banking information instead of card information,
// send the bankData object instead of the cardData object.
//
// secureData.bankData = bankData;
Accept.dispatchData(secureData, responseHandler);
function responseHandler(response) {
if (response.messages.resultCode === "Error") {
var i = 0;
while (i < response.messages.message.length) {
console.log(response.messages.message[i].code + " : " +response.messages.message[i].text);
i = i + 1;
}
} else {
paymentFormUpdate(response.opaqueData);
}
}
}
function paymentFormUpdate(opaqueData) {
alert("success");
document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
document.getElementById("dataValue").value = opaqueData.dataValue;
// If using your own form to collect the sensitive data from the customer,
// blank out the fields before submitting them to your server.
document.getElementById("cardNumber").value = "";
document.getElementById("expDate").value = "";
document.getElementById("cardCode").value = "";
/*document.getElementById("accountNumber").value = "";
document.getElementById("routingNumber").value = "";
document.getElementById("nameOnAccount").value = "";
document.getElementById("accountType").value = "";*/
document.getElementById("paymentForm").submit();
}
</script>
</body>
</html>