Update Recurly card style based on split test variants

GitOrigin-RevId: 6c5bd6dffb9254400e7e134da8334957b929d78e

services/web/frontend/js/features/subscription/components/new/checkout/card-element.tsx

@@ -4,6 +4,7 @@ import { FormGroup, ControlLabel } from 'react-bootstrap'
 import { CardElementChangeState } from '../../../../../../../types/recurly/elements'
 import { ElementsInstance } from 'recurly__recurly-js'
 import classnames from 'classnames'
+import getMeta from '../../../../../utils/meta'
 
 type CardElementProps = {
   className?: string
@@ -21,16 +22,31 @@ function CardElement({ className, elements, onChange }: CardElementProps) {
   useEffect(() => {
     if (!cardRef.current) return
 
-    const card = elements.CardElement({
+    const showNewDesign =
-      displayIcon: true,
+      getMeta('ol-splitTestVariants')?.['design-system-updates'] === 'enabled'
-      inputType: 'mobileSelect',
+
-      style: {
+    const style = showNewDesign
+      ? {
+          fontColor: '#1b222c',
+          placeholder: {
+            color: '#677283',
+          },
+          invalid: {
+            fontColor: '#b83a33',
+          },
+        }
+      : {
           fontColor: '#5d6879',
           placeholder: {},
           invalid: {
             fontColor: '#a93529',
           },
-      },
+        }
+
+    const card = elements.CardElement({
+      displayIcon: true,
+      inputType: 'mobileSelect',
+      style,
     })
 
     card.attach(cardRef.current)