Update checkout payment methods design.

assets/js/base/components/cart-checkout/form-step/style.scss

@@ -94,8 +94,4 @@
 		left: -$gap-larger/2;
 		top: 0;
 	}
-
-	&:last-of-type .wc-block-components-checkout-step__container::after {
-		content: none;
-	}
 }

assets/js/base/components/payment-methods/payment-method-tab.js → assets/js/base/components/payment-methods/payment-method-card.js

@@ -16,17 +16,16 @@ import PropTypes from 'prop-types';
 import PaymentMethodErrorBoundary from './payment-method-error-boundary';
 
 /**
- * Component used to render the contents of a payment method tab.
+ * Component used to render the contents of a payment method card.
  *
  * @param {Object}  props                Incoming props for the component.
  * @param {boolean} props.showSaveOption Whether that payment method allows saving
- *                                       the data for future purchases and should
- *                                       display the checkbox to do so.
- * @param {Object}  props.children       Content of the payment method tab.
+ *                                       the data for future purchases.
+ * @param {Object}  props.children       Content of the payment method card.
  *
  * @return {*} The rendered component.
  */
-const PaymentMethodTab = ( { children, showSaveOption } ) => {
+const PaymentMethodCard = ( { children, showSaveOption } ) => {
 	const { isEditor } = useEditorContext();
 	const {
 		shouldSavePayment,
@@ -54,9 +53,9 @@ const PaymentMethodTab = ( { children, showSaveOption } ) => {
 	);
 };
 
-PaymentMethodTab.propTypes = {
+PaymentMethodCard.propTypes = {
 	showSaveOption: PropTypes.bool,
 	children: PropTypes.node,
 };
 
-export default PaymentMethodTab;
+export default PaymentMethodCard;

assets/js/base/components/payment-methods/payment-method-options.js

@@ -8,17 +8,17 @@ import {
 	useEmitResponse,
 } from '@woocommerce/base-hooks';
 import { cloneElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import {
 	useEditorContext,
 	usePaymentMethodDataContext,
 } from '@woocommerce/base-context';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
-import Tabs from '../tabs';
-import PaymentMethodTab from './payment-method-tab';
+import PaymentMethodCard from './payment-method-card';
+import RadioControlAccordion from '../radio-control-accordion';
 
 /**
  * Component used to render all non-saved payment method options.
@@ -28,7 +28,10 @@ import PaymentMethodTab from './payment-method-tab';
 const PaymentMethodOptions = () => {
 	const {
 		setActivePaymentMethod,
+		activeSavedToken,
+		setActiveSavedToken,
 		expressPaymentMethods,
+		customerPaymentMethods,
 	} = usePaymentMethodDataContext();
 	const { paymentMethods } = usePaymentMethods();
 	const {
@@ -42,50 +45,50 @@ const PaymentMethodOptions = () => {
 	const { removeNotice } = useStoreNotices();
 	const { isEditor } = useEditorContext();
 
+	const options = Object.keys( paymentMethods ).map( ( name ) => {
+		const { edit, content, label, supports } = paymentMethods[ name ];
+		const component = isEditor ? edit : content;
+		return {
+			value: name,
+			label:
+				typeof label === 'string'
+					? label
+					: cloneElement( label, {
+							components: paymentMethodInterface.components,
+					  } ),
+			name: `wc-saved-payment-method-token-${ name }`,
+			content: (
+				<PaymentMethodCard allowsSaving={ supports.savePaymentInfo }>
+					{ cloneElement( component, {
+						activePaymentMethod,
+						...paymentMethodInterface,
+					} ) }
+				</PaymentMethodCard>
+			),
+		};
+	} );
+
+	const updateToken = ( value ) => {
+		setActivePaymentMethod( value );
+		setActiveSavedToken( '' );
+		removeNotice( 'wc-payment-error', noticeContexts.PAYMENTS );
+	};
+
+	const isSinglePaymentMethod =
+		Object.keys( customerPaymentMethods ).length === 0 &&
+		Object.keys( paymentMethods ).length === 1;
+
+	const singleOptionClass = classNames( {
+		'disable-radio-control': isSinglePaymentMethod,
+	} );
+
 	return expressPaymentMethodActive ? null : (
-		<Tabs
-			className="wc-block-components-checkout-payment-methods"
-			onSelect={ ( tabName ) => {
-				setActivePaymentMethod( tabName );
-				removeNotice( 'wc-payment-error', noticeContexts.PAYMENTS );
-			} }
-			tabs={ Object.keys( paymentMethods ).map( ( name ) => {
-				const {
-					ariaLabel,
-					edit,
-					content,
-					label,
-					supports,
-				} = paymentMethods[ name ];
-				const component = isEditor ? edit : content;
-				return {
-					name,
-					title:
-						typeof label === 'string'
-							? label
-							: cloneElement( label, {
-									components:
-										paymentMethodInterface.components,
-							  } ),
-					ariaLabel,
-					content: (
-						<PaymentMethodTab
-							showSaveOption={ supports.showSaveOption }
-						>
-							{ cloneElement( component, {
-								activePaymentMethod,
-								...paymentMethodInterface,
-							} ) }
-						</PaymentMethodTab>
-					),
-				};
-			} ) }
-			initialTabName={ activePaymentMethod }
-			ariaLabel={ __(
-				'Payment Methods',
-				'woo-gutenberg-products-block'
-			) }
-			id="wc-block-payment-methods"
+		<RadioControlAccordion
+			id={ 'wc-payment-method-options' }
+			className={ singleOptionClass }
+			selected={ activeSavedToken ? null : activePaymentMethod }
+			onChange={ updateToken }
+			options={ options }
 		/>
 	);
 };

assets/js/base/components/payment-methods/payment-methods.js

@@ -2,7 +2,9 @@
  * External dependencies
  */
 import { usePaymentMethods } from '@woocommerce/base-hooks';
-import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import Label from '@woocommerce/base-components/label';
+import { usePaymentMethodDataContext } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
@@ -18,24 +20,34 @@ import SavedPaymentMethodOptions from './saved-payment-method-options';
  */
 const PaymentMethods = () => {
 	const { isInitialized, paymentMethods } = usePaymentMethods();
-	const [ showNewPaymentMethods, setShowNewPaymentMethods ] = useState(
-		true
-	);
-	const onChange = useCallback(
-		( token ) => {
-			setShowNewPaymentMethods( token === '0' );
-		},
-		[ setShowNewPaymentMethods ]
-	);
+	const { customerPaymentMethods } = usePaymentMethodDataContext();
 
 	if ( isInitialized && Object.keys( paymentMethods ).length === 0 ) {
 		return <NoPaymentMethods />;
 	}
 
 	return (
 		<>
-			<SavedPaymentMethodOptions onChange={ onChange } />
-			{ showNewPaymentMethods && <PaymentMethodOptions /> }
+			<SavedPaymentMethodOptions />
+			{ Object.keys( customerPaymentMethods ).length > 0 && (
+				<Label
+					label={ __(
+						'Use another payment method.',
+						'woo-gutenberg-products-block'
+					) }
+					screenReaderLabel={ __(
+						'Other available payment methods',
+						'woo-gutenberg-products-block'
+					) }
+					wrapperElement="p"
+					wrapperProps={ {
+						className: [
+							'wc-block-components-checkout-step__description wc-block-components-checkout-step__description-payments-aligned',
+						],
+					} }
+				/>
+			) }
+			<PaymentMethodOptions />
 		</>
 	);
 };

assets/js/base/components/payment-methods/saved-payment-method-options.js

@@ -1,15 +1,11 @@
 /**
  * External dependencies
  */
-import { useEffect, useState, useRef, useCallback } from '@wordpress/element';
+import { useEffect, useRef, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	useEditorContext,
-	usePaymentMethodDataContext,
-} from '@woocommerce/base-context';
+import { usePaymentMethodDataContext } from '@woocommerce/base-context';
 import RadioControl from '@woocommerce/base-components/radio-control';
 import { getPaymentMethods } from '@woocommerce/blocks-registry';
-import PropTypes from 'prop-types';
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').CustomerPaymentMethod} CustomerPaymentMethod
@@ -88,14 +84,15 @@ const getDefaultPaymentMethodOptions = (
 	};
 };
 
-const SavedPaymentMethodOptions = ( { onChange } ) => {
-	const { isEditor } = useEditorContext();
+const SavedPaymentMethodOptions = () => {
 	const {
 		setPaymentStatus,
 		customerPaymentMethods,
+		activePaymentMethod,
 		setActivePaymentMethod,
+		activeSavedToken,
+		setActiveSavedToken,
 	} = usePaymentMethodDataContext();
-	const [ selectedToken, setSelectedToken ] = useState( '' );
 	const standardMethods = getPaymentMethods();
 
 	/**
@@ -109,10 +106,9 @@ const SavedPaymentMethodOptions = ( { onChange } ) => {
 			if ( token === '0' ) {
 				setPaymentStatus().started();
 			}
-			setSelectedToken( token );
-			onChange( token );
+			setActiveSavedToken( token );
 		},
-		[ onChange, setSelectedToken, setPaymentStatus ]
+		[ setActiveSavedToken, setPaymentStatus ]
 	);
 
 	useEffect( () => {
@@ -133,7 +129,11 @@ const SavedPaymentMethodOptions = ( { onChange } ) => {
 									setActivePaymentMethod,
 									setPaymentStatus
 							  );
-					if ( paymentMethod.is_default && selectedToken === '' ) {
+					if (
+						! activePaymentMethod &&
+						paymentMethod.is_default &&
+						activeSavedToken === ''
+					) {
 						updateToken( paymentMethod.tokenId + '' );
 						option.onChange( paymentMethod.tokenId );
 					}
@@ -145,31 +145,21 @@ const SavedPaymentMethodOptions = ( { onChange } ) => {
 	}, [
 		customerPaymentMethods,
 		updateToken,
-		selectedToken,
+		activeSavedToken,
+		activePaymentMethod,
 		setActivePaymentMethod,
 		setPaymentStatus,
 		standardMethods,
 	] );
 
-	// In the editor, show `Use a new payment method` option as selected.
-	const selectedOption = isEditor ? '0' : selectedToken + '';
-	const newPaymentMethodOption = {
-		value: '0',
-		label: __( 'Use a new payment method', 'woo-gutenberg-product-blocks' ),
-		name: `wc-saved-payment-method-token-new`,
-	};
 	return currentOptions.current.length > 0 ? (
 		<RadioControl
 			id={ 'wc-payment-method-saved-tokens' }
-			selected={ selectedOption }
+			selected={ activeSavedToken }
 			onChange={ updateToken }
-			options={ [ ...currentOptions.current, newPaymentMethodOption ] }
+			options={ currentOptions.current }
 		/>
 	) : null;
 };
 
-SavedPaymentMethodOptions.propTypes = {
-	onChange: PropTypes.func.isRequired,
-};
-
 export default SavedPaymentMethodOptions;

assets/js/base/components/payment-methods/style.scss

@@ -183,3 +183,67 @@
 		margin-left: $gap-smaller;
 	}
 }
+
+.wc-block-components-radio-control__option-checked.wc-block-components-radio-control__option-checked {
+	font-weight: bold;
+}
+
+.wc-block-checkout__payment-method {
+	.wc-block-components-radio-control__option {
+		padding-left: 44px;
+		&::after {
+			content: none;
+		}
+
+		.wc-block-components-radio-control__input {
+			left: 16px;
+		}
+	}
+
+	.wc-block-components-radio-control__option:last-child,
+	.wc-block-components-radio-control-accordion-option:last-child {
+		border-width: 1px;
+	}
+
+	.wc-block-components-radio-control-accordion-option,
+	.wc-block-components-radio-control__option {
+		border-width: 1px 1px 0 1px;
+		border-style: solid;
+		border-color: $gray-200;
+	}
+
+	.wc-block-components-radio-control-accordion-option {
+		.wc-block-components-radio-control__option {
+			border-width: 0;
+		}
+		.wc-block-components-radio-control__label img {
+			height: 24px;
+		}
+	}
+
+	.wc-block-components-radio-control.disable-radio-control {
+		.wc-block-components-radio-control__option {
+			padding-left: 16px;
+		}
+
+		.wc-block-components-radio-control__input {
+			display: none;
+		}
+	}
+
+	.wc-block-components-checkout-step__description-payments-aligned {
+		padding-top: 14px;
+		height: 28px;
+	}
+
+}
+
+.wc-block-components-radio-control-accordion-content {
+	padding: 8px 16px 16px 16px;
+}
+
+.wc-block-checkout__order-notes {
+	.wc-block-components-checkout-step__content {
+		padding-bottom: 0;
+	}
+}