POC: Multiple instances of single-method UPE at checkout

.github/workflows/e2e-pull-request.yml

@@ -30,8 +30,13 @@ jobs:
     strategy:
       fail-fast:     false
       matrix:
-        test_groups:   [ 'wcpay', 'subscriptions' ] # [TODO] Unskip blocks tests after investigating constant failures.
+        test_groups:   [ 'wcpay', 'subscriptions', 'upe', 'upeSplit' ] # [TODO] Unskip blocks tests after investigating constant failures.
         test_branches: [ 'merchant', 'shopper' ]
+        exclude:
+          - test_groups: 'upe'
+            test_branches: 'merchant'
+          - test_groups: 'upeSplit'
+            test_branches: 'merchant'
 
     name: WC - latest | ${{ matrix.test_groups }} - ${{ matrix.test_branches }}
 

changelog/split-upe

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+The UPE is now the default checkout experience for newly onboarded merchants. It can sbe disabled with these instructions: https://woocommerce.com/?p=3337362#disabling

client/checkout/api/index.js

@@ -57,7 +57,11 @@ export default class WCPayAPI {
 			isStripeLinkEnabled,
 		} = this.options;
 
-		if ( forceNetworkSavedCards && ! forceAccountRequest ) {
+		if (
+			forceNetworkSavedCards &&
+			! forceAccountRequest &&
+			! isUPEEnabled
+		) {
 			if ( ! this.stripePlatform ) {
 				this.stripePlatform = this.createStripe(
 					publishableKey,
@@ -331,13 +335,17 @@ export default class WCPayAPI {
 	/**
 	 * Creates a setup intent without confirming it.
 	 *
+	 * @param {string} paymentMethodType Stripe payment method type ID.
 	 * @return {Promise} The final promise for the request to the server.
 	 */
-	initSetupIntent() {
-		return this.request(
-			buildAjaxURL( getConfig( 'wcAjaxUrl' ), 'init_setup_intent' ),
-			{ _ajax_nonce: getConfig( 'createSetupIntentNonce' ) }
-		).then( ( response ) => {
+	initSetupIntent( paymentMethodType = '' ) {
+		let path = 'init_setup_intent';
+		if ( this.options.isUPESplitEnabled && paymentMethodType ) {
+			path += `_${ paymentMethodType }`;
+		}
+		return this.request( buildAjaxURL( getConfig( 'wcAjaxUrl' ), path ), {
+			_ajax_nonce: getConfig( 'createSetupIntentNonce' ),
+		} ).then( ( response ) => {
 			if ( ! response.success ) {
 				throw response.data.error;
 			}
@@ -384,19 +392,28 @@ export default class WCPayAPI {
 	/**
 	 * Creates an intent based on a payment method.
 	 *
-	 * @param {string} fingerprint User fingerprint.
-	 * @param {int?} orderId The id of the order if creating the intent on Order Pay page.
+	 * @param {Object} options Object containing intent optional parameters (fingerprint, paymentMethodType, orderId)
 	 *
 	 * @return {Promise} The final promise for the request to the server.
 	 */
-	createIntent( fingerprint = '', orderId ) {
+	createIntent( options ) {
+		const { fingerprint, paymentMethodType, orderId } = options;
+		let path = 'create_payment_intent';
+		const params = {
+			_ajax_nonce: getConfig( 'createPaymentIntentNonce' ),
+			'wcpay-fingerprint': fingerprint,
+		};
+
+		if ( this.options.isUPESplitEnabled && paymentMethodType ) {
+			path += `_${ paymentMethodType }`;
+		}
+		if ( orderId ) {
+			params.wcpay_order_id = orderId;
+		}
+
 		return this.request(
-			buildAjaxURL( getConfig( 'wcAjaxUrl' ), 'create_payment_intent' ),
-			{
-				wcpay_order_id: orderId,
-				_ajax_nonce: getConfig( 'createPaymentIntentNonce' ),
-				'wcpay-fingerprint': fingerprint,
-			}
+			buildAjaxURL( getConfig( 'wcAjaxUrl' ), path ),
+			params
 		)
 			.then( ( response ) => {
 				if ( ! response.success ) {
@@ -434,18 +451,19 @@ export default class WCPayAPI {
 		paymentCountry,
 		fingerprint
 	) {
-		return this.request(
-			buildAjaxURL( getConfig( 'wcAjaxUrl' ), 'update_payment_intent' ),
-			{
-				wcpay_order_id: orderId,
-				wc_payment_intent_id: paymentIntentId,
-				save_payment_method: savePaymentMethod,
-				wcpay_selected_upe_payment_type: selectedUPEPaymentType,
-				wcpay_payment_country: paymentCountry,
-				_ajax_nonce: getConfig( 'updatePaymentIntentNonce' ),
-				'wcpay-fingerprint': fingerprint,
-			}
-		)
+		let path = 'update_payment_intent';
+		if ( this.options.isUPESplitEnabled ) {
+			path += `_${ selectedUPEPaymentType }`;
+		}
+		return this.request( buildAjaxURL( getConfig( 'wcAjaxUrl' ), path ), {
+			wcpay_order_id: orderId,
+			wc_payment_intent_id: paymentIntentId,
+			save_payment_method: savePaymentMethod,
+			wcpay_selected_upe_payment_type: selectedUPEPaymentType,
+			wcpay_payment_country: paymentCountry,
+			_ajax_nonce: getConfig( 'updatePaymentIntentNonce' ),
+			'wcpay-fingerprint': fingerprint,
+		} )
 			.then( ( response ) => {
 				if ( 'failure' === response.result ) {
 					throw new Error( response.messages );

client/checkout/blocks/fields.js

@@ -7,6 +7,7 @@ import {
 	CardElement,
 } from '@stripe/react-stripe-js';
 import { useEffect, useState } from '@wordpress/element';
+import { getConfig } from 'utils/checkout';
 
 /**
  * Internal dependencies
@@ -30,6 +31,18 @@ const WCPayFields = ( {
 	shouldSavePayment,
 } ) => {
 	const [ errorMessage, setErrorMessage ] = useState( null );
+	const isTestMode = getConfig( 'testMode' );
+	const testingInstructions = (
+		<p>
+			<strong>Test mode:</strong> use the test VISA card 4242424242424242
+			with any expiry date and CVC, or any test card numbers listed{ ' ' }
+			<a href="https://woocommerce.com/document/payments/testing/#test-cards">
+				here
+			</a>
+			.
+		</p>
+	);
+
 	const [ fingerprint, fingerprintErrorMessage ] = useFingerprint();
 
 	useEffect( () => {
@@ -92,12 +105,15 @@ const WCPayFields = ( {
 	};
 
 	return (
-		<div className="wc-block-gateway-container wc-inline-card-element">
-			<CardElement
-				options={ elementOptions }
-				onChange={ checkForErrors }
-			/>
-		</div>
+		<>
+			{ isTestMode ? testingInstructions : '' }
+			<div className="wc-block-gateway-container wc-inline-card-element">
+				<CardElement
+					options={ elementOptions }
+					onChange={ checkForErrors }
+				/>
+			</div>
+		</>
 	);
 };
 

client/checkout/blocks/generate-payment-method.js

@@ -47,7 +47,7 @@ const generatePaymentMethod = async (
 			type: 'success',
 			meta: {
 				paymentMethodData: {
-					paymentMethod: PAYMENT_METHOD_NAME_CARD,
+					payment_method: PAYMENT_METHOD_NAME_CARD,
 					'wcpay-payment-method': id,
 					'wcpay-fraud-prevention-token': fraudPreventionToken ?? '',
 					'wcpay-fingerprint': fingerprint,

client/checkout/blocks/index.js

@@ -42,11 +42,25 @@ registerPaymentMethod( {
 	savedTokenComponent: <SavedTokenHandler api={ api } />,
 	canMakePayment: () => !! api.getStripe(),
 	paymentMethodId: PAYMENT_METHOD_NAME_CARD,
-	label: __( 'Credit card', 'woocommerce-payments' ),
+	// see .wc-block-checkout__payment-method styles in blocks/style.scss
+	label: (
+		<>
+			<span>
+				{ __( 'Credit card', 'woocommerce-payments' ) }
+				<img
+					src={ getConfig( 'icon' ) }
+					alt={ __( 'Credit card', 'woocommerce-payments' ) }
+				/>
+			</span>
+		</>
+	),
 	ariaLabel: __( 'Credit card', 'woocommerce-payments' ),
 	supports: {
 		showSavedCards: getConfig( 'isSavedCardsEnabled' ) ?? false,
-		showSaveOption: getConfig( 'isSavedCardsEnabled' ) ?? false,
+		showSaveOption:
+			( getConfig( 'isSavedCardsEnabled' ) &&
+				! getConfig( 'isPlatformCheckoutEnabled' ) ) ??
+			false,
 		features: getConfig( 'features' ),
 	},
 } );

client/checkout/blocks/style.scss

@@ -39,4 +39,16 @@ button.wcpay-stripelink-modal-trigger:hover {
 	background-color: transparent;
 	border-color: transparent;
 }
+
+.wc-block-checkout__payment-method
+	.wc-block-components-radio-control__label
+	span {
+	width: 95%;
+
+	img {
+		float: right;
+	}
+}
+
 @import '../platform-checkout/style';
+@import '../../components/loadable/style';

client/checkout/blocks/upe-fields.js

@@ -315,13 +315,8 @@ const WCPayUPEFields = ( {
 	// Checks whether there are errors within a field, and saves them for later reporting.
 	const upeOnChange = ( event ) => {
 		// Update WC Blocks gateway config based on selected UPE payment method.
-		if (
-			getConfig( 'isSavedCardsEnabled' ) &&
-			! getConfig( 'cartContainsSubscription' )
-		) {
-			gatewayConfig.supports.showSaveOption =
-				paymentMethodsConfig[ event.value.type ].isReusable;
-		}
+		gatewayConfig.supports.showSaveOption =
+			paymentMethodsConfig[ event.value.type ].showSaveOption;
 
 		setIsUPEComplete( event.complete );
 		setSelectedUPEPaymentType( event.value.type );