POC - Centralized payment method definitions

changelog/poc-centralized-payment-method-definitions

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add centralized payment method definitions to streamline implementation and maintenance of payment methods.

client/globals.d.ts

@@ -155,6 +155,11 @@ declare global {
 		timeFormat: string;
 	};
 
+	const woopaymentsPaymentMethodDefinitions: Record<
+		string,
+		PaymentMethodDefinition
+	>;
+
 	const wc: {
 		wcSettings: typeof wcSettingsModule;
 		tracks: {

client/payment-methods-map.tsx

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -29,17 +31,39 @@ import {
 
 const accountCountry = window.wcpaySettings?.accountStatus?.country || 'US';
 
-export interface PaymentMethodMapEntry {
-	id: string;
-	label: string;
-	description: string;
-	icon: ReactImgFuncComponent;
-	currencies: string[];
-	stripe_key: string;
-	allows_manual_capture: boolean;
-	allows_pay_later: boolean;
-	accepts_only_domestic_payment: boolean;
-}
+import type { PaymentMethodMapEntry } from './types/payment-methods';
+
+// Get any payment method definitions from the client.
+const PaymentMethodDefinitions =
+	typeof woopaymentsPaymentMethodDefinitions !== 'undefined'
+		? woopaymentsPaymentMethodDefinitions
+		: {};
+
+const convertedPaymentMethodDefinitions = Object.fromEntries(
+	Object.entries( PaymentMethodDefinitions ).map( ( [ key, value ] ) => [
+		key,
+		{
+			id: value.id,
+			label: value.title,
+			description: value.description,
+			icon: ( { className } ) => (
+				<img
+					src={ value.icon }
+					alt={ value.title }
+					className={ classNames(
+						'payment-method__icon',
+						className
+					) }
+				/>
+			),
+			currencies: value.currencies,
+			stripe_key: value.stripeId,
+			allows_manual_capture: value.allows_manual_capture,
+			allows_pay_later: value.allows_pay_later,
+			accepts_only_domestic_payment: value.accepts_only_domestic_payment,
+		} as PaymentMethodMapEntry,
+	] )
+);
 
 const PaymentMethodInformationObject: Record<
 	string,
@@ -292,6 +316,7 @@ const PaymentMethodInformationObject: Record<
 		allows_pay_later: false,
 		accepts_only_domestic_payment: false,
 	},
+	...convertedPaymentMethodDefinitions,
 };
 
 export default PaymentMethodInformationObject;

client/types/payment-methods.d.ts

@@ -20,6 +20,16 @@ export type PaymentMethod =
 	| 'ideal'
 	| 'p24'
 	| 'sepa_debit'
-	| 'sofort'
-	| 'affirm'
-	| 'afterpay_clearpay';
+	| 'sofort';
+
+export interface PaymentMethodMapEntry {
+	id: string;
+	label: string;
+	description: string;
+	icon: ReactImgFuncComponent;
+	currencies: string[];
+	stripe_key: string;
+	allows_manual_capture: boolean;
+	allows_pay_later: boolean;
+	accepts_only_domestic_payment: boolean;
+}

composer.json

@@ -90,6 +90,7 @@
     "autoload": {
         "psr-4": {
             "WCPay\\MultiCurrency\\": "includes/multi-currency",
+            "WCPay\\PaymentMethods\\Configs\\": "includes/payment-methods/Configs",
             "WCPay\\Vendor\\": "lib/packages",
             "WCPay\\": "src"
         },