[PM-11657] Stripe + Browser Refresh Styling (#10978)

* add check for `ExtensionRefresh` in StripeService

- Stripe components need new styles to match the new CL components

* add global styles for Stripe components

- Matches closer to the browser refresh components

* add browser refresh component details to Stripe JS initialization

* add component to match the display of the new component library that shows only when the `ExtensionRefresh` flag is enabled

* update both payment components to use payment label component

- This styling of the label is separate from the `AC2476_DeprecateStripeSourcesAPI` flag

* update security code copy

* change layout of the trial component to account for new CL components

* absolutely position label to remove extra spacing around the label

* remove unneeded logic

apps/web/src/app/billing/shared/payment/payment.component.html

@@ -26,8 +26,10 @@
   </div>
   <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
     <div class="tw-grid tw-grid-cols-12 tw-gap-4 tw-mb-4">
-      <div [ngClass]="trialFlow ? 'tw-col-span-5' : 'tw-col-span-4'">
-        <label for="stripe-card-number-element">{{ "number" | i18n }}</label>
+      <div [ngClass]="trialFlow ? 'tw-col-span-12' : 'tw-col-span-4'">
+        <app-payment-label-v2 for="stripe-card-number-element">{{
+          "number" | i18n
+        }}</app-payment-label-v2>
         <div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
       </div>
       <div *ngIf="!trialFlow" class="tw-col-span-8 tw-flex tw-items-end">
@@ -38,26 +40,26 @@
           height="32"
         />
       </div>
-      <div [ngClass]="trialFlow ? 'tw-col-span-3' : 'tw-col-span-4'">
-        <label for="stripe-card-expiry-element">{{ "expiration" | i18n }}</label>
+      <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-4'">
+        <app-payment-label-v2 for="stripe-card-expiry-element">{{
+          "expiration" | i18n
+        }}</app-payment-label-v2>
         <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
       </div>
-      <div class="tw-col-span-4">
-        <div class="tw-flex">
-          <label for="stripe-card-cvc-element">
-            {{ "securityCode" | i18n }}
-          </label>
+      <div [ngClass]="trialFlow ? 'tw-col-span-6' : 'tw-col-span-4'">
+        <app-payment-label-v2 for="stripe-card-cvc-element">
+          {{ "securityCodeSlashCVV" | i18n }}
           <a
             href="https://www.cvvnumber.com/cvv.html"
             tabindex="-1"
             target="_blank"
             rel="noreferrer"
-            class="ml-auto"
+            class="hover:tw-no-underline"
             appA11yTitle="{{ 'learnMore' | i18n }}"
           >
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
-        </div>
+        </app-payment-label-v2>
         <div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
       </div>
     </div>