Hooks

The @blocklet/payment-react library includes custom React hooks to manage specific functionalities and side effects within your application. These hooks abstract away complex logic, making it easier to handle real-time events and create responsive user interfaces.

This section provides an overview of the available hooks. For detailed usage and examples, please refer to the specific documentation page for each one.

useSubscription#

The useSubscription hook establishes a WebSocket connection to listen for real-time events from the payment service. It is essential for scenarios where you need to react to asynchronous updates, such as a payment being successfully processed or an invoice status changing. By subscribing to a specific channel, your application can receive push notifications, enabling a more dynamic and responsive user experience without constant polling.

Read the full useSubscription documentation »

useMobile#

The useMobile hook is a simple utility for detecting the viewport size. It helps determine if the application is being viewed on a mobile device based on Material-UI's breakpoint system. This is useful for conditionally rendering components or applying different styles to ensure your payment flows are optimized for smaller screens. The hook returns a boolean isMobile flag and the pixel value for the current mobile breakpoint.

Read the full useMobile documentation »

Next Steps#

Now that you have an overview of the available hooks, you can explore the rich set of UI and business logic components to build your payment flows.

➡️ Next: Explore Components.