fixing - pay button width

- realised the pay button width function didn't actually exist so added it in

app/static/css/application.css

@@ -916,6 +916,7 @@ a:hover {
 	--text-align: left;
 	--text-bold: normal;
 	--text-italic: normal;
+	--payButton-width: 100%;
 }
 
 
@@ -945,6 +946,14 @@ a:hover {
 	border-radius: var(--button-edges) !important;
 }
 
+.adyen-checkout__button.adyen-checkout__button--pay {
+	width: var(--payButton-width) !important;
+	margin-right: auto;
+    margin-left: auto;
+	display: flex;
+    justify-content: center;
+}
+
 .form-group {
 	width: 250px;
 	/* Full-width */

app/static/js/adyen-implementation.js

@@ -588,6 +588,7 @@ function resetDynamicCSS () {
 	r.style.setProperty('--text-bold', null);
 	r.style.setProperty('--text-italic', null);
 	r.style.setProperty('--text-align', null);
+	r.style.setProperty('--payButton-width', null);
 }
 
 function dropinWidth () {
@@ -597,6 +598,13 @@ function dropinWidth () {
 	console.log(widthpx)
 }
 
+function payButtonWidth () {
+	let payWidthValue = document.getElementById("payButtonWidth").value
+	let payWidthpx = payWidthValue + 'px'
+	r.style.setProperty('--payButton-width', payWidthpx);
+	console.log(widthpx)
+}
+
 function fontWidth () {
 	let fontValue = document.getElementById("fontSize").value
 	let fontpx = fontValue + 'px'

app/templates/component.html

@@ -566,7 +566,7 @@
                     <!-- toggle -->
                     <div class="col-2 text-right">
                       <div class="form-group">
-                        <input type="range" class="form-control-range" id="changeWidth" min="300" max="700" value="500" onchange="dropinWidth(this.value)">
+                        <input type="range" class="form-control-range" id="payButtonWidth" min="265" max="665" value="100%" onchange="payButtonWidth(this.value)">
                       </div>
                       </div>
                   </div>