Converting text color rgba to hex to prevent Stripe warning (#9511)

changelog/fix-convert-rgba-text-color

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Converting text color rgba to hex to prevent Stripe warning

client/checkout/upe-styles/index.js

@@ -8,6 +8,7 @@ import {
 	dashedToCamelCase,
 	isColorLight,
 	getBackgroundColor,
+	maybeConvertRGBAtoRGB,
 	handleAppearanceForFloatingLabel,
 } from './utils.js';
 
@@ -387,9 +388,11 @@ export const getFieldStyles = (
 	for ( let i = 0; i < styles.length; i++ ) {
 		const camelCase = dashedToCamelCase( styles[ i ] );
 		if ( validProperties.includes( camelCase ) ) {
-			filteredStyles[ camelCase ] = styles.getPropertyValue(
-				styles[ i ]
-			);
+			let propertyValue = styles.getPropertyValue( styles[ i ] );
+			if ( camelCase === 'color' ) {
+				propertyValue = maybeConvertRGBAtoRGB( propertyValue );
+			}
+			filteredStyles[ camelCase ] = propertyValue;
 		}
 	}
 

client/checkout/upe-styles/test/utils.js

@@ -111,4 +111,30 @@ describe( 'UPE Utilities to generate UPE styles', () => {
 		expect( upeUtils.isColorLight( darkGrey ) ).toEqual( false );
 		expect( upeUtils.isColorLight( lightGrey ) ).toEqual( true );
 	} );
+
+	test( 'maybeConvertRGBAtoRGB returns valid colors', () => {
+		const hex = '#ffffff';
+		const color = 'red';
+		const rgb = 'rgb(1, 2, 3)';
+		const rgbNoSpaces = 'rgb(1,2,3)';
+		const rgba = 'rgba(1, 2, 3, 1)';
+		const rgbaNoSpaces = 'rgba(1,2,3,1)';
+		const shadow = 'rgb(1,2,3) 0px 1px 1px 0px';
+		const shadowTransparent = 'rgba(1,2,3,1) 0px 1px 1px 0px';
+		const pixel = '0px';
+
+		expect( upeUtils.maybeConvertRGBAtoRGB( hex ) ).toEqual( hex );
+		expect( upeUtils.maybeConvertRGBAtoRGB( color ) ).toEqual( color );
+		expect( upeUtils.maybeConvertRGBAtoRGB( rgb ) ).toEqual( rgb );
+		expect( upeUtils.maybeConvertRGBAtoRGB( rgbNoSpaces ) ).toEqual(
+			rgbNoSpaces
+		);
+		expect( upeUtils.maybeConvertRGBAtoRGB( rgba ) ).toEqual( rgb );
+		expect( upeUtils.maybeConvertRGBAtoRGB( rgbaNoSpaces ) ).toEqual( rgb );
+		expect( upeUtils.maybeConvertRGBAtoRGB( shadow ) ).toEqual( shadow );
+		expect( upeUtils.maybeConvertRGBAtoRGB( shadowTransparent ) ).toEqual(
+			shadowTransparent
+		);
+		expect( upeUtils.maybeConvertRGBAtoRGB( pixel ) ).toEqual( pixel );
+	} );
 } );

client/checkout/upe-styles/utils.js

@@ -139,6 +139,26 @@ export const isColorLight = ( color ) => {
 	return tinycolor( color ).getBrightness() > 125;
 };
 
+/**
+ * Converts rgba to rgb format, since Stripe Appearances API does not accept rgba format for text color.
+ *
+ * @param {string} color CSS color value.
+ * @return {string} Accepted CSS color value.
+ */
+export const maybeConvertRGBAtoRGB = ( color ) => {
+	const colorParts = color.match(
+		/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0?(\.\d+)?|1?(\.0+)?)\s*\)$/
+	);
+	if ( colorParts ) {
+		const alpha = colorParts[ 4 ] || 1;
+		const newColorParts = colorParts.slice( 1, 4 ).map( ( part ) => {
+			return Math.round( part * alpha + 255 * ( 1 - alpha ) );
+		} );
+		color = `rgb(${ newColorParts.join( ', ' ) })`;
+	}
+	return color;
+};
+
 /**
  * Modifies the appearance object to include styles for floating label.
  *