function + fixes

- fixed the styling on the drop in so that at default the edges are curved but inner corners are not
- added functionally for increasing margin between the payment methods

app/static/css/application.css

@@ -902,7 +902,7 @@ a:hover {
 	--dropin-width: 500px;
 	--dropin-font: 17px;
 	--button-edges: 10px;
-	--body-edges: 10px;
+	--body-edges: 0px;
 	--border-off: 1px solid #e6e9eb;
 	--active-background: #f7f8f9;
 	--bg-color: white;
@@ -917,6 +917,13 @@ a:hover {
 	--text-bold: normal;
 	--text-italic: normal;
 	--payButton-width: 100%;
+	--payments-spacing: 0px 0;
+	--paymentselected-margin: 8px 0;
+	--selectedBody-edges: 12px;
+	--topedges-left: 12px;
+	--topedges-right: 12px;
+	--bottomedges-left: 12px;
+	--bottomedges-right: 12px;
 }
 
 
@@ -971,15 +978,28 @@ a:hover {
 	border: var(--border-off) !important;
 	background: var(--dropin-tab-color) !important;
 	font-weight: var(--text-bold) !important;
+	margin: var(--payments-spacing) !important;
+}
+
+.adyen-checkout__payment-methods-list li:nth-child(2){
+	border-top-left-radius: var(--topedges-left) !important;
+	border-top-right-radius: var(--topedges-right) !important;
+}
+
+
+.adyen-checkout__payment-methods-list li:last-child {
+  border-bottom-left-radius: var(--bottomedges-left) !important;
+  border-bottom-right-radius: var(--bottomedges-right) !important;
 }
 
 .adyen-checkout__dropin  {
 	text-align: var(--text-align) !important;
 }
 
-
 .adyen-checkout__payment-method--selected {
 	background: var(--dropin-color) !important;
+	margin: var(--paymentselected-margin) !important;
+	border-radius: var(--selectedBody-edges) !important;
 }
 
 .adyen-checkout__payment-method__radio {

app/static/js/adyen-implementation.js

@@ -561,6 +561,11 @@ function bodyEdges () {
 	let bodyEdgeValue = document.getElementById('bodyEdges').value
 	let bodyPixelVal = bodyEdgeValue + 'px'
 	r.style.setProperty('--body-edges', bodyPixelVal);
+	r.style.setProperty('--selectedBody-edges', bodyPixelVal);
+	r.style.setProperty('--topedges-left', bodyPixelVal);
+	r.style.setProperty('--topedges-right', bodyPixelVal);
+	r.style.setProperty('--bottomedges-left', bodyPixelVal);
+	r.style.setProperty('--bottomedges-right', bodyPixelVal);
 }
 
 
@@ -579,6 +584,11 @@ function resetDynamicCSS () {
 	r.style.setProperty('--background-color', null);
 	r.style.setProperty('--dropin-width', null);
 	r.style.setProperty('--body-edges', null);
+	r.style.setProperty('--selectedBody-edges', null);
+	r.style.setProperty('--topedges-left', null);
+	r.style.setProperty('--topedges-right', null);
+	r.style.setProperty('--bottomedges-left', null);
+	r.style.setProperty('--bottomedges-right', null);
 	r.style.setProperty('--button-edges', null);
 	r.style.setProperty('--bg-color', null);
 	r.style.setProperty('--dropin-color', null);
@@ -589,6 +599,9 @@ function resetDynamicCSS () {
 	r.style.setProperty('--text-italic', null);
 	r.style.setProperty('--text-align', null);
 	r.style.setProperty('--payButton-width', null);
+	r.style.setProperty('--payments-spacing', null);
+	r.style.setProperty('--paymentselected-margin', null);
+	r.style.setProperty('--font-options', null);
 }
 
 function dropinWidth () {
@@ -602,7 +615,14 @@ function payButtonWidth () {
 	let payWidthValue = document.getElementById("payButtonWidth").value
 	let payWidthpx = payWidthValue + 'px'
 	r.style.setProperty('--payButton-width', payWidthpx);
-	console.log(widthpx)
+}
+
+function paymentsSpacing () {
+	let paymentSpacingValue = document.getElementById("paymentsSpacing").value
+	let paymentSpacingpx = paymentSpacingValue + 'px'
+	r.style.setProperty('--payments-spacing', paymentSpacingpx);
+	r.style.setProperty('--paymentselected-margin', paymentSpacingpx);
+	console.log(paymentSpacingpx)
 }
 
 function fontWidth () {

app/templates/component.html

@@ -570,6 +570,20 @@
                       </div>
                       </div>
                   </div>
+                  <div class="row container">
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-4">
+                      <p class="textFonts text-left ml-3">Payment methods spacing</p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-2 text-right">
+                      <div class="form-group">
+                        <input type="range" class="form-control-range" id="paymentsSpacing" min="0" max="50" value="0" onchange="paymentsSpacing(this.value)">
+                      </div>
+                      </div>
+                  </div>
                 </div>
                 <hr class="mt-4 mb-4" />