Over the past few weeks, we have implemented several functional upgrades and performance optimizations to the Payment Kit to give users a more flexible and efficient payment experience. This update focuses on our new SubGuard™ feature and Delegation Check support that greatly improves the experiences for consumers, administrators, and developers.
Consumer Experience#
- Introducing SubGuard™
The SubGuard™ feature stands out in this update, designed to maintain the continuity of subscription services and prevent service disruptions caused by payment failures. Users are ensured complete protection throughout the subscription period by specifying a staking amount, guaranteeing uninterrupted service. This feature can be activated on the subscription details page. The system will automatically manage any payment issues during the protection period to ensure they do not affect the subscription service.
SubGuard™ is based on ArcBlock's unique blockchain-based staking and slashing mechanism, demonstrating yet another utility scenario of blockchain-based staking.
- Scope of Support
- Currently, this feature supports Arcblock tokens (USD and ETH are not supported).
- Users can enable SubGuard™ on the subscription details page and specify the staking amount.
- Flexible Guard Mechanisms
- Staking Amount Requirement: The staking amount should cover the estimated billing amount and any fees for SubGuard™. We suggest staking at least one entire billing cycle's worth of fees.
- Protection Period: Once SubGuard™ is activated, the system guarantees that subscription services will remain continuous throughout the protection period. If a payment issue does occur, users still need to settle their invoices.
- Settlement Invoice Rules:
- Users voluntarily settle their invoices without incurring service fees.
- If the invoice is not settled after the protection period, the system will automatically use the stake to clear it and apply a service fee.
- User Manual
- The system will notify you once SubGuard™ is enabled if the staking amount is insufficient. Please promptly monitor notifications related to your subscription status.
- Once the invoice is settled, users can also disable the SubGuard™ feature, including reclaiming the staked amount. The system automatically returns any remaining stake if the subscription is canceled.
- Delegation Check
We advise against revoking application delegation; however, to safeguard against disruptions in subscription billing following a revocation, we've implemented a delegation check on the subscription details page. Users can re-delegate payment directly from the subscription details page if the current subscription lacks delegation.
Developer Experience#
We’ve updated @blocklet/payment-react to include the new OverdueInvoicePayment component, designed to streamline the process of paying overdue subscription invoices. It offers features like fast batch payments and custom rendering options, providing developers with increased flexibility and a better user experience.
- Key Features
- Quickly check the total uncollectible invoices and make batch payments in the same currency.
- USD is currently not supported, but subscription invoice information can be viewed.
- Offers both default and customizable modes to meet the requirements of various situations.
- Component Input Description
subscriptionId(required): The unique identifier for the subscription.onPaid(optional): A callback function that will be called when the payment is successfulmode(optional): component mode, supportingdefaultandcustom, with the default beingdefault.dialogProps(optional): configuration for the dialog box, defaults to{ open: true }.children(optional): A rendering function that processes payment data incustommode.
- Example Usage
- Default Mode
<OverdueInvoicePayment subscriptionId={data.id} onPaid={() => console.log('Paid successfully')} />- Custom Mode
// handlePay: The function to initiate the payment process.
// data: Payment data associated with the subscription.
// subscription: Information related to the subscription.
// summary: A summary of the payment, categorized by currency.
// invoices: A list of outstanding invoices for the subscription.
// subscriptionUrl: The URL link to view the subscription details.
<OverdueInvoicePayment subscriptionId={data.id} onPaid={() => console.log('Paid successfully')} mode="custom">
{(handlePay, { subscription, summary, invoices, subscriptionUrl }) => (
<div>
<p>Subscription Name: {subscription.name}</p>
<p>Current Currency Total: {summary[currencyId]?.amount}</p>
<p>Invoice Count: {invoices.length}</p>
<p>Subscription Details: <a href={subscriptionUrl}>View Details</a></p>
<button onClick={() => handlePay(summary[currencyId])}>Pay Now</button>
</div>
)}
</OverdueInvoicePayment>
Admin Experience#
- Bill Monitoring and Categorization
A new usage monitoring feature has been added, providing daily notifications of both abnormal and normal subscription billing information. This helps administrators promptly address any issues, enhancing the efficiency of billing management.
Improvements and Fixes#
- Resolved the issue where the image upload window was truncated during product creation in Safari, thereby enhancing compatibility.
- Enhance the invoice payment experience.
- Batch payment is completed with a single notification to minimize repeated alerts.
- Once the overdue invoice payment is completed, the system will automatically navigate back to the previous page.
- Add Funds Experience Optimization
- The subscription details page displays the balance information, and when the balance is insufficient, users can quickly click to add funds.
- The add funds page defaults to the fund addition details, minimizing distractions from other operations.
- Improved the mobile subscription details page button display for a better responsive layout experience.
Improving Together: Updates Driven by the Community#
We are dedicated to integrating your feedback to improve the Payment Kit. Thank you for your ongoing support and engagement; let's explore how your feedback has helped us improve in this release!
Guide for the New Version#
- Local applications: Update Payment Kit to its latest version, and ensure that your local components @blocklet/payment-js and @blocklet/payment-react are also updated to the latest versions.
- Online applications: If you have used Blocklet Launcher, DID Spaces, or NFT Studio, you can update the corresponding version of the application.
Help Us Enhance#
Should you have any requests, suggestions, or inquiries during your experience, we invite you to visit our community and share your feedback.