

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/country-select-js/2.0.1/js/countrySelect.js"></script>
	<style type="text/css">
		.intl-tel-input {
                display: block;
            }
	</style>

	<div class="col-md-8 col-md-offset-2" id="tithe_donation_section">

		<h3>Make Payment</h3>
		<div>
			 <img src="http://images.ipayafrica.com/channels/channels_500.png" alt="Payment Channels"> 
		</div>

		<form method="post" name="tithe_donation_form" id="tithe_donation_form" class="form-horizontal" onload="tittlelabel();">

			<input type="hidden" name="live" value="1">
			<input type="hidden" name="mm" value="1">
			<input type="hidden" name="mb" value="1">
			<input type="hidden" name="dc" value="1">
			<input type="hidden" name="cc" value="1">
			<input type="hidden" name="mer" value="Ripplewave">
			<input type="hidden" name="oid" value="C776B4">
			<input type="hidden" name="inv" value="C776B4">
		
       		<fieldset>

				<div class="form-group">
				    <label for="fname">First Name</label>
				    <input type="text" class="form-control" name="fname" id="fname" placeholder="First Name" required>
				</div>

				<div class="form-group">
				    <label for="lname">Last Name</label>
				    <input type="text" class="form-control" name="lname" id="lname" placeholder="Last Name"  required>
				</div>

				<div class="form-group">
				    <label for="eml">Email Address</label>
				    <input type="email" class="form-control" name="eml" id="eml" placeholder="Email" required>
				</div>

				<div class="form-group">
				    <label for="tel">Telephone</label>
				    <input type="tel" class="form-control" name="tel" onchange="getCountry()" id="tel" placeholder="" required>
				</div>

				<div class="form-group">
				    <label for="cur">Select Currency</label>
				    <select id="cur" name="cur" class="form-control" required>
					  	<option value="USD">US Dollar (USD)</option>
						<option value="KES">Kenya Shilling (KES)</option>	
					</select>
				</div>

				<div class="form-group">
				    <label for="eml">Amount</label>
				    <input type="text" pattern="-?[0-9]*(\.[0-9]+)?" class="form-control" name="ttl" id="ttl" placeholder="Amount" required>
				</div>

				<div class="form-group">
				    <label for="eml">Amount</label>
  					<textarea class="form-control" rows="3" name="comment" id="comment" placeholder="Reason of payment" required></textarea>
				</div>
		
				<input type="hidden" name="country" id="country" type="text" value="" />
				<input type="hidden" name="vid" value="ripplewave">
				<input type="hidden" name="p1" 	value="ripplewave">
				<input type="hidden" name="p2" 	value="">
				<input type="hidden" name="p3" 	value="">
				<input type="hidden" name="p4" 	value="">
				<input type="hidden" name="cbk" value="https://safariant.com/?page_id=60">
				<input type="hidden" name="cst" value="1">
				<input type="hidden" name="crl" value="0">
				<input type="hidden" name="hsh" value="324hug8lpuu9">

				<div class="form-group">
					<button type="submit" class="btn btn-default">Continue to iPay</button>
				</div>

				
			</fieldset>
		</form>


		<script type="text/javascript">

			$(document).ready(function(){

				$("#tel").intlTelInput({
			        autoPlaceholder: "aggressive",
			        preferredCountries: ['ke'],
			        nationalMode: false
			    });

			    
			});
			function getCountry(){
			    	var country = $("#tel").intlTelInput("getSelectedCountryData").name;
			    	//console.log(country);
			    	document.getElementsByName('country')[0].value= country;
			    }

	 	</script>
      {"id":28,"date":"2018-10-12T06:17:17","date_gmt":"2018-10-12T06:17:17","guid":{"rendered":"http:\/\/safariant.com\/?page_id=28"},"modified":"2018-10-12T06:23:20","modified_gmt":"2018-10-12T06:23:20","slug":"pay","status":"publish","type":"page","link":"https:\/\/safariant.com\/?page_id=28","title":{"rendered":"Pay"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth-no-title.php","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/safariant.com\/index.php?rest_route=\/wp\/v2\/pages\/28"}],"collection":[{"href":"https:\/\/safariant.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/safariant.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/safariant.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/safariant.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":2,"href":"https:\/\/safariant.com\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/safariant.com\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/safariant.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}