[PM 25897] Copy and UI Tweaks for Payment Method Component (#16851)

* Implement the Ui changes to align as expected

* Align the Text in card number, expiration date and security code vertically

* Change the Zip to ZIP

* Remove readonly modifier from signal declarations

apps/web/src/app/billing/payment/components/enter-billing-address.component.ts

@@ -70,7 +70,7 @@ type Scenario =
         </div>
         <div class="tw-col-span-6">
           <bit-form-field [disableMargin]="true">
-            <bit-label>{{ "zipPostalCode" | i18n }}</bit-label>
+            <bit-label>{{ "zipPostalCodeLabel" | i18n }}</bit-label>
             <input
               bitInput
               type="text"

apps/web/src/app/billing/payment/components/enter-payment-method.component.ts

@@ -83,7 +83,7 @@ type PaymentMethodFormGroup = FormGroup<{
           <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4">
             <div class="tw-col-span-1">
               <app-payment-label for="stripe-card-number" required>
-                {{ "number" | i18n }}
+                {{ "cardNumberLabel" | i18n }}
               </app-payment-label>
               <div id="stripe-card-number" class="tw-stripe-form-control"></div>
             </div>
@@ -109,7 +109,7 @@ type PaymentMethodFormGroup = FormGroup<{
                   class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-pr-1"
                   [position]="'above-end'"
                 >
-                  <i class="bwi bwi-question-circle tw-text-lg" aria-hidden="true"></i>
+                  <i class="bwi bwi-question-circle tw-text-sm" aria-hidden="true"></i>
                 </button>
                 <bit-popover [title]="'cardSecurityCode' | i18n" #cardSecurityCodePopover>
                   <p class="tw-mb-0">{{ "cardSecurityCodeDescription" | i18n }}</p>
@@ -217,7 +217,7 @@ type PaymentMethodFormGroup = FormGroup<{
           </div>
           <div class="tw-col-span-6">
             <bit-form-field [disableMargin]="true">
-              <bit-label>{{ "zipPostalCode" | i18n }}</bit-label>
+              <bit-label>{{ "zipPostalCodeLabel" | i18n }}</bit-label>
               <input
                 bitInput
                 type="text"

apps/web/src/app/billing/payment/components/payment-label.component.ts

@@ -26,7 +26,7 @@ import { SharedModule } from "../../../shared";
         class="tw-absolute tw-bg-background tw-px-1 tw-text-sm tw-text-muted -tw-top-2.5 tw-left-3 tw-mb-0 tw-max-w-full tw-pointer-events-auto"
       >
         <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
-        <span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span>
+        <span class="tw-text-[0.625rem] tw-font-normal">({{ "required" | i18n }})</span>
       </bit-label>
     </div>
   `,

apps/web/src/app/billing/services/stripe.service.ts

@@ -230,6 +230,8 @@ export class StripeService {
             '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
           fontSize: "16px",
           fontSmoothing: "antialiased",
+          lineHeight: "1.5",
+          padding: "8px 12px",
           "::placeholder": {
             color: null,
           },

apps/web/src/locales/en/messages.json

@@ -11939,5 +11939,11 @@
   },
   "encryptionKeySettingsAlgorithmPopoverArgon2Id": {
     "message": "Argon2id offers stronger protection against modern attacks. Best for advanced users with powerful devices."
+  },
+   "zipPostalCodeLabel": {
+    "message": "ZIP / Postal code"
+  },
+  "cardNumberLabel": {
+    "message": "Card number"
   }
 }