メインコンテンツへスキップ

Payment Kit v1.15.0:よりスムーズな決済体験を実現するリデザイン

Xiao Fang
ComponentsPayment KitProduct ReleaseWeb3 Kit

Payment Kit v1.15.0 が正式にリリースされました。今回のアップデートでは、新しいデザインを採用することでユーザーインターフェースと操作体験の両方を刷新し、管理者およびエンドユーザーが決済を行う際の全体的な滑らかさと快適さを向上させています。見た目の改善に加えて、モバイルとデスクトップの両プラットフォームで一貫したスムーズな体験を実現するため、機能面でもさまざまな最適化を行いました。

新しいデザイン

今回のアップデートでは、Payment Kitのビジュアル全体を刷新し、最新のデザイントレンドとユーザー体験の向上を組み合わせています。UI要素は入念に調整され、インターフェースがより明快で直感的になりました。管理者向けの管理画面でも、一般ユーザー向けの決済ページでも、新しいデザインによってシームレスなユーザー体験が提供され、操作上の摩擦が大幅に軽減されています。

チェックアウトページ

決済フォームには新しいインターフェースレイアウトを採用し、ユーザーがより直感的に決済を完了できるようにしました。最適化されたインターフェースデザインにより、ユーザーは情報の確認や入力がしやすくなり、決済プロセスがよりスムーズになるとともに、入力ミスの可能性も減少します。

image.png

一度に大量の商品を購入する必要がある場合でも、必要な決済情報をひと目で確認できるようにすることを目指しました。これにより、スクロールの手間を最小限に抑え、不便さを軽減しています。

image.png

請求ページ

請求概要 サブスクリプション一覧と決済情報の統計モジュールを最適化しました。サブスクリプション一覧では、有効なサブスクリプションを優先的に表示し、ステータスラベルと操作ボタンを明確に区別することで、誤操作の可能性を減らしています。image.png請求とサブスクリプションの詳細 請求とサブスクリプションの詳細ページを最適化し、決済履歴や有効期限を含む取引情報とサブスクリプションプランをより明確に閲覧できるようにしました。image.png image.png

更新された顧客情報フォーム 顧客情報を更新するためのフォームを改善し、レイアウトとナビゲーションを最適化することで、より快適で直感的な操作体験を提供します。image.png

モバイルUIの最適化 モバイルデバイス向けにUIを特別に調整し、モバイルとデスクトップの両プラットフォームで一貫したシームレスな体験を実現しました。

image.pngimage.pngimage.png

管理ダッシュボード

このバージョンでは、管理画面のメニュー、一覧情報の表示、詳細ページのレイアウトを見直しました。これらの変更を通じて、スムーズな管理体験を提供することを目指しています。

  • UIの調整。

image.png

  • 詳細ページの2カラムレイアウト、スクロールの必要性を減らして、管理者がタスクを処理しやすくしました。

image.png

  • プレビューコンポーネント、拡大してフルスクリーンで確認できるようにしました。

image.png

開発者向けサポート

今回のアップデートでは、Payment Kit全体のUI調整を体系化し、スタイルパラメータを標準化することで、より一貫性のあるインターフェーススタイルと調和のとれたビジュアル体験を実現しました。新しいデザインは見た目が美しいだけでなく、可読性と使いやすさも向上しています。

さらに今回のアップデートでは、@blocklet/payment-reactコンポーネントをアップグレードし、PaymentThemeProviderコンポーネントを導入しました。これにより、CheckoutForm、CheckoutTable、CheckoutDonateの各コンポーネントでテーマのカスタマイズが可能になります。

開発者はthemeパラメータを参照し、動的に調整できます:

  • inherit
  • theme props:PaymentThemeProvider内の特定のスタイルを上書きします。sxを使用して内部のクラススタイルを上書きすることもサポートしています。
  • default、コンポーネントは組み込みのPaymentThemeProviderでラップされます。

その他の改善

  • 自動ステーク返却: Payment Kit v1.14.0では、管理者がサブスクリプションをキャンセルする際にステークを返却できるオプションを導入しました。今回、自動ステーク返却に対応しました。当プラットフォームを通じてステークを預けた場合、未払いの請求がない状態でサブスクリプションをキャンセルすると、ステークは自動的にアカウントへ返却され、ステークの保持期間が短縮されます。

image.png

  • @blocklet/payment-js トライアル終了時刻の指定に対応: 決済ページを生成する際に、trial_endパラメータを渡すことで無料トライアルのシナリオを作成できます。
  • トライアル期間中のサブスクリプション即時キャンセル: トライアル期間中にサブスクリプションをキャンセルすると、本来のトライアル終了日まで待たずに、キャンセル時点でサービスが即座に利用できなくなります。サブスクリプションはキャンセルと同時に直ちに終了します。

image.png

共に進化する

私たちは、製品の核心的な強みは活発なユーザーコミュニティにあると考えています。皆様のご意見やご提案は非常に重要であり、私たちはそれらのフィードバックをPayment Kitの改善に反映させることに力を注いでいます。このセクションでは、ユーザーからのフィードバックをもとにした最新のアップデートと不具合修正をご紹介します。小さな調整から大きな変更まで、それぞれのアップデートが皆様の体験向上とニーズへの対応を目指しています。

新バージョンの利用ガイド

  • ローカルアプリケーション Kitを最新バージョンにアップグレードし、ローカルのコンポーネント依存関係である@blocklet/payment-jsおよび@blocklet/payment-reactも最新バージョンに更新してください。
  • オンラインアプリケーション:Arcblock Launcher、DID Spaces、またはNFT Studioをご利用の場合は、該当するアプリケーションを最新バージョンに更新してください。

改善へのご協力をお願いします

新しいバージョンのPayment Kitで、より良いユーザー体験をお楽しみいただけることを願っています。

日頃のご支援に感謝申し上げます。ご要望やご提案、問題などございましたら、ぜひコミュニティまでフィードバックをお寄せください。私たちはあらゆる形でサポートさせていただくことをお約束します。

いつもご注目とご支援をいただき、ありがとうございます。今後もPayment Kitを継続的に改善し、皆様のニーズにより良くお応えできるよう努めてまいります。

ArcBlock Community

このページに関わるもの

製品

  • Payment Kit superseded

    Blocklet 向けの請求、サブスクリプション、チェックアウト。プロモーションや代理支払いにも対応します。この機能は ARC に統合され、単体の Blocklet は保守されていません。

  • Web3 Kit superseded

    オンチェーンのデータとアカウントを扱う Blocklet 側の部品。この機能は ARC に統合され、単体の Blocklet は保守されていません。