From 013f5db81609c1ed48de267f06343b8b7d82d941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Jasi=C5=84ski?= <jakub.jasinski@checkout.com>
Date: Thu, 19 Mar 2026 18:11:51 +0100
Subject: [PATCH] fix: fix styling issues for saved methods in dc

---
 package.json                                 |  2 +-
 src/dynamic-checkout/payment-methods/card.ts | 17 +++++++++++++--
 src/dynamic-checkout/styles/default.ts       | 23 +++++++++-----------
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 266adb3..8ea841f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.",
   "scripts": {
     "build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js",
diff --git a/src/dynamic-checkout/payment-methods/card.ts b/src/dynamic-checkout/payment-methods/card.ts
index 31b7864..246d29b 100644
--- a/src/dynamic-checkout/payment-methods/card.ts
+++ b/src/dynamic-checkout/payment-methods/card.ts
@@ -695,7 +695,10 @@ module ProcessOut {
     private getCountryInput(billingAddressFieldsWrapper: HTMLElement) {
       const countryInput = HTMLElements.createElement({
         tagName: "select",
-        classNames: ["dco-payment-method-card-form-input"],
+        classNames: [
+          "dco-payment-method-card-form-input",
+          "dco-payment-method-card-form-input--placeholder",
+        ],
         attributes: {
           id: "country-select",
           name: "country",
@@ -741,6 +744,7 @@ module ProcessOut {
 
       countryInput.addEventListener("change", e => {
         const selectElement = e.target as HTMLSelectElement
+        selectElement.classList.remove("dco-payment-method-card-form-input--placeholder")
 
         HTMLElements.replaceChildren(
           billingAddressFieldsWrapper,
@@ -787,13 +791,22 @@ module ProcessOut {
         if (unit === "state" && countryConfig.states) {
           input = HTMLElements.createElement({
             tagName: "select",
-            classNames: ["dco-payment-method-card-form-input"],
+            classNames: [
+              "dco-payment-method-card-form-input",
+              "dco-payment-method-card-form-input--placeholder",
+            ],
             attributes: {
               name: unit,
               "aria-label": Translations.getText("state-label", this.paymentConfig.locale),
             },
           })
 
+          input.addEventListener("change", (e: Event) => {
+            ;(e.target as HTMLSelectElement).classList.remove(
+              "dco-payment-method-card-form-input--placeholder",
+            )
+          })
+
           HTMLElements.appendChildren(input, [
             this.getDefaultSelectOption(
               Translations.getText("select-state-placeholder", this.paymentConfig.locale),
diff --git a/src/dynamic-checkout/styles/default.ts b/src/dynamic-checkout/styles/default.ts
index 40b107c..f6d7577 100644
--- a/src/dynamic-checkout/styles/default.ts
+++ b/src/dynamic-checkout/styles/default.ts
@@ -434,6 +434,10 @@ const defaultStyles = `
     color: #c2c2c2;
   }
 
+  select.dco-payment-method-card-form-input--placeholder {
+    color: #696F79;
+  }
+
   .dco-payment-method-card-form-section-inputs-wrapper {
     display: flex;
     gap: 10px;
@@ -567,37 +571,29 @@ const defaultStyles = `
   }
     
   .dco-express-checkout-header-settings-button {
-    min-width: 44px;
     min-height: 44px;
     padding: 0;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     background-color: transparent;
     border: none;
     cursor: pointer;
-    transition: all .4s;
-    border-radius: 4px;
   }
 
   .dco-delete-payment-method-button {
-    min-width: 44px;
     min-height: 44px;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     background-color: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
-    transition: all .4s;
-    border-radius: 4px;
     pointer-events: auto;
+    margin-left: auto;
   }
 
-  .dco-delete-payment-method-button:hover, .dco-express-checkout-header-settings-button:hover {
-    background-color: #1213140f;
-  }
 
   .dco-express-checkout-header-wrapper {
     display: flex;
@@ -636,8 +632,9 @@ const defaultStyles = `
 
   .dco-modal-payment-methods-list {
     width: 100%;
-    border: 1px solid #dde0e3;
-    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
 
   .dco-modal-payment-methods-list--no-methods {