Checkout: Decouple existingCardProcessor from checkout

client/me/purchases/manage-purchase/change-payment-method/index.jsx

@@ -183,7 +183,7 @@ function ChangePaymentMethodList( {
 	const currentlyAssignedPaymentMethodId = 'existingCard-' + currentPaymentMethod.stored_details_id; // TODO: make this work for paypal.
 
 	const translate = useTranslate();
-	const { isStripeLoading } = useStripe();
+	const { isStripeLoading, stripe, stripeConfiguration } = useStripe();
 	const paymentMethods = useAssignablePaymentMethods();
 
 	const showErrorMessage = useCallback( ( error ) => {
@@ -218,7 +218,10 @@ function ChangePaymentMethodList( {
 			paymentProcessors={ {
 				'existing-card': ( data ) => assignExistingCardProcessor( purchase, data ),
 				card: ( data ) =>
-					assignNewCardProcessor( { purchase, translate, siteSlug, apiParams }, data ),
+					assignNewCardProcessor(
+						{ purchase, translate, siteSlug, apiParams, stripe, stripeConfiguration },
+						data
+					),
 			} }
 			isLoading={ isStripeLoading }
 			initiallySelectedPaymentMethodId={ currentlyAssignedPaymentMethodId }
@@ -252,8 +255,8 @@ async function assignExistingCardProcessor( purchase, { storedDetailsId } ) {
 }
 
 async function assignNewCardProcessor(
-	{ purchase, translate, siteSlug, apiParams },
-	{ stripe, stripeConfiguration, name, countryCode, postalCode }
+	{ purchase, translate, siteSlug, apiParams, stripe, stripeConfiguration },
+	{ name, countryCode, postalCode }
 ) {
 	const createStripeSetupIntentAsync = async ( paymentDetails ) => {
 		const { country, 'postal-code': zip } = paymentDetails;

client/my-sites/checkout/composite-checkout/composite-checkout.tsx

@@ -51,11 +51,11 @@ import {
 	freePurchaseProcessor,
 	multiPartnerCardProcessor,
 	fullCreditsProcessor,
-	existingCardProcessor,
 	payPalProcessor,
 	genericRedirectProcessor,
 	weChatProcessor,
 } from './payment-method-processors';
+import existingCardProcessor from './lib/existing-card-processor';
 import useGetThankYouUrl from './hooks/use-get-thank-you-url';
 import createAnalyticsEventHandler from './record-analytics';
 import { useProductVariants } from './hooks/product-variants';
@@ -84,6 +84,9 @@ import { WPCOMCartItem } from './types/checkout-cart';
 import doesValueExist from './lib/does-value-exist';
 import EmptyCart from './components/empty-cart';
 import getContactDetailsType from './lib/get-contact-details-type';
+import getDomainDetails from './lib/get-domain-details';
+import getPostalCode from './lib/get-postal-code';
+import mergeIfObjects from './lib/merge-if-objects';
 import type { ReactStandardAction } from './types/analytics';
 import useCreatePaymentCompleteCallback from './hooks/use-create-payment-complete-callback';
 
@@ -139,7 +142,6 @@ export default function CompositeCheckout( {
 	const isPrivate = useSelector( ( state ) => siteId && isPrivateSite( state, siteId ) ) || false;
 	const { stripe, stripeConfiguration, isStripeLoading, stripeLoadingError } = useStripe();
 	const createUserAndSiteBeforeTransaction = Boolean( isLoggedOutCart || isNoSiteCart );
-	const transactionOptions = { createUserAndSiteBeforeTransaction };
 	const reduxDispatch = useDispatch();
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const recordEvent: ( action: ReactStandardAction ) => void = useCallback(
@@ -356,6 +358,7 @@ export default function CompositeCheckout( {
 
 	const contactInfo: ManagedContactDetails | undefined = select( 'wpcom' )?.getContactInfo();
 	const countryCode: string = contactInfo?.countryCode?.value ?? '';
+	const subdivisionCode: string = contactInfo?.state?.value ?? '';
 
 	const paymentMethods = arePaymentMethodsLoading
 		? []
@@ -416,13 +419,22 @@ export default function CompositeCheckout( {
 	const contactDetailsType = getContactDetailsType( responseCart );
 	const includeDomainDetails = contactDetailsType === 'domain';
 	const includeGSuiteDetails = contactDetailsType === 'gsuite';
+	const transactionOptions = { createUserAndSiteBeforeTransaction };
 	const dataForProcessor = useMemo(
 		() => ( {
 			includeDomainDetails,
 			includeGSuiteDetails,
 			recordEvent,
+			createUserAndSiteBeforeTransaction,
+			stripeConfiguration,
 		} ),
-		[ includeDomainDetails, includeGSuiteDetails, recordEvent ]
+		[
+			includeDomainDetails,
+			includeGSuiteDetails,
+			recordEvent,
+			createUserAndSiteBeforeTransaction,
+			stripeConfiguration,
+		]
 	);
 	const dataForRedirectProcessor = useMemo(
 		() => ( {
@@ -433,6 +445,16 @@ export default function CompositeCheckout( {
 		[ dataForProcessor, getThankYouUrl, siteSlug ]
 	);
 
+	const domainDetails = useMemo(
+		() =>
+			getDomainDetails( {
+				includeDomainDetails,
+				includeGSuiteDetails,
+			} ),
+		[ includeGSuiteDetails, includeDomainDetails ]
+	);
+	const postalCode = getPostalCode();
+
 	const paymentProcessors = useMemo(
 		() => ( {
 			'apple-pay': ( transactionData: unknown ) =>
@@ -466,15 +488,35 @@ export default function CompositeCheckout( {
 			'full-credits': ( transactionData: unknown ) =>
 				fullCreditsProcessor( transactionData, dataForProcessor, transactionOptions ),
 			'existing-card': ( transactionData: unknown ) =>
-				existingCardProcessor( transactionData, dataForProcessor, transactionOptions ),
+				existingCardProcessor(
+					mergeIfObjects( transactionData, {
+						country: countryCode,
+						postalCode,
+						subdivisionCode,
+						siteId: siteId ? String( siteId ) : undefined,
+						domainDetails,
+					} ),
+					dataForProcessor
+				),
 			paypal: ( transactionData: unknown ) =>
 				payPalProcessor(
 					transactionData,
 					{ ...dataForProcessor, getThankYouUrl, couponItem },
 					transactionOptions
 				),
 		} ),
-		[ couponItem, dataForProcessor, dataForRedirectProcessor, getThankYouUrl, transactionOptions ]
+		[
+			siteId,
+			couponItem,
+			dataForProcessor,
+			dataForRedirectProcessor,
+			getThankYouUrl,
+			transactionOptions,
+			countryCode,
+			subdivisionCode,
+			postalCode,
+			domainDetails,
+		]
 	);
 
 	const jetpackColors = isJetpackNotAtomic

client/my-sites/checkout/composite-checkout/lib/existing-card-processor.ts

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import debugFactory from 'debug';
+import { makeSuccessResponse, makeRedirectResponse } from '@automattic/composite-checkout';
+import { confirmStripePaymentIntent } from '@automattic/calypso-stripe';
+import type { PaymentProcessorResponse } from '@automattic/composite-checkout';
+
+/**
+ * Internal dependencies
+ */
+import { createTransactionEndpointRequestPayloadFromLineItems } from './translate-cart';
+import { wpcomTransaction } from '../payment-method-helpers';
+import type { PaymentProcessorOptions } from '../types/payment-processors';
+import type { ExistingCardTransactionRequestWithLineItems } from '../types/transaction-endpoint';
+
+const debug = debugFactory( 'calypso:composite-checkout:payment-method-helpers' );
+
+export default async function existingCardProcessor(
+	transactionData: unknown,
+	dataForProcessor: PaymentProcessorOptions
+): Promise< PaymentProcessorResponse > {
+	if ( ! isValidTransactionData( transactionData ) ) {
+		throw new Error( 'Required purchase data is missing' );
+	}
+	const { stripeConfiguration, recordEvent } = dataForProcessor;
+	if ( ! stripeConfiguration ) {
+		throw new Error( 'Stripe configuration is required' );
+	}
+	return submitExistingCardPayment( transactionData, dataForProcessor )
+		.then( ( stripeResponse ) => {
+			if ( stripeResponse?.message?.payment_intent_client_secret ) {
+				// 3DS authentication required
+				recordEvent( { type: 'SHOW_MODAL_AUTHORIZATION' } );
+				return confirmStripePaymentIntent(
+					stripeConfiguration,
+					stripeResponse?.message?.payment_intent_client_secret
+				);
+			}
+			return stripeResponse;
+		} )
+		.then( ( stripeResponse ) => {
+			if ( stripeResponse?.redirect_url ) {
+				return makeRedirectResponse( stripeResponse.redirect_url );
+			}
+			return makeSuccessResponse( stripeResponse );
+		} );
+}
+
+async function submitExistingCardPayment(
+	transactionData: ExistingCardTransactionRequest,
+	transactionOptions: PaymentProcessorOptions
+) {
+	debug( 'formatting existing card transaction', transactionData );
+	const formattedTransactionData = createTransactionEndpointRequestPayloadFromLineItems( {
+		...transactionData,
+		paymentMethodType: 'WPCOM_Billing_MoneyPress_Stored',
+	} );
+	debug( 'submitting existing card transaction', formattedTransactionData );
+
+	return wpcomTransaction( formattedTransactionData, transactionOptions );
+}
+
+type ExistingCardTransactionRequest = Omit<
+	ExistingCardTransactionRequestWithLineItems,
+	'paymentMethodType'
+>;
+
+function isValidTransactionData(
+	submitData: unknown
+): submitData is ExistingCardTransactionRequest {
+	const data = submitData as ExistingCardTransactionRequest;
+	if ( ! ( data?.items?.length > 0 ) ) {
+		throw new Error( 'Transaction requires items and none were provided' );
+	}
+	// Validate data required for this payment method type. Some other data may
+	// be required by the server but not required here since the server will give
+	// a better localized error message than we can provide.
+	if ( ! data.siteId ) {
+		throw new Error( 'Transaction requires siteId and none was provided' );
+	}
+	if ( ! data.country ) {
+		throw new Error( 'Transaction requires country code and none was provided' );
+	}
+	if ( ! data.postalCode ) {
+		throw new Error( 'Transaction requires postal code and none was provided' );
+	}
+	if ( ! data.storedDetailsId ) {
+		throw new Error( 'Transaction requires saved card information and none was provided' );
+	}
+	if ( ! data.name ) {
+		throw new Error( 'Transaction requires cardholder name and none was provided' );
+	}
+	if ( ! data.paymentMethodToken ) {
+		throw new Error( 'Transaction requires a Stripe token and none was provided' );
+	}
+	if ( ! data.paymentPartnerProcessorId ) {
+		throw new Error( 'Transaction requires a processor id and none was provided' );
+	}
+	return true;
+}

client/my-sites/checkout/composite-checkout/lib/get-domain-details.ts

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { defaultRegistry } from '@automattic/composite-checkout';
+import type { DomainContactDetails } from '@automattic/shopping-cart';
+
+/**
+ * Internal dependencies
+ */
+import { prepareDomainContactDetailsForTransaction } from 'calypso/my-sites/checkout/composite-checkout/types/wpcom-store-state';
+import type { ManagedContactDetails } from '../types/wpcom-store-state';
+
+const { select } = defaultRegistry;
+
+export default function getDomainDetails( {
+	includeDomainDetails,
+	includeGSuiteDetails,
+}: {
+	includeDomainDetails: boolean;
+	includeGSuiteDetails: boolean;
+} ): DomainContactDetails | undefined {
+	const managedContactDetails: ManagedContactDetails | undefined = select(
+		'wpcom'
+	)?.getContactInfo();
+	if ( ! managedContactDetails ) {
+		return undefined;
+	}
+	const domainDetails = prepareDomainContactDetailsForTransaction( managedContactDetails );
+	return includeDomainDetails || includeGSuiteDetails ? domainDetails : undefined;
+}

client/my-sites/checkout/composite-checkout/lib/get-postal-code.ts

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { defaultRegistry } from '@automattic/composite-checkout';
+
+/**
+ * Internal dependencies
+ */
+import { tryToGuessPostalCodeFormat } from 'calypso/lib/postal-code';
+import type { ManagedContactDetails } from '../types/wpcom-store-state';
+
+const { select } = defaultRegistry;
+
+export default function getPostalCode(): string {
+	const managedContactDetails: ManagedContactDetails | undefined = select(
+		'wpcom'
+	)?.getContactInfo();
+	if ( ! managedContactDetails ) {
+		return '';
+	}
+	const countryCode = managedContactDetails.countryCode?.value ?? '';
+	const postalCode = managedContactDetails.postalCode?.value ?? '';
+	return tryToGuessPostalCodeFormat( postalCode.toUpperCase(), countryCode );
+}

client/my-sites/checkout/composite-checkout/lib/merge-if-objects.ts

@@ -0,0 +1,10 @@
+export default function mergeIfObjects( ...objects: unknown[] ): MergedObject {
+	return objects.reduce( ( merged: MergedObject, obj: unknown ): MergedObject => {
+		if ( typeof obj !== 'object' ) {
+			return merged;
+		}
+		return { ...merged, ...obj };
+	}, {} );
+}
+
+type MergedObject = Record< string, unknown >;