Add extensibility point for extensions to filter payment methods (#4668)

* Add extensionsConfig when registering a payment method

The extension config has its own canMakePayment where extensions can add callback using a payment method's name.

* Make canMakePayment a getter on PaymentMethodConfig

Because extensions can register canMakePayment callbacks for a payment method before it is registered we need to transform
canMakePayment into a getter so that it's always recalculating it's value based on the registered callbacks/

* Rename extension related config and method

* Format comments

* Add an extension namespace to registerPaymentMethodExtensionCallback utility

 This commit changes the API for how extensions will register their own callbacks to canMakePayment, so that they can add their namespace and also callbacks for multiple payment methods.

* Format comments

* Update assets/js/blocks-registry/payment-methods/payment-method-config.js

Co-authored-by: Thomas Roberts <[email protected]>

* Update assets/js/blocks-registry/payment-methods/registry.js

Co-authored-by: Thomas Roberts <[email protected]>

* Update assets/js/blocks-registry/payment-methods/payment-method-config-helper.js

Co-authored-by: Thomas Roberts <[email protected]>

* Update assets/js/blocks-registry/payment-methods/payment-method-config-helper.js

Co-authored-by: Thomas Roberts <[email protected]>

* Update assets/js/blocks-registry/payment-methods/registry.js

Co-authored-by: Thomas Roberts <[email protected]>

* Fix eslint warning

* Handle errors at registerPaymentMethodExtensionCallbacks level

* Update assets/js/blocks-registry/payment-methods/registry.js

Co-authored-by: Thomas Roberts <[email protected]>

* Fix formatting issues

Co-authored-by: Thomas Roberts <[email protected]>
Co-authored-by: Thomas Roberts <[email protected]>

Author: ralucaStan

assets/js/blocks-registry/payment-methods/extensions-config.js

@@ -0,0 +1,7 @@
+// Keeps callbacks registered by extensions for different payment methods
+/* eslint prefer-const: 0 */
+export let canMakePaymentExtensionsCallbacks = {};
+
+export const extensionsConfig = {
+	canMakePayment: canMakePaymentExtensionsCallbacks,
+};

assets/js/blocks-registry/payment-methods/payment-method-config-helper.js

@@ -8,3 +8,41 @@ export const canMakePaymentWithFeaturesCheck = ( canMakePayment, features ) => (
 	);
 	return featuresSupportRequirements && canMakePayment( canPayArgument );
 };
+
+// Filter out payment methods by callbacks registered by extensions.
+export const canMakePaymentWithExtensions = (
+	canMakePayment,
+	extensionsCallbacks,
+	paymentMethodName
+) => ( canPayArgument ) => {
+	// Validate whether the payment method is available based on its own criteria first.
+	let canPay = canMakePayment( canPayArgument );
+
+	if ( canPay ) {
+		const namespacedCallbacks = {};
+		Object.entries( extensionsCallbacks ).forEach(
+			( [ namespace, callbacks ] ) => {
+				if ( typeof callbacks[ paymentMethodName ] === 'function' ) {
+					namespacedCallbacks[ namespace ] =
+						callbacks[ paymentMethodName ];
+				}
+			}
+		);
+		canPay = Object.keys( namespacedCallbacks ).every( ( namespace ) => {
+			try {
+				return namespacedCallbacks[ namespace ]( canPayArgument );
+			} catch ( err ) {
+				// eslint-disable-next-line no-console
+				console.error(
+					`Error when executing callback for ${ paymentMethodName } in ${ namespace }`,
+					err
+				);
+				// every expects a return value at the end of every arrow function and
+				// this ensures that the error is ignored when computing the whole result.
+				return true;
+			}
+		} );
+	}
+
+	return canPay;
+};

assets/js/blocks-registry/payment-methods/payment-method-config.js

@@ -12,8 +12,11 @@ import {
 	assertValidElementOrString,
 } from './assertions';
 
-import { canMakePaymentWithFeaturesCheck } from './payment-method-config-helper';
-
+import {
+	canMakePaymentWithFeaturesCheck,
+	canMakePaymentWithExtensions,
+} from './payment-method-config-helper';
+import { extensionsConfig } from './extensions-config';
 const NullComponent = () => {
 	return null;
 };
@@ -39,10 +42,25 @@ export default class PaymentMethodConfig {
 			showSaveOption: config?.supports?.showSaveOption || false,
 			features: config?.supports?.features || [ 'products' ],
 		};
-		this.canMakePayment = canMakePaymentWithFeaturesCheck(
-			config.canMakePayment,
+		this.canMakePaymentFromConfig = config.canMakePayment;
+	}
+
+	// canMakePayment is calculated each time based on data that modifies outside of the class (eg: cart data).
+	get canMakePayment() {
+		const canPay = canMakePaymentWithFeaturesCheck(
+			this.canMakePaymentFromConfig,
 			this.supports.features
 		);
+		// Loop through all callbacks to check if there are any registered for this payment method.
+		return Object.values( extensionsConfig.canMakePayment ).some(
+			( callbacks ) => this.name in callbacks
+		)
+			? canMakePaymentWithExtensions(
+					canPay,
+					extensionsConfig.canMakePayment,
+					this.name
+			  )
+			: canPay;
 	}
 
 	static assertValidConfig = ( config ) => {

assets/js/blocks-registry/payment-methods/registry.js

@@ -13,7 +13,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { default as PaymentMethodConfig } from './payment-method-config';
 import { default as ExpressPaymentMethodConfig } from './express-payment-method-config';
-
+import { canMakePaymentExtensionsCallbacks } from './extensions-config';
 const paymentMethods = {};
 const expressPaymentMethods = {};
 
@@ -67,6 +67,42 @@ export const registerExpressPaymentMethod = ( options ) => {
 	}
 };
 
+/**
+ * Allows extension to register callbacks for specific payment methods to determine if they can make payments
+ *
+ * @param {string} namespace A unique string to identify the extension registering payment method callbacks.
+ * @param {Record<string, function():any>} callbacks Example {stripe: () => {}, cheque: => {}}
+ */
+export const registerPaymentMethodExtensionCallbacks = (
+	namespace,
+	callbacks
+) => {
+	if ( canMakePaymentExtensionsCallbacks[ namespace ] ) {
+		// eslint-disable-next-line no-console
+		console.error(
+			`The namespace provided to registerPaymentMethodExtensionCallbacks must be unique. Callbacks have already been registered for the ${ namespace } namespace.`
+		);
+	} else {
+		// Set namespace up as an empty object.
+		canMakePaymentExtensionsCallbacks[ namespace ] = {};
+
+		Object.entries( callbacks ).forEach(
+			( [ paymentMethodName, callback ] ) => {
+				if ( typeof callback === 'function' ) {
+					canMakePaymentExtensionsCallbacks[ namespace ][
+						paymentMethodName
+					] = callback;
+				} else {
+					// eslint-disable-next-line no-console
+					console.error(
+						`All callbacks provided to registerPaymentMethodExtensionCallbacks must be functions. The callback for the ${ paymentMethodName } payment method in the ${ namespace } namespace was not a function.`
+					);
+				}
+			}
+		);
+	}
+};
+
 export const __experimentalDeRegisterPaymentMethod = ( paymentMethodName ) => {
 	delete paymentMethods[ paymentMethodName ];
 };