File: /home/imensosw/www/imenso.co/dev/prc/pay-bill.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 type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js" charset="utf-8"> </script>
<!-- <script src="js/popover.js"></script> -->
<script src="js/jquery.creditCardValidator.js"></script>
<script>
$(function(){
$("#includedContent").load("sidebar.html");
$('#card_number').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 step-1 active" step_no="1"><a href="#">Review</a></li>
<li class="step step-2" data_txt="isDisabled" step_no="2"><a href="#">Pay</a></li>
<li class="step step-3" data_txt="isDisabled" step_no="3"><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-5 green-bg-g">
<div class="row">
<div class="col-md-12">
<div class="receipt b-r-4">
<div class="p-3 pt-5 pb-5 mt-5">
<h5 class="text-center mb-1 mt-4">Total Remaining Balance</h5>
<div class="form-group mb-0">
<input type="email" class="form-control bold" disabled="" id="" aria-describedby="emailHelp" value="$1,023.06">
</div>
<p class="text-center mt-0"><label for="" class="text-center big-text" style="font-size: 0.9em !important; color:#FFF;">Payment Code: #521585</label> </p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-7">
<div class="row p-5">
<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 class="form-group">
<label for="">Payment Amount</label>
<input type="text" class="form-control" id="" placeholder="Enter Amount">
</div>
<div class="text-right">
<a href="javascript:;" class="btn mt-5 btn-login next_step" data-cnt="step-2">Continue to Pay</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="steps" id="step-2" style="display: none;">
<div class="row d-flex border-bottom">
<div class="col-md-12">
<div class="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 hide-xs">PAYMENT CODE:</span>
<span class="big-text bold mx-2 mr-5">#521585</span>
<span class="very-sml hide-xs">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="d-flex form-height">
<div class="col-xl-4 grey-bg" style="padding: 0;">
<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>
<form id="paymentForm">
<div class="col-xl-8 ">
<div id="v-pills-tabContent " class="payment_options tab-content px-5">
<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="card_number" name="card_number" aria-describedby="emailHelp" placeholder="XXXX-XXXX-XXXX-XXXX">
<span id="err_cardNumber"></span>
</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>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" name="expMonth" id="expMonth" aria-describedby="emailHelp" placeholder="e.g. MM">
<span id="err_expMonth"></span>
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="expYear" id="expYear" aria-describedby="emailHelp" placeholder="e.g. YY">
</div>
</div>
</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" name="cardCode" id="cardCode" placeholder="e.g. 123">
<span id="err_cardCode"></span>
</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">
<input type="hidden" name="dataValue" id="dataValue" />
<input type="hidden" name="dataDescriptor" id="dataDescriptor" />
<a href="javascript:;" onclick="sendPaymentDataToAnet()" class="btn btn-login next_step mb-5" 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:;" class="btn btn-login next_step mb-5" 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>
</form>
</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">
var step=1;
var amount=10;
var payment_status=false;
$( ".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() {
if(step==2)
{
return false;
}
next_step();
});
function next_step()
{
if(step==2)
{
if(payment_status==false)
{
return false;
}
}
step++;
data="step-"+step;
$(".steps").hide();
$("#"+data).fadeIn();
$("."+data).addClass("active");
$("."+data).removeAttr("data_txt");
if(data == 'step-3')
{
$(".step").addClass("cursor_default");
}
}
/*$( ".next_step1" ).click(function() {
var data=$(this).attr("data-cnt");
$(".steps").hide();
$("#"+data).fadeIn();
$("."+data).addClass("active");
$("."+data).removeAttr("data_txt");
if(data == 'step-3')
{
$(".step").addClass("cursor_default");
}
});*/
$(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");
});
});
$('#progressbar li').click(function()
{
if( $('.step-3').hasClass('active') )
{
return false ;
}
if( $(this).attr("data_txt") != 'isDisabled' )
{
var data='step-'+$(this).attr("step_no");
$(".steps").hide();
$("#"+data).fadeIn();
$("."+data).addClass("active");
$("."+data).removeAttr("data_txt");
}
});
function sendPaymentDataToAnet() {
var authData = {};
authData.clientKey = "796rVn7yYJ7a5pTZus32u7U5M4kxzcTVHBFYSHcA8qj5L65Y9B3pc3wY4H336QyH";
authData.apiLoginID = "376BHsqVW";
var cardData = {};
cardData.cardNumber = document.getElementById("card_number").value;
cardData.month = document.getElementById("expMonth").value;
cardData.year = document.getElementById("expYear").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].text);
if(response.messages.message[i].code=="E_WC_05")
{
document.getElementById("err_cardNumber").textContent=response.messages.message[i].text;
}
if(response.messages.message[i].code=="E_WC_06")
{
document.getElementById("err_expMonth").textContent=response.messages.message[i].text;
}
// if(response.messages.message[i].code=="E_WC_07")
// {
// document.getElementById("err_expYear").textContent=response.messages.message[i].text;
// }
if(response.messages.message[i].code=="E_WC_15")
{
document.getElementById("err_cardCode").textContent=response.messages.message[i].text;
}
i = i + 1;
}
} else {
callTransactionProcessor(response.opaqueData);
}
}
}
// function paymentFormUpdate(opaqueData) {
// payment_status=true;
// next_step();
// 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("card_number").value = "";
// document.getElementById("expMonth").value = "";
// document.getElementById("expYear").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();
// }
// Using query.js, do an AJAX call to a separate URL on the site to do the actual transaction processing.
function callTransactionProcessor(responseData) {
$.ajax({
url: "https://dev.imenso.co/payment/authorize/process.php",
data: {amount: amount, dataDesc: responseData.dataDescriptor, dataValue: responseData.dataValue},
method: "POST",
timeout: 5000
}).done(function(data){
console.log("Success");
}).fail(function(){
console.log("Error");
}).always(function(textStatus){
console.log(textStatus);
messageFunc(textStatus);
})
}
// The result of the transaction processing will be returned from the processing script as a JSON object. Parse the object to determine success or failure, and alert the user.
function messageFunc(returnMsg)
{
try{
responseObj=JSON.parse(returnMsg);
if(responseObj.status==true){
message="Transaction Successful! - Transaction ID: "+responseObj.MessageCode;
payment_status=true;
$('.transaction_code').html(responseObj.AuthCode);
next_step();
}
else{
message="Transaction Failed";
message+=responseObj.ErrorMessage;
alert(message);
}
}
catch(error){
console.log("Couldn't parse result string");
message="Error.";
alert(message);
}
}
</script>
</body>
</html>