[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.ts

@@ -5,15 +5,19 @@ import { Subject, takeUntil } from "rxjs";
 import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { PaymentMethodType } from "@bitwarden/common/billing/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 
 import { SharedModule } from "../../../shared";
 
+import { PaymentLabelV2 } from "./payment-label-v2.component";
+
 @Component({
   selector: "app-payment",
   templateUrl: "payment.component.html",
   standalone: true,
-  imports: [SharedModule],
+  imports: [SharedModule, PaymentLabelV2],
 })
 export class PaymentComponent implements OnInit, OnDestroy {
   @Input() showMethods = true;
@@ -63,14 +67,15 @@ export class PaymentComponent implements OnInit, OnDestroy {
     private apiService: ApiService,
     private logService: LogService,
     private themingService: AbstractThemingService,
+    private configService: ConfigService,
   ) {
     this.stripeScript = window.document.createElement("script");
     this.stripeScript.src = "https://js.stripe.com/v3/?advancedFraudSignals=false";
     this.stripeScript.async = true;
-    this.stripeScript.onload = () => {
+    this.stripeScript.onload = async () => {
       this.stripe = (window as any).Stripe(process.env.STRIPE_KEY);
       this.stripeElements = this.stripe.elements();
-      this.setStripeElement();
+      await this.setStripeElement();
     };
     this.btScript = window.document.createElement("script");
     this.btScript.src = `scripts/dropin.js?cache=${process.env.CACHE_TAG}`;
@@ -187,7 +192,7 @@ export class PaymentComponent implements OnInit, OnDestroy {
         );
       }, 250);
     } else {
-      this.setStripeElement();
+      void this.setStripeElement();
     }
   }
 
@@ -267,7 +272,17 @@ export class PaymentComponent implements OnInit, OnDestroy {
     });
   }
 
-  private setStripeElement() {
+  private async setStripeElement() {
+    const extensionRefreshFlag = await this.configService.getFeatureFlag(
+      FeatureFlag.ExtensionRefresh,
+    );
+
+    // Apply unique styles for extension refresh
+    if (extensionRefreshFlag) {
+      this.StripeElementStyle.base.fontWeight = "500";
+      this.StripeElementClasses.base = "v2";
+    }
+
     window.setTimeout(() => {
       if (this.showMethods && this.method === PaymentMethodType.Card) {
         if (this.stripeCardNumberElement == null) {