Improving layout of Credit Card Payment Form

templates/frontend/cardentryform.twig

@@ -1,5 +1,3 @@
-<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>
@@ -9,42 +7,25 @@ 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")
-	-->
+<div id="cc-form">
 	<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 class="cc-row">
+		<label>Card Number</label>
+		<div id="sq-card-number"></div>
+	</div>
+	<div class="cc-row">
+		<label>CVV</label>
+		<div id="sq-cvv"></div>
+	</div>
+	<div class="cc-row">
+		<label>Expiration Date</label>
+		<div id="sq-expiration-date"></div>
+	</div>
+	<div class="cc-row">
+		<label>Postcode</label>
+		<div id="sq-postal-code"></div>
+	</div>
+	<button class="cc-pay" onclick="requestCardNonce(event)">PAY NOW</button>
 </div>