跳到主要內容

Payment v1.17.0：透過 SubGuard™ 與授權檢查維持您的訂閱服務不中斷

Xiao Fang
ComponentsPayment KitProduct ReleaseWeb3 Kit

在過去的幾週裡，我們對 Payment Kit 進行了多項功能升級與效能優化，旨在為用戶提供更靈活、更高效的支付體驗。本次更新的重點在於全新的 SubGuard™ 功能以及對 Delegation Check（授權檢查）的支援，這大幅提升了消費者、管理員與開發者的使用體驗。

消費者體驗

  • SubGuard™ 功能介紹

SubGuard™ 是本次更新的一大亮點，旨在維護訂閱服務的連續性，防止因支付失敗而導致的服務中斷。用戶只需指定一定的質押金額，即可在整個訂閱期間獲得完整保護，確保服務不間斷。此功能可在訂閱詳情頁面啟用，系統將自動處理保護期間的任何支付問題，確保其不會影響訂閱服務。

SubGuard™ 基於 ArcBlock 獨特的區塊鏈質押與 Slash（懲罰）機制，展示了區塊鏈質押的又一個實際應用場景。

image.png

    • 支援範圍
      • 目前此功能支援 ArcBlock 代幣（不支援 USD 和 ETH）。
      • 用戶可以在訂閱詳情頁面啟用 SubGuard™ 並指定質押金額。
    • 靈活的防護機制
    • image.pngimage.png
      • 質押金額要求：質押金額應足以支付預估的帳單金額及 SubGuard™ 的相關費用。我們建議質押至少一個完整計費週期的費用。
      • 保護期：一旦啟用 SubGuard™，系統將保證訂閱服務在保護期內持續運行。如果發生支付問題，用戶仍需結清帳單。
      • 帳單結算規則：
      • image.png
        • 用戶主動結清帳單時，不會產生額外服務費。
        • 若保護期過後帳單仍未結清，系統將自動動用質押金進行清償，並收取相應服務費。
    • 用戶指南
    • image.pngimage.png
      • 若質押金額不足，系統將在啟用 SubGuard™ 後發出通知。請及時關注與訂閱狀態相關的通知。
      • 帳單結清後，用戶也可以停用 SubGuard™ 功能並取回質押金額。若訂閱被取消，系統會自動退還剩餘的質押金。
  • 授權檢查 (Delegation Check)

雖然我們不建議撤銷應用程式授權，但為了防止撤銷後導致訂閱扣款中斷，我們在訂閱詳情頁面新增了授權檢查功能。如果當前訂閱缺乏授權，用戶可以直接從訂閱詳情頁面重新進行支付授權。

image.png

開發者體驗

我們更新了 @blocklet/payment-react，新增了 OverdueInvoicePayment 組件。該組件旨在簡化支付逾期訂閱帳單的流程，提供快速批量支付和自定義渲染選項，為開發者提供更高的靈活性與更好的用戶體驗。

  • 核心功能
    • 快速檢查未收回帳單總額，並針對同幣種進行批量支付。
    • 目前不支援 USD，但可以查看訂閱帳單資訊。
    • 提供預設與自定義兩種模式，滿足各種場景需求。

image.png

  • 組件參數說明
    • subscriptionId (必填)：訂閱的唯一識別碼。
    • onPaid (選填)：支付成功後的回呼函數。
    • mode (選填)：組件模式，支援 default 和 custom，預設為 default。
    • dialogProps (選填)：對話框配置，預設為 { open: true }。
    • children (選填)：在 custom 模式下處理支付數據的渲染函數。
  • 使用範例
    • 預設模式
javascript
 <OverdueInvoicePayment subscriptionId={data.id} onPaid={() => console.log('Paid successfully')} />
    • 自定義模式
javascript
// 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>

管理員體驗

  • 帳單監控與分類

新增了使用量監控功能，提供每日異常與正常訂閱帳單資訊的通知。這有助於管理員及時處理任何問題，提高帳單管理效率。

image.png

改進與修復

  • 解決了在 Safari 瀏覽器中創建產品時，圖片上傳視窗被截斷的問題，從而增強了相容性。
  • 優化帳單支付體驗：
    • 批量支付完成後僅發送一次通知，減少重複提醒。
    • 逾期帳單支付完成後，系統會自動導回上一頁。
  • 儲值體驗優化：
    • 訂閱詳情頁面會顯示餘額資訊，當餘額不足時，用戶可以快速點擊進行儲值。
    • 儲值頁面預設顯示儲值詳情，減少其他操作的干擾。
  • 改進了行動端訂閱詳情頁面的按鈕顯示，提供更好的響應式佈局體驗。

image.png

共同進步：由社群驅動的更新

我們致力於整合您的反饋以改進 Payment Kit。感謝您持續的支持與參與；讓我們來看看您的反饋如何幫助我們在本次版本中完成改進！

新版本指南

幫助我們改進

如果您在使用過程中有任何需求、建議或疑問，歡迎造訪我們的社群並分享您的回饋。

ArcBlock 社群

收聽音訊概覽

本頁涉及

產品

  • Payment Kit superseded

    為 Blocklet 提供計費、訂閱和結帳，包括促銷和代付。這部分工作已併入 ARC；獨立的 Blocklet 不再維護。

  • Web3 Kit superseded

    在 Blocklet 一側處理鏈上資料和帳戶的那些部件。這部分工作已併入 ARC；獨立的 Blocklet 不再維護。