Add documentation for registerPaymentMethodExtensionCallbacks (https://github.com/woocommerce/woocommerce-blocks/pull/4834)
* Improve the type for callbacks registered by extensions The previous type was CanMakePaymentCallback, used for the payment methods's own canMakePayment callbacks, which could also return Promises. In order to eliminate the confusion, a new type has been created that defines callbacks that only return true or false. * Document registerPaymentMethodExtensionCallbacks * Update docs/extensibility/filtering-payment-methods.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Add information about payment method name in documentation Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
This commit is contained in:
Raluca Stan
GitHub
parent
8a657c32da
commit
a2f39d07f1
|
|
@ -1,11 +1,11 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { CanMakePaymentCallback } from '@woocommerce/type-defs/payments';
|
||||
import { CanMakePaymentExtensionCallback } from '@woocommerce/type-defs/payments';
|
||||
|
||||
type CanMakePaymentExtensionCallbacks = Record<
|
||||
string,
|
||||
CanMakePaymentCallback
|
||||
CanMakePaymentExtensionCallback
|
||||
>;
|
||||
export type NamespacedCanMakePaymentExtensionsCallbacks = Record<
|
||||
string,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import type { CanMakePaymentCallback } from '@woocommerce/type-defs/payments';
|
||||
import type {
|
||||
CanMakePaymentCallback,
|
||||
CanMakePaymentExtensionCallback,
|
||||
} from '@woocommerce/type-defs/payments';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -38,7 +41,7 @@ export const canMakePaymentWithExtensions = (
|
|||
// Gather all callbacks for paymentMethodName.
|
||||
const namespacedCallbacks: Record<
|
||||
ExtensionNamespace,
|
||||
CanMakePaymentCallback
|
||||
CanMakePaymentExtensionCallback
|
||||
> = {};
|
||||
|
||||
Object.entries( extensionsCallbacks ).forEach(
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import deprecated from '@wordpress/deprecated';
|
|||
import type {
|
||||
PaymentMethodConfiguration,
|
||||
ExpressPaymentMethodConfiguration,
|
||||
CanMakePaymentCallback,
|
||||
CanMakePaymentExtensionCallback,
|
||||
PaymentMethodConfigInstance,
|
||||
PaymentMethods,
|
||||
ExpressPaymentMethods,
|
||||
|
|
@ -81,7 +81,7 @@ export const registerExpressPaymentMethod = (
|
|||
*/
|
||||
export const registerPaymentMethodExtensionCallbacks = (
|
||||
namespace: string,
|
||||
callbacks: Record< string, CanMakePaymentCallback >
|
||||
callbacks: Record< string, CanMakePaymentExtensionCallback >
|
||||
): void => {
|
||||
if ( canMakePaymentExtensionsCallbacks[ namespace ] ) {
|
||||
// eslint-disable-next-line no-console
|
||||
|
|
|
|||
|
|
@ -44,6 +44,10 @@ export type CanMakePaymentCallback = (
|
|||
cartData: CanMakePaymentArgument
|
||||
) => CanMakePaymentReturnType;
|
||||
|
||||
export type CanMakePaymentExtensionCallback = (
|
||||
cartData: CanMakePaymentArgument
|
||||
) => boolean;
|
||||
|
||||
export interface PaymentMethodIcon {
|
||||
id: string;
|
||||
src: string | null;
|
||||
|
|
|
|||
|
|
@ -4,15 +4,16 @@ These documents are all dealing with extensibility in the various WooCommerce Bl
|
|||
|
||||
## Checkout Block
|
||||
|
||||
| Document | Description |
|
||||
| ---------- | ---------- |
|
||||
[Payment Method Integration](./payment-method-integration.md) | Information about implementing payment methods.
|
||||
[Checkout Flow and Events](./checkout-flow-and-events.md) | All about the checkout flow in the checkout block and the various emitted events that can be subscribed to.
|
||||
[Available Filters](./available-filters.md) | All about the filters that you may use to change values of certain elements of WooCommerce Blocks.
|
||||
[Exposing your data in the Store API.](./extend-rest-api-add-data.md) | Explains how you can add additional data to Store API endpoints.
|
||||
[Available endpoints to extend with ExtendRestAPI.](./available-endpoints-to-extend.md) | A list of all available endpoints to extend.
|
||||
[Adding an endpoint to ExtendRestAPI.](./extend-rest-api-new-endpoint.md) | A step by step process for contributors to expose a new endpoint via ExtendRestApi.
|
||||
[Slots and Fills.](./slot-fills.md) | Explains Slot Fills and how to use them to render your own components in Cart and Checkout.
|
||||
[Available Slot Fills.](./available-slot-fills.md) | Available Slots that you can use and their positions in Cart and Checkout.
|
||||
[Available Formatters](./extend-rest-api-formatters.md) | Available `Formatters` to format data for use in the Store API.
|
||||
[IntegrationInterface](./integration-interface.md) | The `IntegrationInterface` class and how to use it to register scripts, styles, and data with WooCommerce Blocks.
|
||||
| Document | Description |
|
||||
| --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| [Payment Method Integration](./payment-method-integration.md) | Information about implementing payment methods. |
|
||||
| [Filtering Payment Methods](./filtering-payment-methods.md) | Information about filtering the payment methods available in the Checkout Block. |
|
||||
| [Checkout Flow and Events](./checkout-flow-and-events.md) | All about the checkout flow in the checkout block and the various emitted events that can be subscribed to. |
|
||||
| [Available Filters](./available-filters.md) | All about the filters that you may use to change values of certain elements of WooCommerce Blocks. |
|
||||
| [Exposing your data in the Store API.](./extend-rest-api-add-data.md) | Explains how you can add additional data to Store API endpoints. |
|
||||
| [Available endpoints to extend with ExtendRestAPI.](./available-endpoints-to-extend.md) | A list of all available endpoints to extend. |
|
||||
| [Adding an endpoint to ExtendRestAPI.](./extend-rest-api-new-endpoint.md) | A step by step process for contributors to expose a new endpoint via ExtendRestApi. |
|
||||
| [Slots and Fills.](./slot-fills.md) | Explains Slot Fills and how to use them to render your own components in Cart and Checkout. |
|
||||
| [Available Slot Fills.](./available-slot-fills.md) | Available Slots that you can use and their positions in Cart and Checkout. |
|
||||
| [Available Formatters](./extend-rest-api-formatters.md) | Available `Formatters` to format data for use in the Store API. |
|
||||
| [IntegrationInterface](./integration-interface.md) | The `IntegrationInterface` class and how to use it to register scripts, styles, and data with WooCommerce Blocks. |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
# Filtering payment methods in the Checkout block
|
||||
|
||||
## The problem
|
||||
|
||||
You're an extension developer, and your extension is conditionally hiding payment gateways on the checkout step. You need to be able to hide payment gateways on the Checkout block using a front-end extensibility point.
|
||||
|
||||
## The solution
|
||||
|
||||
WooCommerce Blocks provides a function called `registerPaymentMethodExtensionCallbacks` which allows extensions to register callbacks for specific payment methods to determine if they can make payments.
|
||||
|
||||
## Importing
|
||||
|
||||
_Aliased import_
|
||||
|
||||
```js
|
||||
import { registerPaymentMethodExtensionCallbacks } from '@woocommerce/blocks-registry';
|
||||
```
|
||||
|
||||
_wc global_
|
||||
|
||||
```js
|
||||
const { registerPaymentMethodExtensionCallbacks } = wc.wcBlocksRegistry;
|
||||
```
|
||||
|
||||
## Signature
|
||||
|
||||
| Parameter | Description | Type |
|
||||
| ----------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
|
||||
| `namespace` | Unique string to identify your extension. Choose something that eliminates a name collision with another extension. | `string` |
|
||||
| `callbacks` | An object containing callbacks registered for different payment methods | Record< string, CanMakePaymentExtensionCallback > |
|
||||
|
||||
Read more below about [callbacks](#callbacks-registered-for-payment-methods).
|
||||
|
||||
### Extension namespace collision
|
||||
|
||||
When trying to register callbacks under an extension namespace already used with `registerPaymentMethodExtensionCallbacks`, the registration will be aborted and you will be notified that you are not using a unique namespace. This will be shown in the JavaScript console.
|
||||
|
||||
## Usage example
|
||||
|
||||
```js
|
||||
registerPaymentMethodExtensionCallbacks( 'my-hypothetical-extension', {
|
||||
cod: ( arg ) => {
|
||||
return arg.shippingAddress.city === 'Berlin';
|
||||
},
|
||||
cheque: ( arg ) => {
|
||||
return false;
|
||||
},
|
||||
} );
|
||||
```
|
||||
|
||||
## Callbacks registered for payment methods
|
||||
|
||||
Extensions can register only one callback per payment method:
|
||||
|
||||
```
|
||||
payment_method_name: ( arg ) => {...}
|
||||
```
|
||||
|
||||
`payment_method_name` is the value of the [name](payment-method-integration.md#name-required) property used when the payment method was registered with WooCommerce Blocks.
|
||||
|
||||
The registered callbacks are used to determine whether the corresponding payment method should be available as an option for the shopper. The function will be passed an object containing data about the current order.
|
||||
|
||||
```typescript
|
||||
type CanMakePaymentExtensionCallback = (
|
||||
cartData: CanMakePaymentArgument
|
||||
) => boolean;
|
||||
```
|
||||
|
||||
Each callback will have access to the information bellow
|
||||
|
||||
```typescript
|
||||
interface CanMakePaymentArgument {
|
||||
cart: Cart;
|
||||
cartTotals: CartTotals;
|
||||
cartNeedsShipping: boolean;
|
||||
billingData: CartResponseBillingAddress;
|
||||
shippingAddress: CartResponseShippingAddress;
|
||||
selectedShippingMethods: Record< string, unknown >;
|
||||
paymentRequirements: Array< string >;
|
||||
}
|
||||
```
|
||||
|
||||
If you need data that is not available in the parameter received by the callback you can consider [exposing your data in the Store API](extend-rest-api-add-data.md).
|
||||
Loading…
Reference in New Issue