[web] style Stripe custom checkout page (#28704)

* [web] style Stripe custom checkout page GitOrigin-RevId: f3708e391c0d8f49919d31cdfc92b10066868b6e
2026-06-11 15:10:48 +02:00 · 2025-09-29 09:28:17 +02:00
parent 1b4b86b222
commit 012ed43b5a
1 changed files with 52 additions and 0 deletions
@@ -295,6 +295,58 @@
      margin-top: var(--spacing-08);
    }
  }
+
+  &.stripe-payment-container {
+    .payment-checkout {
+      .checkout-form-inputs {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      // Everything under .form-group is to make the form better match
+      // Stripe's payment inputs
+      .form-group {
+        // we can't use "Noto Sans" as the font within PaymentElement,
+        // so we're using sans-serif for the text elsewhere in the page
+        font-family: sans-serif;
+
+        .form-control {
+          padding: 10px 12px;
+          font-size: 16px;
+          line-height: 20px;
+          border: 1px solid #e6e6e6;
+          transition:
+            box-shadow 0.15s ease,
+            border-color 0.15s ease;
+          box-shadow: 0 1px 3px 0 rgb(0 0 0 / 2%);
+
+          &:focus {
+            outline: none;
+            border-color: #046530; // brand primary color
+            box-shadow:
+              0 1px 1px rgb(0 0 0 / 3%),
+              0 3px 6px rgb(0 0 0 / 2%),
+              0 0 0 3px rgb(11 107 39 / 25%),
+              0 1px 1px 0 rgb(0 0 0 / 8%);
+          }
+
+          &.is-invalid {
+            border-color: var(--bs-form-invalid-border-color);
+            box-shadow:
+              0 1px 3px 0 rgb(0 0 0 / 10%),
+              0 0 0 1px var(--bs-form-invalid-border-color);
+          }
+        }
+
+        .invalid-feedback {
+          .material-symbols {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }

 .group-heading {