Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する

Payment Kit v1.15.0:全新改版带来更丝滑的支付体验

Xiao Fang
2024年8月29日 · edited
B
Blogs
cover

Payment Kit v1.15.0 已成功发布,此次更新为用户界面和用户体验带来了焕然一新的设计,进一步提升了管理员和终端用户在支付过程中的流畅度和舒适度。本次版本不仅改进了视觉效果,还在功能上做出了诸多优化,确保用户在移动端和桌面端都能享受到一致且丝滑的体验。

全新设计:美观与功能并存#

此次更新中,我们对 Payment Kit 进行了全面的视觉改造,结合现代化的设计风格与用户体验优化。UI 元素的细腻打磨使界面更加清晰易懂,并且交互更为直观。无论是管理后台还是消费者的支付页面,新设计都确保了无缝的用户体验,极大减少了操作阻力。

这次更新将界面美观度与功能实用性相结合,使管理员和用户在使用过程中感受到设计与技术的无缝融合。每一个按钮、每一个布局都经过精心调整,确保操作简洁且高效。

付款页面#

我们为支付表单设计了新的界面布局,使用户能够更加直观地完成支付流程。通过优化的界面设计,用户可以清晰地查看和输入信息,支付过程更加顺滑,减少误操作的可能性。

image.png

我们期望您能得到最佳的体验,即使您需要一次性购买很多产品,也可以一眼看到您需要支付的所有信息,减少滑动屏幕对您带来的困扰

image.png

我的账单#


账单首页

我们优化了订阅列表和支付信息统计模块,对订阅列表优先展示还可用的订阅,并且区分状态标签和操作按钮,减少您在使用过程中的误触行为。

image.png


账单详情与订阅详情
账单和订阅详情页面经过优化后,您可以更清晰地浏览交易信息和订阅计划,包括支付历史和到期时间等关键数据。

image.png
image.png


更新客户信息表单
用户可以通过全新的表单界面轻松更新个人信息,表单的布局和操作体验得到了显著改善。

image.png


移动端 UI 优化
我们专门针对移动设备进行了 UI 兼容性调整,确保无论是在移动端还是桌面端,用户都能享受到一致且无缝的操作体验。

image.png
image.png
image.png

管理后台#

我们在这个版本中对管理后台的菜单、列表信息展示、详情页布局都做了一定的打磨,我们期待我们的改变带给您足够丝滑的管理体验。

  • 列表、菜单 UI 调整

image.png

  • 详情页两列布局:新增了两列布局,减少滑动操作,让管理员更加轻松地处理任务

image.png

  • 预览组件:新增全屏按钮,放大看全屏

image.png


开发者支持#

新版本中,我们对 Payment Kit 的整体 UI 进行了系统化的调整,统一了样式参数,确保界面风格更加一致,视觉体验更加和谐。新设计不仅美观,还提高了可读性和易用性。

此次更新包含对 @blocklet/payment-react 的升级,新增了 PaymentThemeProvider 组件, 并且对 CheckoutFormCheckoutTableCheckoutDonate 组件提供了theme 自定义的能力。

如果您是一个开发者,您可以参考并动态调整 theme 参数:

  • theme
    • inherit: 继承您外层的 theme
    • themeProps: 覆盖 PaymentThemeProvider 部分样式,我们支持使用 sx 来覆盖内部 class 的样式
    • default【默认值】: 内置PaymentThemeProvider包裹

其他改进#

  • 支持自动退还押金:在 Payment Kit v1.14.0 版本已经支持管理员取消订阅时选择退还押金,而现在我们支持了自动退还押金:您使用本平台支付订阅的时候我们会产生一笔押金,如果您未产生欠费账单,并且选择取消订阅,那么押金会在您的订阅取消后自动退还到您的账户,减少押金的滞留时间。

image.png

  • @blocklet/payment-js 支持传入试用到期时间:生成支付页时支持传入 trial_end 参数,以便开发者创建免费试用场景。
  • 试用期内取消的订阅将立即失效:如果您在试用期内取消订阅,我们不再提供免费试用到原试用到期时间的服务,该订阅将立即失效。

image.png


我们共同改进:社区驱动的更新#

我们相信,我们产品的核心在于活跃的用户社区。您的见解和建议对我们至关重要,我们致力于融入您的反馈,使 Payment Kit 更加完善。在这一部分,我们将重点介绍受到您们,我们的用户启发的最新更新和错误修复。从细节上的 UI 改进到关键功能的升级,我们的目标始终是通过每一次更新,为用户带来更好的体验。感谢所有用户的持续支持与关注。


新版本使用指南#

帮助我们改进#

我们期待着您在新版本的 Payment Kit 中享受更好的用户体验!

最后,感谢每位用户的关注和支持,我们将持续改进以更好地满足您的需求。如果您在使用过程中有任何需求、建议或问题,请前往社区进行反馈。我们将尽最大努力提供帮助。


2.1.4