Guides
Welcome to the guides section. While the Components documentation covers individual UI pieces, these guides focus on broader topics that span the entire library. Here, you'll learn about advanced subjects like customizing the appearance of your payment flows, using powerful utility functions, and implementing patterns to create a robust and polished user experience.
These guides are designed for developers looking to move beyond basic integration and fully leverage the capabilities of @blocklet/payment-react.
Theming#
Learn how to customize the look and feel of the payment components to match your application's branding. The library is built on Material-UI and exposes a flexible theming system. You can provide a custom theme configuration to adjust everything from colors and typography to the shape of buttons and inputs.
Since version 1.14.22, a built-in PaymentThemeProvider is included. To modify the styles of internal components, you can pass a theme property to components like CheckoutForm.
Example: Customizing Button Colors
import { CheckoutForm } from '@blocklet/payment-react';
function MyCheckoutPage() {
return (
<CheckoutForm
id="plink_xxx"
theme={{
components: {
MuiButton: {
styleOverrides: {
containedPrimary: {
backgroundColor: '#1DC1C7',
color: '#fff',
'&:hover': {
backgroundColor: 'rgb(20, 135, 139)',
},
},
},
},
},
}}
/>
);
}This guide will walk you through the theming architecture, providing detailed examples for common customizations.
Utilities#
Beyond components, @blocklet/payment-react exports a suite of utility functions and classes to handle common tasks related to payments, data fetching, and formatting. These helpers can significantly simplify your application logic.
Key utilities include:
- API Client: A pre-configured
axiosinstance for interacting with the payment API. - CachedRequest: A utility to cache API responses in session, local, or memory storage, reducing redundant network requests.
- Date & Formatting Functions: Helpers for formatting dates, times, prices, and currencies consistently across your app (e.g.,
formatPrice,formatToDate).
Example: Using CachedRequest
import { CachedRequest, api } from '@blocklet/payment-react';
// Create a cached request that fetches prices and caches them for 5 minutes
const priceRequest = new CachedRequest(
'product-prices',
() => api.get('/api/prices'),
{
strategy: 'session', // 'session' | 'local' | 'memory'
ttl: 5 * 60 * 1000 // 5 minutes
}
);
async function fetchPrices() {
// Will use cache if available and not expired
const prices = await priceRequest.fetch();
// Force a refresh from the network
const freshPrices = await priceRequest.fetch(true);
return prices;
}This guide provides a comprehensive reference for all available utilities.
Next Steps#
Now that you understand how to customize and extend the library's functionality, proceed to the Hooks guide to learn about handling real-time events.