|
|
|
|
|
<?php
|
|
|
|
|
|
/*!
|
|
|
|
|
|
* iPayLinks支付,信用卡信息入口页面
|
|
|
|
|
|
* @author LYT <lyt@hainatravel.com>
|
|
|
|
|
|
* @date 2017-08-11
|
|
|
|
|
|
*/
|
|
|
|
|
|
?>
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
|
|
<title>Pay with credit card - China Highlights</title>
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
|
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
|
|
|
|
|
|
<meta content="yes" name="apple-mobile-web-app-capable">
|
|
|
|
|
|
<meta name="referrer" content="always">
|
|
|
|
|
|
<link href="//data.chinahighlights.com/css/min.php?f=/public/css/global.min.css&v=20170811" rel="stylesheet" type="text/css" />
|
|
|
|
|
|
<!-- ,/css/dist/magic-input.css -->
|
|
|
|
|
|
<style>
|
|
|
|
|
|
body {background: #f1f1f1;}
|
|
|
|
|
|
p{margin-bottom: 8.5px;}
|
|
|
|
|
|
.text-danger{color: #a31022!important;}
|
|
|
|
|
|
.pageTitle{margin-left: 300px;}
|
|
|
|
|
|
.pageTitle h1{color: #fff;border:none;font-size: 30px;}
|
|
|
|
|
|
.mobileTitle h1{color: #fff;border:none;font-size: 20px;}
|
|
|
|
|
|
.marginTop{margin-top: 40px;}
|
|
|
|
|
|
.pay_form{padding: 30px 15px 15px 15px ;box-shadow: 0 0 10px #999;background: #fff;border-radius: 5px; margin-bottom: 15px;}
|
|
|
|
|
|
.pay_form .btn-danger{background: #a31022;}
|
|
|
|
|
|
.pay_footer{padding: 30px 0 10px;font-size: 12px;}
|
|
|
|
|
|
.orderinfo{padding: 30px 5px 5px 5px!important;}
|
|
|
|
|
|
.orderinfo p{padding-left: 5px;padding-right: 5px;}
|
|
|
|
|
|
.orderinfo_label{color: grey;margin-bottom: 8.5px;}
|
|
|
|
|
|
ul li {clear: both;}
|
|
|
|
|
|
.requiredArea {border-bottom: 1px dashed #a31022;clear: both;color: #a31022;display: block;font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;font-size: 1em;margin-top: 10px;padding: 2px 0 4px 10px; }
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="wrapper" class="chkVisible">
|
|
|
|
|
|
<div id="header" >
|
|
|
|
|
|
<div id="mainnav" class="nav navbar-inverse" role="navigation">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="col-lg-21 col-sm-20 col-lg-offset-3 col-sm-offset-3">
|
|
|
|
|
|
<div class="navbar-header">
|
|
|
|
|
|
<div class="visible-xs text-left mobileTitle">
|
|
|
|
|
|
<h1>Pay with credit card </h1>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="container hidden-xs">
|
|
|
|
|
|
<div class="row hidden-sm" id="headerLinkRight">
|
|
|
|
|
|
<div class="col-lg-24"> </div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="mainnav" class="nav navbar navbar-inverse hidden-xs" >
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-lg-3 col-sm-4 logobox hidden-xs">
|
|
|
|
|
|
<a href="//www.chinahighlights.com/">
|
|
|
|
|
|
<img src="/pic/logo/logo-132x104.png" alt="china highlights" class="img-responsive">
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-17 col-sm-17 pageTitle">
|
|
|
|
|
|
<h1>Pay with credit card</h1>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--container-->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--end of mainnav -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="content">
|
|
|
|
|
|
<div class="container marginTop">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-md-8">
|
|
|
|
|
|
<div class="tourSelected pay_form">
|
|
|
|
|
|
<ul class="row">
|
|
|
|
|
|
<li><label class="col-md-12 col-xs-12 orderinfo_label">Tracking Code:</label><label class="col-md-12 col-xs-12">
|
|
|
|
|
|
<?php echo $orderId; ?>
|
|
|
|
|
|
</label></li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<label class="col-md-12 col-xs-12 orderinfo_label">Total:</label>
|
|
|
|
|
|
<label class="col-md-12 col-xs-12"><span class="text-danger">
|
|
|
|
|
|
<?php if($amount) echo $amount; ?>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<?php if($currencyCode) echo $currencyCode; ?>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><label class="col-md-12 col-xs-12 orderinfo_label">Description:</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<label class="col-md-24 col-xs-24">
|
|
|
|
|
|
<?php if($description) echo $description; ?>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pay_form_div col-md-16 col-sm-24">
|
|
|
|
|
|
<form action="https://www.chinahighlights.com/secureipay/order_pay" method="post" id="Form1" name="Form1" class="form-horizontal pay_form" onsubmit="return checkForm();" novalidate>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label class="col-md-5 control-label"></label>
|
|
|
|
|
|
<div class="col-md-18 col-xs-24">
|
|
|
|
|
|
<p class="">We don’t share your financial details with the merchant.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="cardHolderNumber" class="col-md-5 control-label">Card Number</label>
|
|
|
|
|
|
<div class="col-md-18 col-xs-24">
|
|
|
|
|
|
<input type="text" class="form-control" id="cardHolderNumber" name="cardHolderNumber" placeholder="Card Number">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="cardHolderFirstName" class="col-md-5 col-xs-24 control-label">Full Name</label>
|
|
|
|
|
|
<div class="col-md-9 col-xs-12">
|
|
|
|
|
|
<input type="text" class="form-control" id="cardHolderFirstName" name="cardHolderFirstName" placeholder="First Name">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-9 col-xs-12">
|
|
|
|
|
|
<input type="text" class="form-control" id="cardHolderLastName" name="cardHolderLastName" placeholder="Last Name">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-5 col-xs-24"></div>
|
|
|
|
|
|
<div class="col-md-18 col-xs-24 name_error"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group ">
|
|
|
|
|
|
<label for="cardExpirationMonth" class="col-md-5 col-xs-24 control-label">Expiration M/Y</label>
|
|
|
|
|
|
<div class="col-md-4 col-xs-10">
|
|
|
|
|
|
<select class="form-control" id="cardExpirationMonth" name="cardExpirationMonth">
|
|
|
|
|
|
<option value="">MM</option>
|
|
|
|
|
|
<?php echo $month_html; ?>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-5 col-xs-14">
|
|
|
|
|
|
<select class="form-control" id="cardExpirationYear" name="cardExpirationYear">
|
|
|
|
|
|
<option value="">YY</option>
|
|
|
|
|
|
<?php echo $year_html; ?>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-md-24 col-xs-24 row">
|
|
|
|
|
|
<div class="col-md-5 col-xs-24"></div>
|
|
|
|
|
|
<div class="col-md-18 col-xs-24 date_error"></div></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="securityCode" class="col-md-5 control-label">CVV</label>
|
|
|
|
|
|
<div class="col-md-9 col-xs-24">
|
|
|
|
|
|
<input type="text" class="form-control" id="securityCode" name="securityCode" placeholder="Security Code">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="cardHolderEmail" class="col-md-5 control-label">Email Address</label>
|
|
|
|
|
|
<div class="col-md-18 col-xs-24">
|
|
|
|
|
|
<input type="email" class="form-control" id="cardHolderEmail" name="cardHolderEmail" placeholder="Email Address" >
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 可选的寄账单 -->
|
|
|
|
|
|
<!-- <div class="form-group">
|
|
|
|
|
|
<label class="col-md-10">
|
|
|
|
|
|
<input type="checkbox" name="flexible" value="Yes" class="mgc mgc-danger">
|
|
|
|
|
|
Ship to my billing address
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<?php if($form_html) echo $form_html ?>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<div class="col-md-5"></div>
|
|
|
|
|
|
<div class="col-md-18 col-xs-24 ">
|
|
|
|
|
|
<button type="submit" class="btn btn-default btn-danger col-md-24 col-xs-24" id="sub_b" data-loading-text="Please wait...">SUBMIT</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
<div class="pay_footer text-right">
|
|
|
|
|
|
<p>© 1998 China Highlights.
|
|
|
|
|
|
<a href="https://www.chinahighlights.com/privacy.htm" rel="nofollow">Privacy Statement</a>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="main" class="container">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<script src="//data.chinahighlights.com/js/min.php?f=/js/jquery-1.8.2.min.js,/public/js/bootstrap.min.js&v=20170811" type="text/javascript"></script>
|
|
|
|
|
|
<script language="javascript">
|
|
|
|
|
|
$(function() {
|
|
|
|
|
|
$('select[name="cardExpirationMonth"],select[name="cardExpirationYear"]').focus(function(){
|
|
|
|
|
|
$('.date_error').children('.requiredArea').remove();
|
|
|
|
|
|
});
|
|
|
|
|
|
$('input[name="cardHolderFirstName"],input[name="cardHolderLastName"]').click(function(){
|
|
|
|
|
|
$('.name_error').children('.requiredArea').remove();
|
|
|
|
|
|
});
|
|
|
|
|
|
$('input[name="cardHolderNumber"],input[name="securityCode"],input[name="cardHolderEmail"]').focus(function(){
|
|
|
|
|
|
$(this).parent().children('.requiredArea').remove();
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
function checkForm(){
|
|
|
|
|
|
$("#sub_b").button('loading');
|
|
|
|
|
|
|
|
|
|
|
|
$('.requiredArea').remove();
|
|
|
|
|
|
var requirei = 0;
|
|
|
|
|
|
var windowHeight = $(window).height();
|
|
|
|
|
|
var scrollTopWhere = windowHeight;
|
|
|
|
|
|
|
|
|
|
|
|
var calcScrollTop = function($jqElement) {
|
|
|
|
|
|
var visibleTop = $jqElement.offset().top - $jqElement.height();
|
|
|
|
|
|
scrollTopWhere = visibleTop < scrollTopWhere ? visibleTop : scrollTopWhere;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var $startingDate = $("#cardHolderNumber");
|
|
|
|
|
|
if($('input[name="cardHolderNumber"]').val()==''){
|
|
|
|
|
|
$('#cardHolderNumber').parent().append('<div class="requiredArea">Please enter your credit card</div>');
|
|
|
|
|
|
calcScrollTop($startingDate);
|
|
|
|
|
|
requirei ++;
|
|
|
|
|
|
}
|
|
|
|
|
|
var $realname = $("#cardHolderFirstName");
|
|
|
|
|
|
if($('#cardHolderFirstName').val()=='' || $('#cardHolderLastName').val()==''){
|
|
|
|
|
|
$('.name_error').append('<div class="requiredArea">Please enter your full name</div>');
|
|
|
|
|
|
calcScrollTop($realname);
|
|
|
|
|
|
requirei ++;
|
|
|
|
|
|
}
|
|
|
|
|
|
var $realname = $("#cardExpirationMonth");
|
|
|
|
|
|
if($('#cardExpirationMonth').val()=='' || $('#cardExpirationYear').val()==''){
|
|
|
|
|
|
$('.date_error').append('<div class="requiredArea">Please select Expiration</div>');
|
|
|
|
|
|
calcScrollTop($realname);
|
|
|
|
|
|
requirei ++;
|
|
|
|
|
|
}
|
|
|
|
|
|
var $Nationality = $("#securityCode");
|
|
|
|
|
|
if($('#securityCode').val()==''){
|
|
|
|
|
|
$('#securityCode').parent().append('<div class="requiredArea">Please enter your securityCode</div>');
|
|
|
|
|
|
calcScrollTop($Nationality);
|
|
|
|
|
|
requirei ++;
|
|
|
|
|
|
}
|
|
|
|
|
|
var $email = $("#cardHolderEmail");
|
|
|
|
|
|
if($('#cardHolderEmail').val()==''){
|
|
|
|
|
|
$('#cardHolderEmail').parent().append('<div class="requiredArea">Please enter your email</div>');
|
|
|
|
|
|
calcScrollTop($email);
|
|
|
|
|
|
requirei ++;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
|
|
|
|
|
|
if (!emailPattern.test($('#cardHolderEmail').val())) {
|
|
|
|
|
|
$('#cardHolderEmail').parent().append('<div class="requiredArea">Please verify your email</div>');
|
|
|
|
|
|
calcScrollTop($email);
|
|
|
|
|
|
requirei++;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
if (scrollTopWhere < windowHeight) {
|
|
|
|
|
|
$("body,html").animate({
|
|
|
|
|
|
scrollTop: scrollTopWhere
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
if(requirei>0){
|
|
|
|
|
|
$("#sub_b").button('reset');
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</html>
|
