Merge remote-tracking branch 'origin/release/6.8.0' into trunk

Author: lovo-h

changelog.txt

@@ -1,5 +1,9 @@
 *** Changelog ***
 
+= 6.8.0 - 2022-09-28 =
+* Fix - Minor adjustments for Custom Order Tables compatibility.
+* Fix - Upgrade from Payment Element beta.
+
 = 6.7.0 - 2022-09-06 =
 * Fix - Check payment method before updating payment method title.
 * Fix - Use the eslint config at the root of the repo.

client/api/index.js

@@ -68,12 +68,10 @@ export default class WCStripeAPI {
 			undefined !== paymentMethodsConfig.card &&
 			undefined !== paymentMethodsConfig.link;
 		if ( ! this.stripe ) {
-			if ( isUPEEnabled ) {
-				let betas = [ 'payment_element_beta_1' ];
-				if ( isStripeLinkEnabled ) {
-					betas = betas.concat( [ 'link_autofill_modal_beta_1' ] );
-				}
-				this.stripe = this.createStripe( key, locale, betas );
+			if ( isUPEEnabled && isStripeLinkEnabled ) {
+				this.stripe = this.createStripe( key, locale, [
+					'link_autofill_modal_beta_1',
+				] );
 			} else {
 				this.stripe = this.createStripe( key, locale );
 			}
@@ -306,12 +304,14 @@ export default class WCStripeAPI {
 	 * Saves the calculated UPE appearance values in a transient.
 	 *
 	 * @param {Object} appearance The UPE appearance object with style values
+	 * @param {boolean} isBlocksCheckout True if save request is for Blocks Checkout. Default false.
 	 *
 	 * @return {Promise} The final promise for the request to the server.
 	 */
-	saveUPEAppearance( appearance ) {
+	saveUPEAppearance( appearance, isBlocksCheckout = false ) {
 		return this.request( this.getAjaxUrl( 'save_upe_appearance' ), {
-			appearance,
+			is_blocks_checkout: isBlocksCheckout,
+			appearance: JSON.stringify( appearance ),
 			_ajax_nonce: this.options?.saveUPEAppearanceNonce,
 		} )
 			.then( ( response ) => {

client/blocks/upe/confirm-upe-payment.js

@@ -4,7 +4,7 @@
  * @param {Object}   api            The API used for connection both with the server and Stripe.
  * @param {string}   redirectUrl    The URL to redirect to after confirming the intent on Stripe.
  * @param {boolean}  paymentNeeded  A boolean whether a payment or a setup confirmation is needed.
- * @param {Object}   paymentElement Reference to the UPE element mounted on the page.
+ * @param {Object}   elements       Reference to the Stripe elements.
  * @param {Object}   billingData    An object containing the customer's billing data.
  * @param {Object}   emitResponse   Various helpers for usage with observer response objects.
  * @return {Object}                An object, which contains the result from the action.
@@ -13,7 +13,7 @@ export const confirmUpePayment = async (
 	api,
 	redirectUrl,
 	paymentNeeded,
-	paymentElement,
+	elements,
 	billingData,
 	emitResponse
 ) => {
@@ -41,7 +41,7 @@ export const confirmUpePayment = async (
 
 		if ( paymentNeeded ) {
 			const { error } = await api.getStripe().confirmPayment( {
-				element: paymentElement,
+				elements,
 				confirmParams,
 			} );
 
@@ -50,7 +50,7 @@ export const confirmUpePayment = async (
 			}
 		} else {
 			const { error } = await api.getStripe().confirmSetup( {
-				element: paymentElement,
+				elements,
 				confirmParams,
 			} );
 

client/blocks/upe/fields.js

@@ -3,10 +3,11 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	Elements,
-	ElementsConsumer,
+	useStripe,
+	useElements,
 	PaymentElement,
 } from '@stripe/react-stripe-js';
-import { getAppearance } from '../../styles/upe';
+import { getFontRulesFromPage, getAppearance } from '../../styles/upe';
 import { confirmUpePayment } from './confirm-upe-payment';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 import {
@@ -52,58 +53,26 @@ const UPEField = ( {
 	api,
 	activePaymentMethod,
 	billing: { billingData },
-	elements,
-	emitResponse,
 	eventRegistration: {
 		onPaymentProcessing,
 		onCheckoutAfterProcessingWithSuccess,
 	},
+	emitResponse,
+	paymentIntentId,
+	errorMessage,
 	shouldSavePayment,
-	stripe,
 } ) => {
-	const [ clientSecret, setClientSecret ] = useState( null );
-	const [ paymentIntentId, setPaymentIntentId ] = useState( null );
+	const stripe = useStripe();
+	const elements = useElements();
+
 	const [ selectedUpePaymentType, setSelectedUpePaymentType ] = useState(
 		''
 	);
-	const [ hasRequestedIntent, setHasRequestedIntent ] = useState( false );
 	const [ isUpeComplete, setIsUpeComplete ] = useState( false );
-	const [ errorMessage, setErrorMessage ] = useState( null );
 
 	const paymentMethodsConfig = getBlocksConfiguration()?.paymentMethodsConfig;
 
-	useEffect( () => {
-		if ( paymentIntentId || hasRequestedIntent ) {
-			return;
-		}
-
-		async function createIntent() {
-			try {
-				const paymentNeeded = getBlocksConfiguration()?.isPaymentNeeded;
-				const response = paymentNeeded
-					? await api.createIntent(
-							getBlocksConfiguration()?.orderId
-					  )
-					: await api.initSetupIntent();
-				setPaymentIntentId( response.id );
-				setClientSecret( response.client_secret );
-			} catch ( error ) {
-				setErrorMessage(
-					error?.message ??
-						__(
-							'There was an error loading the payment gateway',
-							'woocommerce-gateway-stripe'
-						)
-				);
-			}
-		}
-
-		setHasRequestedIntent( true );
-		createIntent();
-	}, [ paymentIntentId, hasRequestedIntent, api, errorMessage ] );
-
 	const customerData = useCustomerData();
-
 	useEffect( () => {
 		if (
 			paymentMethodsConfig.link !== undefined &&
@@ -126,9 +95,6 @@ const UPEField = ( {
 				country: 'components-form-token-input-2',
 			};
 
-			const appearance = getAppearance();
-			elements.update( { appearance } );
-
 			enableStripeLinkPaymentMethod( {
 				api,
 				elements,
@@ -296,15 +262,11 @@ const UPEField = ( {
 							selectedUpePaymentType
 						);
 
-						const paymentElement = elements.getElement(
-							PaymentElement
-						);
-
 						return confirmUpePayment(
 							api,
 							paymentDetails.redirect_url,
 							paymentDetails.payment_needed,
-							paymentElement,
+							elements,
 							billingData,
 							emitResponse
 						);
@@ -327,7 +289,6 @@ const UPEField = ( {
 
 	const enabledBillingFields = getBlocksConfiguration().enabledBillingFields;
 	const elementOptions = {
-		clientSecret,
 		business: { name: getBlocksConfiguration()?.accountDescriptor },
 		fields: {
 			billingDetails: {
@@ -368,6 +329,70 @@ const UPEField = ( {
 		},
 	};
 
+	return (
+		<div className="wc-block-gateway-container">
+			<PaymentElement
+				options={ elementOptions }
+				onChange={ ( event ) => {
+					setIsUpeComplete( event.complete );
+					setSelectedUpePaymentType( event.value.type );
+				} }
+			/>
+		</div>
+	);
+};
+
+export const UPEPaymentForm = ( { api, ...props } ) => {
+	const [ clientSecret, setClientSecret ] = useState( null );
+	const [ paymentIntentId, setPaymentIntentId ] = useState( null );
+	const [ hasRequestedIntent, setHasRequestedIntent ] = useState( false );
+	const [ errorMessage, setErrorMessage ] = useState( null );
+	const [ appearance, setAppearance ] = useState(
+		getBlocksConfiguration()?.wcBlocksUPEAppearance
+	);
+
+	useEffect( () => {
+		async function generateUPEAppearance() {
+			// Generate UPE input styles.
+			const upeAppearance = getAppearance( true );
+			await api.saveUPEAppearance( upeAppearance, true );
+
+			// Update appearance state
+			setAppearance( upeAppearance );
+		}
+		if ( ! appearance ) {
+			generateUPEAppearance();
+		}
+
+		if ( paymentIntentId || hasRequestedIntent ) {
+			return;
+		}
+
+		async function createIntent() {
+			try {
+				const paymentNeeded = getBlocksConfiguration()?.isPaymentNeeded;
+				const response = paymentNeeded
+					? await api.createIntent(
+							getBlocksConfiguration()?.orderId
+					  )
+					: await api.initSetupIntent();
+				setPaymentIntentId( response.id );
+				setClientSecret( response.client_secret );
+			} catch ( error ) {
+				setErrorMessage(
+					error?.message ??
+						__(
+							'There was an error loading the payment gateway',
+							'woocommerce-gateway-stripe'
+						)
+				);
+			}
+		}
+
+		setHasRequestedIntent( true );
+		createIntent();
+	}, [ paymentIntentId, hasRequestedIntent, api, errorMessage, appearance ] );
+
 	if ( ! clientSecret ) {
 		if ( errorMessage ) {
 			return (
@@ -382,32 +407,20 @@ const UPEField = ( {
 		return null;
 	}
 
-	return (
-		<div className="wc-block-gateway-container">
-			<PaymentElement
-				options={ elementOptions }
-				onChange={ ( event ) => {
-					setIsUpeComplete( event.complete );
-					setSelectedUpePaymentType( event.value.type );
-				} }
-			/>
-		</div>
-	);
-};
+	const options = {
+		clientSecret,
+		appearance,
+		fonts: getFontRulesFromPage(),
+	};
 
-export const UPEPaymentForm = ( { api, ...props } ) => {
 	return (
-		<Elements stripe={ api.getStripe() }>
-			<ElementsConsumer>
-				{ ( { stripe, elements } ) => (
-					<UPEField
-						api={ api }
-						elements={ elements }
-						stripe={ stripe }
-						{ ...props }
-					/>
-				) }
-			</ElementsConsumer>
+		<Elements stripe={ api.getStripe() } options={ options }>
+			<UPEField
+				api={ api }
+				paymentIntentId={ paymentIntentId }
+				errorMessage={ errorMessage }
+				{ ...props }
+			/>
 		</Elements>
 	);
 };