File: /home/imensosw/www/imenso.co/dev/mps-pay/index.php
<!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 MobilePay</title>
<link rel='stylesheet' href='css/bootstrap.min.css' media='all' />
<link rel='stylesheet' href='css/style.css' media='all' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" media="all">
</head>
<body>
<nav class="navbar navbar-expand-lg light-bg mt-5">
<div class="container">
<div class="w-100 text-center">
<a class="navbar-brand mr-0" href="index.php">
<img src="images/client-logo-2.png" class="img-fluid">
</a>
</div>
</div>
</nav>
<section class="content">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Review</li>
<li>Pay</li>
<li>Receipt</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h3 class="fs-subtitle mb-4">Balance Due</h3>
<h2 class="fs-title">$119.50</h2>
<a href="" class="edit-link">Edit Amount</a>
<p class="mt-3">for <br><strong>The Pediatric Clinic</strong></p>
<a class="next btn mt-4 btn-primary" href="javascript:;">Pay Now</a>
<p class="mt-5 text-muted">To view your statement, <a href="http://dev.imenso.co/mps-new" target="_blank">click here</a> to go to the patient portal</p>
</fieldset>
<fieldset>
<h3 class="fs-subtitle mb-4"><small>Payment Amount:</small> <strong style="color:#000; font-size: 20px;">$119.50</strong> </h3>
<div class="row">
<div class="col pr-0">
<a href="">
<img src="images/amazon-pay.png" class="img-fluid px-1">
</a>
</div>
<div class="col pl-0">
<a href="">
<img src="images/apple-pay.png" class="img-fluid px-1">
</a>
</div>
</div>
<p class="or-text mt-3"><span><small>OR</small></span></p>
<div class="row">
<div class="col-md-12">
<input type="text" style="padding-left: 46px !important;" class="card-input" name="" placeholder="Card Number" />
</div>
<div class="col-md-12">
<input type="text" class="" placeholder="Name on Card" />
</div>
<div class="col-md-6 pr-2 col">
<input type="text" class="" placeholder="Expiry Date" />
</div>
<div class="col-md-6 pl-2 col">
<input type="text" class="" placeholder="CVC" />
</div>
</div>
<!-- <input type="button" name="previous" class="previous action-button" value="Previous" /> -->
<a class="next btn btn-block btn-primary mt-4">Pay $119.50</a>
<div class="checkbox mt-2">
<label>
<input value="" type="checkbox" checked="">
<span class="ms"><i class="ms-icon fa fa-check"></i></span>
Save this credit card for future transactions
</label>
</div>
<img src="images/payments.png" class="mt-5">
</fieldset>
<fieldset>
<img src="images/payment-success.png" width="80">
<h4 class="mt-4">Payment Successful</h2>
<p class="mt-2 opaq">If you require a receipt, please enter your e-mail below and click send.</p>
<p>Transaction Code: <strong>1325</strong></p>
<input type="text" name="fname" placeholder="Enter your email" />
<a class="submit btn mt-2 btn-block btn-primary"/>Send Receipt</a>
</fieldset>
</form>
</div>
</div>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type="text/javascript">
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})
</script>
</body>
</html>