checkout test 2

<!DOCTYPE html>
<html lang="es">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
		integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<link rel="stylesheet" href="Style/style.css">
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
	<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css"> -->
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src='https://www.google.com/recaptcha/api.js'></script>
	<!--<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
    <link rel="apple-touch-icon" href="img/favicon.png">-->
	<title>HidrOrgánica - Payment Page</title>

	<script type="text/javascript">
		//<![CDATA[
        var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.trust-provider.com/" : "http://www.trustlogo.com/");
        document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
        //]]>

	</script>



	<style>
		.inputWithIcon i {
			float: right;
			margin-right: 5px;
			margin-top: -55px;
			position: relative;
			vertical-align: middle;
		}
	</style>

</head>

<body onload="start();">

	<nav class="navbar navbar-expand-lg  navbar-light bg-light shadow">
		<a class="navbar-brand"></a>
		<img src="img/logo.png" height="70" class="d-inline-block align-top" alt="">
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
		<div class="navbar-collapse collapse" id="navbarNavAltMarkup">
			<div class="navbar-nav ml-auto">
				<a class="nav-item nav-link active" href="#">Payments<span class="sr-only">(current)</span></a>
				<a class="nav-item nav-link" href="https://www.hidrorganica.com/">Home Page</a>
				<a class="nav-item nav-link" href="https://www.hidrorganica.com/pages/contactanos">Contact Us</a>
			</div>
		</div>

	</nav>

	<form method="POST" action="post.php" name="myForm" id="myForm" onsubmit="return validation(this);">
		<div class="container">
			<div class="row">
				<div class="col-sm order-1">
					<h4>Invoice Information</h4>
					<hr /><br />
					<h6><i class="fa fa-file"></i> Invoice number: 123456789</h6>
					<h6><i class="fa fa-money"></i> Amount : $1.00</h6>
					<input type="hidden" class="form-control form-control-lg" id="InvoiceNumber" name="InvoiceNumber" value="123456789">
					<br />
					<h4>Contact Information</h4>
					<hr />
					<label for="fullName"><i class="fa fa-user"></i> Name</label>
					<input type="text" class="form-control" id="fullName" name="fullName" maxlength="32" placeholder="Full Name" value="Testing Tester">
					<label for="email"><i class="fa fa-envelope"></i> E-mail</label>
					<input type="email" class="form-control" id="email" name="email" maxlength="254" placeholder="email@mail.com" value="email@test.com">

					<input type='hidden' class="form-control form-control-lg" id="amount" name="amount" value="1.00" >

					<div class="row">

					</div>

				</div>

				<div class="border-left d-sm-none d-md-block order-2" style="width: 0px;"></div>


				<div class="col-sm order-3" style="margin-left: -1px;">
					<hr class="d-sm-block d-md-none">
					<h4>Payment Information</h4>
					<!--<label for="chargeType">Métodos Aceptados:</label>-->
					<div class="icon-container">
						<img src="img/visa.jpg" height="40" hspace="1">
						<img src="img/mc.png" height="50" hspace="1">
						<img src="img/amex.png" height="60" hspace="1">
						<img src="img/discover.gif" height="40" hspace="10">
                    </div>
						<!-- <label for="recurrence">Choose your payment frequency:</label>
                    <select id="recurrence" name="recurrence" class="form-control form-control-lg">
                        <option value="single">One Time</option>
                        <option value="recurrence" selected>Monthly (Recurrent)</option>
                    </select> -->
						<div class="row">
							<!-- <div id="chargeType" class="col-50">
                            <label for="chargeType">Payment Method:</label>
                            <select id="chargeType" name="chargeType" class="form-control form-control-lg" onchange="pmtMethod();">
                                <option value="credit">Credit Card</option>
                                <option value="ach">Bank Account</option>
                            </select>
                        </div> -->
							<div id="charges" class="col-50">

							</div>
							<div class="col-50">

							</div>
						</div>

						<div id="cc">
							<label for="cardName">Name on card</label>
							<input type="text" value="Testing Tester" class="form-control" id="cardName" name="cardName" maxlength="32" placeholder="Name on card" pattern="[a-zA-Z\s]+" title="Name on card only. No special characters." oninvalid="this.setCustomValidity('Name on card only. No special characters.')" oninput="setCustomValidity('')" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode == 32">
							<label for="cardNumber">Card Number</label>
							<div class="inputWithIcon">
								<input type="text" inputmode="decimal" class="form-control" id="cardNumber"  name="cardNumber" placeholder="Card number" required title="Card number." oninvalid="this.setCustomValidity('Card number.')" oninput="setCustomValidity('')">
								<span id="cardTypeLogo"></span>
							</div>

							<input type="text" id="cardType" name="cardType" hidden>
							<div class="row">
								<div class="col-25">
									<label for="month">Month</label>
									<select name="month" class="form-control" id="month" required title="Mes en la tarjeta" oninvalid="this.setCustomValidity('Mes en la tarjeta.')" oninput="setCustomValidity('')">
                                    <option value="">MM</option>
                                    <option value="01">01</option>
                                    <option value="02">02</option>
                                    <option value="03">03</option>
                                    <option value="04">04</option>
                                    <option value="05">05</option>
                                    <option value="06">06</option>
                                    <option value="07">07</option>
                                    <option value="08">08</option>
                                    <option value="09">09</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                </select>
								</div>
								<div class="col-25">
									<label for="exp">Year</label>
									<select name="year" class="form-control" id="year" required title="Año en la tarjeta." oninvalid="this.setCustomValidity('Año en la tarjeta.')" oninput="setCustomValidity('')">
                                    <option value="">YY</option>
                                    <!-- Auto Generate Next 10 Years -->
                                                                        <option value="2021">21</option>
                                                                        <option value="2022">22</option>
                                                                        <option value="2023">23</option>
                                                                        <option value="2024">24</option>
                                                                        <option value="2025">25</option>
                                                                        <option value="2026">26</option>
                                                                        <option value="2027">27</option>
                                                                        <option value="2028">28</option>
                                                                        <option value="2029">29</option>
                                                                        <option value="2030">30</option>
                                                                        <option value="2031">31</option>
                                                                    </select>
								</div>
								<div class="col-25">
									<label for="cvv">CVV</label>
									<input type="text" inputmode="decimal" class="form-control" id="cvv" name="cvv" required title="Código de seguridad." oninvalid="this.setCustomValidity('Código de seguridad.')" oninput="setCustomValidity('')" placeholder="CVV">
                            </div>
								</div>
								<div class="row">
									<div class="col-md-4">
										<label for="zip">Zip Code</label>
										<input type="text" inputmode="decimal" class="form-control" id="zip" name="zip" required title="Zip Code" oninvalid="this.setCustomValidity('Zip Code.')" oninput="setCustomValidity('')" placeholder="Zip">
                          </div>
									</div>
								</div>
								<!-- <div id="ach">
                        <label for="bankNumber">Account Number</label>
                        <input type="text" id="bankNumber" name="bankNumber" placeholder="Account Number">
                        <label for="routingNumber">Routing Number</label>
                        <input type="text" id="routingNumber" name="routingNumber" placeholder="Routing Number">
                        <label for="Account Type">Account Type</label>
                        <select id="accountType" name="accountType">
                            <option value="none" selected>Choose Account Type</option>
                            <option value="checking">Checking</option>
                            <option value="savings">Savings</option>
                        </select>

                    </div> -->

								<!-- Captcha -->
								<div id="msgcaptcha"></div> <br />
								<div class="g-recaptcha" data-sitekey="6LcTVUEUAAAAAP-qiqGyLckJ5e3dzB6eq3PGOkuj"></div>
							</div>
						</div>


						<input type="submit" value="Pay $1.00" class="btn" id="paymentButton">


						<!-- Trust Logo -->
						<div align="center">
							<span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=DeGkrKWWl5hnnZzAUr3fN8bkd8RKCBYZiTtbdasob7CcWAWppBURdGcU8V6F"></script></span>

						</div>

					</div>


	</form>





	<!-- Cleave -->

	<script src="Scripts/cleave.js"></script>
	<!--<script src="Scripts/cleave-phone.us.js"></script>-->
	<script src="Scripts/script.js"></script>

	<!-- BOOTSTRAP JS -->
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
		integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
		integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
	</script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
		integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
	</script>

</body>

</html>