Skip to main content

Payment Kit v1.15.0: Redesigned for Smoother Payments

Xiao Fang
ComponentsPayment KitProduct ReleaseWeb3 Kit

Payment Kit v1.15.0 has been successfully released. This update introduces a refreshed design that enhances both the user interface and experience, improving the overall fluidity and comfort for administrators and end-users during the payment process. In addition to visual improvements, this version also includes several functional optimizations to ensure a consistent and smooth experience across both mobile and desktop platforms.

A New Design: Combining Aesthetics with Functionality

This update features a comprehensive visual overhaul of Payment Kit, blending modern design trends with user experience enhancements. The UI elements have been meticulously refined to make the interface clearer and more intuitive. Whether in the admin backend or on consumer payment pages, the new design ensures a seamless user experience, significantly reducing operational friction.

Checkout Page

We have designed a new interface layout for the payment form, allowing users to complete the payment process more intuitively. With the optimized interface design, users can view and enter information, making the payment process smoother and reducing the possibility of errors.

image.png

We aim to provide you with the best experience, so even if you need to purchase a large number of products at once, you can view all the necessary payment information at a glance, minimizing the need to scroll and reducing any inconvenience.

image.png

Billing Pages

Billing Overview We have optimized the subscription list and payment information statistics module. The subscription list now prioritizes displaying active subscriptions and distinguishes status labels and action buttons, reducing the chance of accidental operations.image.pngBilling and Subscription Details The billing and subscription details pages have been optimized to allow clearer browsing of transaction information and subscription plans, including payment history and expiration dates.image.png image.png

Updated Customer Information Form The form for updating customer information has been improved to provide a more comfortable and intuitive experience, with better layout and navigation.image.png

Mobile UI Optimization We have specifically adjusted the UI for mobile devices to ensure a consistent and seamless experience across both mobile and desktop platforms.

image.pngimage.pngimage.png

Admin Dashboard

In this version, we have refined the admin backend’s menu, list information display, and detail page layout. We aim to provide you with a smooth management experience through these changes.

  • UI Adjustments: We’ve made adjustments to the list and menu UI.

image.png

  • Two-Column Layout for Detail Pages: A new two-column layout has been added, reducing the need for scrolling and making it easier for administrators to handle tasks.

image.png

  • Preview Component: Added a fullscreen button to enlarge and view in fullscreen mode.

image.png

Developer Support

In this update, we have systematized the overall UI adjustments for Payment Kit, standardizing style parameters to ensure a more consistent interface style and a more harmonious visual experience. The new design is not only aesthetically pleasing but also improves readability and usability.

This update also includes an upgrade to the @blocklet/payment-react component, introducing the PaymentThemeProvider component. It also allows theme customization for CheckoutForm, CheckoutTable, and CheckoutDonate components.

For developers, you can reference and dynamically adjust theme parameters:

  • inherit: Inherit the theme from the outer component
  • theme props: Override specific styles in the PaymentThemeProvider. We support using sx to override internal class styles.
  • default: The default value wraps the component in the built-in PaymentThemeProvider.

Other Improvements

  • Automatic Stake Return: In Payment Kit v1.14.0, we introduced the option for administrators to return stake when canceling subscriptions. Now, we support automatic stake return: when you place a stake through our platform and cancel your subscription without any outstanding bills, the stake will automatically be returned to your account, reducing stake retention time.

image.png

  • @blocklet/payment-js Supports Passing Trial End Time: When generating a payment page, you can pass the trial_end parameter to create a free trial scenario.
  • Immediate Cancellation of Subscriptions During Trial Period: If you cancel your subscription during the trial period, the service will no longer be available until the original trial end date. The subscription will be immediately terminated upon cancellation.

image.png

Together We Improve: Community-Driven Updates

We believe our product’s core strength lies in an active user community. Your insights and suggestions are crucial, and we are committed to incorporating your feedback to enhance Payment Kit. This section highlights the latest updates and bug fixes inspired by user feedback, from minor adjustments to major changes, each update aims to improve your experience and meet your needs.

New Version Usage Guide

Help Us Improve

We look forward to you enjoying a better user experience with the new version of Payment Kit.

Thank you for your continued support. Please visit our community for feedback if you have any needs, suggestions, or problems. We are committed to assisting you in any way possible.

We appreciate your attention and support. We will continue to enhance Payment Kit to better meet your needs.

ArcBlock Community

Referenced here

Products

  • Payment Kit superseded

    Billing, subscriptions and checkout for a Blocklet, including promotions and delegated payment. Its work has been taken into ARC; the standalone Blocklet is no longer maintained.

  • Web3 Kit superseded

    Blocklet-side pieces for working with on-chain data and accounts. Its work has been taken into ARC; the standalone Blocklet is no longer maintained.