squarepay/templates/frontend/cardentryform.twig

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
<script type="text/javascript" src="/extensions/vendor/ginger/squarepay/sq-paymentform.js"></script>
<script>
// For sq-paymentform.js	
var isPaymentsPage = true;
var applicationId = '{{ testmode ? sq_sandbox_app_id : sq_app_id }}';
var locationId = '{{ testmode ? sq_sandbox_location_id : sq_location_id }}';
</script>

<div id="cc-form">
	<form id="nonce-form" novalidate action="/process-square" method="post">
	<input type="hidden" id="card-nonce" name="nonce">
	<div class="cc-row">
		<label>Name</label>
		<input type="text" name="name">
	</div>
	<div class="cc-row">
		<label>Email</label>
		<input type="email" name="email">
	</div>
	<div class="cc-row">
		<label>Date of Booking</label>
		<input type="date" name="date" placeholedr="dd/mm/yy">
	</div>
	<div class="cc-row">
		<label>Name of Booker</label>
		<input type="text" name="booker">
	</div>
	<div class="cc-row">
		<label>Card Number</label>
		<div id="sq-card-number"></div>
	</div>
	<div class="cc-row">
		<label>Card Expiry Date</label>
		<div id="sq-expiration-date"></div>
	</div>
	<div class="cc-row">
		<label>CVV <small>(see back of card)</small></label>
		<div id="sq-cvv"></div>
	</div>
	<div class="cc-row">
		<label>Postcode</label>
		<div id="sq-postal-code"></div>
	</div>
	<div class="cc-row">
		<label></label>
		<a class="ecom-button" onclick="requestCardNonce(event)">Complete Order</a>
	</div>
	</form>
</div>