[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/scss/forms.scss

@@ -98,7 +98,7 @@ input[type="checkbox"] {
   cursor: pointer;
 }
 
-.form-control.stripe-form-control {
+.form-control.stripe-form-control:not(.v2) {
   padding-top: 0.55rem;
 
   &.is-focused {
@@ -126,6 +126,30 @@ input[type="checkbox"] {
   }
 }
 
+.form-control.stripe-form-control.v2 {
+  padding: 0.6875rem 0.875rem;
+  border-radius: 0.5rem;
+  border-color: rgb(var(--color-text-muted));
+  height: unset;
+  font-weight: 500;
+  color: rgb(var(--color-text-main));
+  background-color: rgb(var(--color-background));
+
+  &:hover {
+    border-color: rgb(var(--color-primary-500));
+  }
+
+  &.is-focused {
+    outline: 0;
+    border-color: rgb(var(--color-primary-500));
+  }
+
+  &.is-invalid {
+    color: rgb(var(--color-text-main));
+    border-color: rgb(var(--color-danger-600));
+  }
+}
+
 .dropdown-menu,
 .dropdown-item {
   @include themify($themes) {