Integrate express payments buttonAttributes API from the Checkout Block (#3164)

* Render express button with attributes coming from the express checkout

* Remove default height

* Get label from stripe settings

* Only respect button attributes when available

* Remove px from height

* safer type checking

* Remove duplicate comment

* Add an admin notice

* Add an admin notice

* Add admin notice

* Update admin notice

* Update admin notice

* Remove darkMode

---------

Co-authored-by: Diego Curbelo <[email protected]>

Author: Alex Florisca

client/blocks/payment-request/payment-request-express.js

@@ -44,6 +44,7 @@ const PaymentRequestExpressComponent = ( {
 	onClick,
 	onClose,
 	setExpressPaymentError,
+	buttonAttributes,
 } ) => {
 	const stripe = useStripe();
 	const { needsShipping } = shippingData;
@@ -71,20 +72,24 @@ const PaymentRequestExpressComponent = ( {
 
 	// locale is not a valid value for the paymentRequestButton style.
 	// Make sure `theme` defaults to 'dark' if it's not found in the server provided configuration.
-	const {
+	let {
 		type = 'default',
 		theme = 'dark',
 		height = '48',
 	} = getBlocksConfiguration()?.button;
 
+	// If we are on the checkout block, we receive button attributes which overwrite the extension specific settings
+	if ( typeof buttonAttributes !== 'undefined' ) {
+		height = buttonAttributes.height || height;
+	}
+
 	const paymentRequestButtonStyle = {
 		paymentRequestButton: {
 			type,
 			theme,
 			height: `${ height }px`,
 		},
 	};
-
 	const isBranded = getBlocksConfiguration()?.button?.is_branded;
 	const brandedType = getBlocksConfiguration()?.button?.branded_type;
 	const isCustom = getBlocksConfiguration()?.button?.is_custom;

client/entrypoints/payment-request-settings/payment-request-settings-section.js

@@ -1,6 +1,12 @@
+import { ADMIN_URL, getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
 import React, { useMemo } from 'react';
-import { Card, RadioControl, CheckboxControl } from '@wordpress/components';
+import {
+	Card,
+	RadioControl,
+	CheckboxControl,
+	Notice,
+} from '@wordpress/components';
 import interpolateComponents from 'interpolate-components';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
@@ -155,9 +161,21 @@ const PaymentRequestsSettingsSection = () => {
 		}
 	};
 
+	const checkoutPageUrl = `${ ADMIN_URL }post.php?post=${
+		getSetting( 'storePages' )?.checkout?.id
+	}&action=edit`;
+
 	return (
 		<Card className="express-checkout-settings">
 			<CardBody>
+				<Notice status="warning" isDismissible={ false }>
+					{ __(
+						'Some appearance settings may be overridden by the express payment section of the'
+					) }{ ' ' }
+					<a href={ checkoutPageUrl }>
+						{ __( 'Cart & Checkout blocks.' ) }
+					</a>
+				</Notice>
 				<h4>
 					{ __(
 						'Show express checkouts on',

package-lock.json

@@ -94,6 +94,7 @@
     "@stripe/react-stripe-js": "1.4.1",
     "@stripe/stripe-js": "^1.36.0",
     "@testing-library/react-hooks": "^7.0.2",
+    "@woocommerce/settings": "^1.0.0",
     "framer-motion": "^7.6.1",
     "gridicons": "^3.4.0",
     "interpolate-components": "^1.1.1"