ArcBlock is excited to introduce an enhancement to the Payment Kit: Auto Top-Up for Credits.
This new feature allows users to automatically recharge their credits based on configurable thresholds, ensuring uninterrupted service and a smoother payment experience. Administrators can define the base credit price, and users can purchase credits or enable auto top-up directly from their Billing page.
With this release, users can enjoy peace of mind knowing they will never run out of credits during critical transactions.
Feature Highlights#
Auto Top-Up for Credits#
The new auto top-up functionality provides a flexible and reliable way for users to maintain their credit balance:
- Admin-defined base price – Administrators configure the base price for credits to ensure consistency and transparency.
- Billing page access – Users can purchase credits and enable auto top-up directly from their Billing page.
- Multiple payment methods – Supports a wide range of payment options, including EVM-compatible chains and Stripe.
- Payment account recharge – In addition to purchasing credits, users can recharge designated payment accounts.
- Payment details visibility – The payment form clearly displays payer information for clarity during transactions.
- Advanced options – Users can set daily limits for auto top-up, including:
- Maximum number of top-ups per day
- Maximum total recharge amount per day
Why it matters:
- Prevents service interruptions due to low balances
- Combines automation with control through daily caps
- Ideal for high-demand and mission-critical applications, ensuring seamless transactions
Low Balance Notification#
Payment Kit now includes a low balance notification feature that alerts users when their credits are running low. This proactive approach helps users manage credits effectively, ensuring they are aware of their balance before it becomes critical. Notifications are designed to be clear and easy to understand, helping users avoid unexpected service disruptions.
Developer Enhancements#
Two new components have been added to the @blocklet/payment-react library, making it easier to integrate and manage auto top-up features:
AutoTopup – Display and manage auto-recharge configurations with different rendering modes:
- Default mode – Fully expanded display for complete control
- Simple mode – Collapsed by default with expandable details
- Custom mode – Full control over rendering with access to modal triggers, configuration state, and payment data
Developers can listen for configuration changes via onConfigChange to refresh credit balances or update UI elements.
AutoTopupModal – A modal interface that allows users to configure auto-recharge settings, including thresholds, payment methods, and purchase amounts:
- Supports success and error callbacks for handling configuration results
- Can be initialized with auto-recharge enabled by default (
defaultEnabled={true}) - Easily embedded into existing payment or billing management pages
These components provide flexible integration options, enabling a seamless auto top-up experience directly within applications.
User Experience Improvements#
Unified Border Colors and Layout Consistency – Aesthetic updates have been applied across the Payment Kit interface. Border colors and component layouts are now standardized, delivering a more cohesive and professional user experience.
What's Next#
Looking ahead, we will continue expanding the capabilities of the Payment Kit. Upcoming updates may include:
- Service integrations to connect with more platforms and tools
- Support for discount codes to give businesses flexible promotional options
- Additional payment methods to broaden choices and improve global accessibility
The roadmap remains focused on greater flexibility, stronger integrations, and a smoother payment experience for all users.
Resources#
For more information on Payment Kit and to explore the full documentation, visit the following resources: