squarepay/templates/frontend/cardentryform.twig

<h1>Credit Card Payment Form</h1>

<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="sq-ccbox">
	<!--
	You should replace the action attribute of the form with the path of
	the URL you want to POST the nonce to (for example, "/process-card")
	-->
	<form id="nonce-form" novalidate action="/process-square" method="post">
	<table>
		<tbody>
			<tr>
				<td>Card Number</td>
				<td><div id="sq-card-number"></div></td>
			</tr>
			<tr>
				<td>CVV</td>
				<td><div id="sq-cvv"></div></td>
			</tr>
			<tr>
				<td>Expiration Date &nbsp;</td>
				<td><div id="sq-expiration-date"></div></td>
			</tr>
			<tr>
				<td>Postal Code</td>
				<td><div id="sq-postal-code"></div></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<button class="btn btn-primary" id="sq-creditcard" onclick="requestCardNonce(event)">
					Pay with card
					</button>
				</td>
			</tr>
		</tbody>
	</table>

	<!-- After a nonce is generated it will be assigned to this hidden input field -->
	<input type="hidden" id="card-nonce" name="nonce">
	</form>
</div>