Pass appearance data when initiating WooPay via email input (#9310)

Automattic · Aug 23, 2024 · f9fc6a1 · f9fc6a1
1 parent 0d017f6
commit f9fc6a1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/changelog/fix-woopay-themeing-on-email-flow b/changelog/fix-woopay-themeing-on-email-flow
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Pass appearance data when initiating WooPay via the email input flow
diff --git a/client/checkout/woopay/email-input-iframe.js b/client/checkout/woopay/email-input-iframe.js
@@ -6,8 +6,10 @@ import { getConfig } from 'wcpay/utils/checkout';
 import { recordUserEvent, getTracksIdentity } from 'tracks';
 import request from '../utils/request';
 import { buildAjaxURL } from 'utils/express-checkout';
+import { getAppearance } from 'checkout/upe-styles';
 import {
 	getTargetElement,
+	getAppearanceType,
 	validateEmail,
 	appendRedirectionParams,
 	shouldSkipWooPay,
@@ -177,6 +179,7 @@ export const handleWooPayEmailInput = async (
 	iframe.addEventListener( 'load', () => {
 		// Set the initial value.
 		iframeHeaderValue = true;
+		const appearanceType = getAppearanceType();
 
 		if ( getConfig( 'isWoopayFirstPartyAuthEnabled' ) ) {
 			request(
@@ -186,6 +189,9 @@ export const handleWooPayEmailInput = async (
 					order_id: getConfig( 'order_id' ),
 					key: getConfig( 'key' ),
 					billing_email: getConfig( 'billing_email' ),
+					appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
+						? getAppearance( appearanceType )
+						: null,
 				}
 			).then( ( response ) => {
 				if ( response?.data?.session ) {