Matching styling on cardform to site

src/Controller/SquareBackendController.php

@@ -41,7 +41,7 @@ class SquareBackendController extends Base
     {
         $params = [
             'client_id' => $this->config['sq_app_id'],
-            'scope' => 'ITEMS_READ MERCHANT_PROFILE_READ PAYMENTS_READ PAYMENTS_WRITE ORDERS_READ',
+            'scope' => 'ITEMS_READ MERCHANT_PROFILE_READ PAYMENTS_READ PAYMENTS_WRITE ORDERS_READ ORDERS_WRITE',
         ];
         $uri = 'https://'.$this->config['sq_domain'].$this->config['sq_auth_url'];
         $query = http_build_query($params, '', '&', PHP_QUERY_RFC3986);

templates/frontend/cardentryform.twig

@@ -10,18 +10,21 @@ var locationId = '{{ testmode ? sq_sandbox_location_id : sq_location_id }}';
 <div id="cc-form">
 	<form id="nonce-form" novalidate action="/process-square" method="post">
 	<input type="hidden" id="card-nonce" name="nonce">
-	</form>
+	<div class="cc-row">
+		<label>Name</label>
+		<input type="text" name="name">
+	</div>
 	<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>
+		<label>Expiry Date</label>
+		<div id="sq-expiration-date"></div>
 	</div>
 	<div class="cc-row">
-		<label>Expiration Date</label>
-		<div id="sq-expiration-date"></div>
+		<label>CVV <small>(see back of card)</small></label>
+		<div id="sq-cvv"></div>
 	</div>
 	<div class="cc-row">
 		<label>Postcode</label>
@@ -31,4 +34,5 @@ var locationId = '{{ testmode ? sq_sandbox_location_id : sq_location_id }}';
 		<label></label>
 		<a class="ecom-button" onclick="requestCardNonce(event)">Complete Order</a>
 	</div>
+	</form>
 </div>

web/sq-paymentform.js

@@ -16,10 +16,12 @@ function init() {
 
 		// Customize the CSS for SqPaymentForm iframe elements
 		inputStyles: [{
-			fontSize: '1em',
-			color: 'purple',
-			fontWeight: 'bold',
-			padding: '5px'
+			fontSize: '1.25em',
+			fontFamily: 'sans-serif',
+			color: 'white',
+			backgroundColor: '#0f193c',
+			fontWeight: 'normal',
+			padding: '5px 10px'
 		}],
 	  
 		applePay: false,