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?v=2018-10-30-a"></script>
<script>
// For sq-paymentform.js	
var applicationId = '{{ config.testmode ? config.sq_sandbox_app_id : config.sq_app_id }}';
var locationId = '{{ config.testmode ? config.sq_sandbox_location_id : config.sq_location_id }}';
</script>

<div id="card-error-area" class="{{ error | length ?: 'hidden' }}">
	{% for err in error %}
		{{ err.detail }} <small>( {{ err.code  | lower }} )</small><br>
	{% endfor %}
</div>

<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" min="{{ 'now' | date('Y-m-d') }}" max="2019-12-31">
	</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>