@blocklet/payment-react 1.19.22 → 1.20.0

package/.aigne/doc-smith/upload-cache.yaml

@@ -0,0 +1,264 @@
+3604c8d3f5f58223efe43d2a34fb378cc2eb0436d05debfd051570e456b1a670:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/5fe807d9d96faf73f476310ae5e1d3cf098268ba0bd2e2b0bcdc8036266e751c.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/3604c8d3f5f58223.svg
+      upload_time: 2025-09-01T01:20:41.410Z
+697853802d6ce76ff2bb40fb3a2c258f6aa0bd69f89c56c6b4350f50c3625286:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/1eda03215c727abd2e9e10d1d64eef0156abae81107381a20b6550a717db8d76.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/697853802d6ce76f.svg
+      upload_time: 2025-09-01T01:20:41.783Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/697853802d6ce76f.svg
+      upload_time: 2025-09-01T02:59:10.382Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/697853802d6ce76f.svg
+      upload_time: 2025-09-01T03:00:01.145Z
+a2270a3afd71ddf8f42953b8df37a59b32d8f02a74cb0cc4c4be7744f13d7bd5:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/b5d880d87cdc861d59f004d58192290d2ef5eab0d4bcdd50a1282c8d303cce88.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/a2270a3afd71ddf8.svg
+      upload_time: 2025-09-01T01:20:42.013Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/a2270a3afd71ddf8.svg
+      upload_time: 2025-09-01T02:59:11.034Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/a2270a3afd71ddf8.svg
+      upload_time: 2025-09-01T03:00:01.416Z
+556f860ff5b5be30df91ec6a434986f5d74fbe5dbdb8dae06e3b331b658421d9:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/ddd002a9ac29fb015a3daaefc68641778d488f971f88b898694ade291b7d5ecb.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/556f860ff5b5be30.svg
+      upload_time: 2025-09-01T01:20:42.356Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/556f860ff5b5be30.svg
+      upload_time: 2025-09-01T02:59:10.735Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/556f860ff5b5be30.svg
+      upload_time: 2025-09-01T03:00:01.412Z
+c3ef1f0292ec84211e21dfba4176df0c8171b3db423ad8a3f16fcd03eb7a4ab9:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/19ca576bc655afb674be0c5d8630160ca795f3f7c89868e3cff5c03c6c11b12d.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/c3ef1f0292ec8421.svg
+      upload_time: 2025-09-01T01:20:42.576Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/c3ef1f0292ec8421.svg
+      upload_time: 2025-09-01T02:59:10.408Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/c3ef1f0292ec8421.svg
+      upload_time: 2025-09-01T03:00:01.331Z
+a088be9a1b6bc1d1070170734ef16ae8d550f6edb08e25a328b68e12671d7db6:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/0fd4aa7a9f0aa2e77c92fdcf89d5df4cf6834529ab328bc0a39197e97043b1cc.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/a088be9a1b6bc1d1.svg
+      upload_time: 2025-09-01T01:20:42.713Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/a088be9a1b6bc1d1.svg
+      upload_time: 2025-09-01T02:59:10.065Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/a088be9a1b6bc1d1.svg
+      upload_time: 2025-09-01T03:00:01.938Z
+1f04ad26dc984f0354612b99e3d47b0be7cacca8a57cce867eef848027967cf9:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/1f6e523e3a9748df3a00eb479891ae5e8b852cc177095c7cd92c9c9bc64d924d.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/1f04ad26dc984f03.svg
+      upload_time: 2025-09-01T01:20:43.907Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/1f04ad26dc984f03.svg
+      upload_time: 2025-09-01T02:59:11.873Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/1f04ad26dc984f03.svg
+      upload_time: 2025-09-01T03:00:02.175Z
+ae6a2dea6777131338f7d1fbc9d5f292efd85daa7f941a85ce518d4a05e9defe:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/81fd2b8a70126e7993c819551ac7ecaf9ed1c06e393bbe5a54783e90c92eebb1.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/ae6a2dea67771313.svg
+      upload_time: 2025-09-01T01:20:43.929Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/ae6a2dea67771313.svg
+      upload_time: 2025-09-01T02:59:11.974Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/ae6a2dea67771313.svg
+      upload_time: 2025-09-01T03:00:02.490Z
+7c217cbee2846d1168c732adaa4c7a33bce606b36892c5ed753a8e6968fe27ad:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/a12bf9e27a9dd598142b0a58bd5c12ebfeff8b8ae6b8c5aee8b1b76acc3baf60.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/7c217cbee2846d11.svg
+      upload_time: 2025-09-01T01:20:45.090Z
+f3e72c1c26b1d3cd2ea455441ad9024294628f3d10563298e8c371ac03358469:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/6643b09d23235c4daed1d687fab3c262eaa9f9863374f06e7302abdc35de2fbe.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/f3e72c1c26b1d3cd.svg
+      upload_time: 2025-09-01T01:20:45.469Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/f3e72c1c26b1d3cd.svg
+      upload_time: 2025-09-01T02:59:12.315Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/f3e72c1c26b1d3cd.svg
+      upload_time: 2025-09-01T03:00:03.297Z
+bd79e275572e0f89e189017cd4ec8153eb0ae4c91f39e0965d1266009db7cb77:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/221829776d3cae36af1d173ac2a821bcdd1d9c936f87dc439acea8f02f788557.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/bd79e275572e0f89.svg
+      upload_time: 2025-09-01T01:20:45.561Z
+f9d15f76ca09fde5a243e6cbc55bbfe0706d58f69691a157aa3e6ec229033830:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/ee961e8be6e0483ad9b51c2b527462e5be97419e551af0f76fd90406705ee037.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/f9d15f76ca09fde5.svg
+      upload_time: 2025-09-01T01:20:45.563Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/f9d15f76ca09fde5.svg
+      upload_time: 2025-09-01T02:59:12.212Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/f9d15f76ca09fde5.svg
+      upload_time: 2025-09-01T03:00:03.408Z
+3ca7e84a46eab4899e52acb58a5405c8bc60721b4a56eec78bc46096715c3bc9:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/ce8ca4168e7d8fb16c0d40a59060be8c23c7fdd4d7e160ea53f26126a0f64f42.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/3ca7e84a46eab489.svg
+      upload_time: 2025-09-01T01:20:45.622Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/3ca7e84a46eab489.svg
+      upload_time: 2025-09-01T02:59:14.123Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/3ca7e84a46eab489.svg
+      upload_time: 2025-09-01T03:00:05.117Z
+0bf39fa98fa2fdd025fb30e5c199b95efce6c455f1bc9a5fe502741b602eaf94:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/f19f8a00e81ad90f71ea578a171bae85504149953d5396eaff38a2ea9c94457c.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/0bf39fa98fa2fdd0.svg
+      upload_time: 2025-09-01T01:20:45.794Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/0bf39fa98fa2fdd0.svg
+      upload_time: 2025-09-01T02:59:14.081Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/0bf39fa98fa2fdd0.svg
+      upload_time: 2025-09-01T03:00:04.965Z
+6fb6f72dd56a4ee9029cfa25b17f5580229927b03a58e8daf54a903f03ccbd91:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/de06e3a30e1fe5561bc236ea4d1967d80563f0ce041434415937a1a4016ba28e.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/6fb6f72dd56a4ee9.svg
+      upload_time: 2025-09-01T01:20:47.317Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/6fb6f72dd56a4ee9.svg
+      upload_time: 2025-09-01T02:59:13.748Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/6fb6f72dd56a4ee9.svg
+      upload_time: 2025-09-01T03:00:04.792Z
+801c818280688ede4905c63a8c796e0b94bbb7bf55acb517567349b1b75b33bc:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/8acdff948bb0ccb8e961ce8c9a305d965d57eaed6126bcce474c9898ae0dbc8a.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/801c818280688ede.svg
+      upload_time: 2025-09-01T01:20:47.611Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/801c818280688ede.svg
+      upload_time: 2025-09-01T02:59:14.056Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/801c818280688ede.svg
+      upload_time: 2025-09-01T03:00:04.671Z
+0a600e2d01664969a142e8ea059a5cc153056df0fe9a25ca097ec550fbe3b2e6:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/65746880731bc6205eb09bab22b80b875ff511d543e9aa2d440e5751ad30873c.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/0a600e2d01664969.svg
+      upload_time: 2025-09-01T01:20:48.459Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/0a600e2d01664969.svg
+      upload_time: 2025-09-01T02:59:14.449Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/0a600e2d01664969.svg
+      upload_time: 2025-09-01T03:00:05.297Z
+92adafaf95ce855ad9b128cd0d38eaf0239bd3e1683a251eaee3d4950f1c0da1:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/3d58bc0d41786f0fdd7b468e43844978e4416faed2ad8d51a305eb595c530ad6.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/92adafaf95ce855a.svg
+      upload_time: 2025-09-01T01:20:48.509Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/92adafaf95ce855a.svg
+      upload_time: 2025-09-01T02:59:14.396Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/92adafaf95ce855a.svg
+      upload_time: 2025-09-01T03:00:04.651Z
+5882d52159e1608b174f98d936bed1eb02f38d70f4caf4185810857f2bbce350:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/e3ee19272376514272efc8f91d24f56f4c50e23f15273171139bf0f6c9e13f0c.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/5882d52159e1608b.svg
+      upload_time: 2025-09-01T01:38:54.298Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/5882d52159e1608b.svg
+      upload_time: 2025-09-01T02:59:10.086Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/5882d52159e1608b.svg
+      upload_time: 2025-09-01T03:00:02.059Z
+5f7b8c0d4e78265874d1198652e4815bf2103125ae69947bc3222546ebe7e05d:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/517a5bdd6d5200496c8b2de3bc65731e3f44fd7339f45ccbfcb6b791fb77179c.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/5f7b8c0d4e782658.svg
+      upload_time: 2025-09-01T01:38:54.572Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/5f7b8c0d4e782658.svg
+      upload_time: 2025-09-01T02:59:09.948Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/5f7b8c0d4e782658.svg
+      upload_time: 2025-09-01T03:00:00.718Z
+abfe04f6bb29267b31a6e8356b4b5dd065811e10dbdb721c2523d89863c0b68c:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/0bbd1cab0bd07a50f38adda2416696073473f477a06756f08884ba99aac25b00.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/abfe04f6bb29267b.svg
+      upload_time: 2025-09-01T01:38:55.532Z
+3fc53211e7b7f9632d9097bfec7bc264affed5c4c158c25170c020e959123a93:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/4013453d7bae501ab81869c01b4d4685906494cf3f30a47549ce92074233f1ee.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/3fc53211e7b7f963.svg
+      upload_time: 2025-09-01T02:41:51.286Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/3fc53211e7b7f963.svg
+      upload_time: 2025-09-01T02:59:12.216Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/3fc53211e7b7f963.svg
+      upload_time: 2025-09-01T03:00:03.514Z
+51bb582e2498b6ac1c5458ddf461746f821bc9c5ded27c754822d5b6be928c04:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/8aa239cb8ca9a7779960168a0291412f1b22654bef4dac94579a0e2a3608c283.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/51bb582e2498b6ac.svg
+      upload_time: 2025-09-01T02:41:51.898Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/51bb582e2498b6ac.svg
+      upload_time: 2025-09-01T02:59:12.221Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/51bb582e2498b6ac.svg
+      upload_time: 2025-09-01T03:00:03.340Z
+59e576cb3a179b39b4b1869f4111df71971b93557728bbb6df637fec7e64052c:
+  local_path: .aigne/doc-smith/.tmp/assets/d2/1fca9146292a7864247350894a6f2fa24286591c02f75096888d82fb347f3f90.svg
+  sites:
+    https://www.staging.arcblock.io:
+      url: https://www.staging.arcblock.io/image-bin/uploads/59e576cb3a179b39.svg
+      upload_time: 2025-09-01T02:41:53.334Z
+    https://www.arcblock.io:
+      url: https://www.arcblock.io/image-bin/uploads/59e576cb3a179b39.svg
+      upload_time: 2025-09-01T02:59:14.125Z
+    https://docsmith.aigne.io:
+      url: https://docsmith.aigne.io/image-bin/uploads/59e576cb3a179b39.svg
+      upload_time: 2025-09-01T03:00:04.866Z

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/@blocklet/payment-react)](https://www.npmjs.com/package/@blocklet/payment-react)
 
-A React component library for building payment flows, subscriptions, and donation systems in Blocklet applications. Seamlessly integrated with Blocklet's payment infrastructure.
+A React component library for building payment flows, subscriptions, and donation systems in blocklets, seamlessly integrated with Payment Kit.
 
 ## Features
 
@@ -14,8 +14,7 @@ A React component library for building payment flows, subscriptions, and donatio
 
 ## Related Links
 
-- [Payment Kit Documentation](https://www.arcblock.io/docs/arcblock-payment-kit/en/start-payment-react) - Official documentation with detailed guides and API references
-- [Example Implementation](https://github.com/blocklet/payment-kit/blob/master/blocklets/example/src/pages/checkout.jsx) - Complete example showing how to integrate the payment components
+- [Payment Kit Documentation](https://www.arcblock.io/docs/arcblock-payment-kit) - Official documentation with detailed guides and API references
 
 ## Installation
 

package/docs/_sidebar.md

@@ -0,0 +1,33 @@
+* [Overview](/overview.md)
+* [Getting Started](/getting-started.md)
+* [Providers](/providers.md)
+  * [PaymentProvider](/providers-payment-provider.md)
+  * [DonateProvider](/providers-donate-provider.md)
+* [Components](/components.md)
+  * [Checkout Components](/components-checkout.md)
+    * [CheckoutForm](/components-checkout-checkout-form.md)
+    * [CheckoutTable](/components-checkout-checkout-table.md)
+    * [CheckoutDonate](/components-checkout-checkout-donate.md)
+  * [UI Components](/components-ui.md)
+    * [PricingTable](/components-ui-pricing-table.md)
+    * [PaymentSummary](/components-ui-payment-summary.md)
+    * [Form Elements](/components-ui-form-elements.md)
+      * [AddressForm](/components-ui-form-elements-address-form.md)
+      * [PhoneInput](/components-ui-form-elements-phone-input.md)
+      * [CountrySelect](/components-ui-form-elements-country-select.md)
+      * [CurrencySelector](/components-ui-form-elements-currency-selector.md)
+  * [Business Logic Components](/components-business.md)
+    * [OverdueInvoicePayment](/components-business-overdue-invoice-payment.md)
+    * [ResumeSubscription](/components-business-resume-subscription.md)
+    * [Auto-Topup Components](/components-business-auto-topup.md)
+  * [History Components](/components-history.md)
+    * [CustomerInvoiceList](/components-history-invoice-list.md)
+    * [CustomerPaymentList](/components-history-payment-list.md)
+    * [CreditGrantsList](/components-history-credit-grants-list.md)
+    * [CreditTransactionsList](/components-history-credit-transactions-list.md)
+* [Guides](/guides.md)
+  * [Theming](/guides-theming.md)
+  * [Utilities](/guides-utilities.md)
+* [Hooks](/hooks.md)
+  * [useSubscription](/hooks-use-subscription.md)
+  * [useMobile](/hooks-use-mobile.md)

package/docs/components-business-auto-topup.md

@@ -0,0 +1,238 @@
+# Auto-Topup Components
+
+The auto-topup feature allows users to automatically recharge their credit balance when it falls below a specified threshold, ensuring uninterrupted service. This functionality is primarily managed through two components: `AutoTopup` and `AutoTopupModal`.
+
+It is highly recommended to use the `AutoTopup` component directly. It provides a complete UI for displaying the configuration status and internally manages the `AutoTopupModal`, offering a simplified and seamless integration experience.
+
+> **Note on Session Management:** All examples in this section use a custom hook `useSessionContext()` to retrieve `session` and `connectApi`. This is a placeholder for your application's own authentication context. For detailed instructions on setting up the required `PaymentProvider` and session context, please refer to the [PaymentProvider documentation](./providers-payment-provider.md).
+
+## AutoTopup
+
+The `AutoTopup` component is the primary entry point for this feature. It serves as a display card for the current auto-recharge settings and handles the presentation of the configuration modal. It supports several rendering modes to fit different UI needs.
+
+### Usage
+
+The component can be rendered in three different modes: `'default'`, `'simple'`, and `'custom'`.
+
+-   **default**: Renders a fully expanded card with all details visible.
+-   **simple**: Renders a collapsed card that can be expanded by the user to view details.
+-   **custom**: Provides a render prop for complete control over the UI, allowing you to build a custom display.
+
+```tsx
+import { AutoTopup, PaymentProvider } from '@blocklet/payment-react';
+import { useSessionContext } from '../hooks/session'; // Your custom session hook
+
+function CreditManagementPage({ currencyId }) {
+  const { session, connectApi } = useSessionContext();
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      {/* Default mode - fully expanded */}
+      <AutoTopup
+        currencyId={currencyId}
+        onConfigChange={(config) => {
+          console.log('Auto-topup config updated:', config);
+        }}
+      />
+
+      {/* Simple mode - collapsed by default */}
+      <AutoTopup
+        currencyId={currencyId}
+        mode="simple"
+        onConfigChange={(config) => {
+          console.log('Config updated:', config);
+        }}
+      />
+
+      {/* Custom mode - full control over rendering */}
+      <AutoTopup
+        currencyId={currencyId}
+        mode="custom"
+      >
+        {(openModal, config, paymentData, loading) => (
+          <div>
+            {loading ? (
+              <div>Loading...</div>
+            ) : (
+              <div>
+                <h3>Auto Recharge Status: {config?.enabled ? 'Active' : 'Inactive'}</h3>
+                <button onClick={openModal}>Configure</button>
+              </div>
+            )}
+          </div>
+        )}
+      </AutoTopup>
+    </PaymentProvider>
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `currencyId` | `string` | **Required.** The ID of the credit currency to configure auto-recharge for. |
+| `onConfigChange` | `(config: AutoRechargeConfig) => void` | Optional. A callback function that is triggered when the auto-recharge configuration is changed. |
+| `mode` | `'default' \| 'simple' \| 'custom'` | Optional. The rendering mode of the component. Defaults to `'default'`. |
+| `sx` | `SxProps` | Optional. Custom styles to be applied to the component using the MUI `sx` prop. |
+| `children` | `(openModal, config, paymentData, loading) => ReactNode` | Optional. A render prop function used only when `mode` is set to `'custom'`. It provides access to the modal trigger, configuration data, payment data, and loading state. |
+
+## AutoTopupModal
+
+The `AutoTopupModal` is a dialog component that allows users to enable, disable, and configure their auto-recharge settings. While it is integrated within the `AutoTopup` component, it can be used as a standalone component if you need to trigger the configuration from a custom UI element.
+
+### Usage
+
+You control the visibility of the modal using the `open` and `onClose` props. The `onSuccess` callback is fired when the configuration is saved successfully.
+
+```tsx
+import { AutoTopupModal, PaymentProvider } from '@blocklet/payment-react';
+import { useState } from 'react';
+import { useSessionContext } from '../hooks/session'; // Your custom session hook
+
+function AutoRechargeSettings({ currencyId }) {
+  const { session, connectApi } = useSessionContext();
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const handleSuccess = (config) => {
+    console.log('Auto-recharge configured:', config);
+    setModalOpen(false);
+  };
+
+  const handleError = (error) => {
+    console.error('Configuration failed:', error);
+  };
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <button onClick={() => setModalOpen(true)}>
+        Setup Auto-Recharge
+      </button>
+
+      <AutoTopupModal
+        open={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        currencyId={currencyId}
+        onSuccess={handleSuccess}
+        onError={handleError}
+        defaultEnabled={true} // Optionally, have the toggle enabled by default
+      />
+    </PaymentProvider>
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | **Required.** Controls whether the modal is visible. |
+| `onClose` | `() => void` | **Required.** A callback function to close the modal. |
+| `currencyId` | `string` | **Required.** The ID of the credit currency to configure. |
+| `customerId` | `string` | Optional. The customer ID. Defaults to the user from the current session. |
+| `onSuccess` | `(config: AutoRechargeConfig) => void` | Optional. A callback function executed on successful configuration. |
+| `onError` | `(error: any) => void` | Optional. A callback function executed if an error occurs. |
+| `defaultEnabled` | `boolean` | Optional. Sets the initial state of the 'enable' switch in the modal. Useful for quick-setup flows. |
+
+### Configuration Flow
+
+The following diagram illustrates the process of configuring auto-topup, including the authorization step required for payment methods.
+
+```d2
+shape: sequence_diagram
+
+User: "User"
+AutoTopupCard: "AutoTopup Component"
+AutoTopupModal: "Configuration Modal"
+BackendAPI: "Backend API"
+
+User -> AutoTopupCard: "Clicks 'Configure' or 'Setup'"
+AutoTopupCard -> AutoTopupModal: "Opens modal"
+User -> AutoTopupModal: "Fills in threshold, amount, etc."
+User -> AutoTopupModal: "Clicks 'Save'"
+AutoTopupModal -> BackendAPI: "POST /api/auto-recharge-configs/submit"
+
+auth: {
+  label: "Authorization Required"
+  BackendAPI -> AutoTopupModal: "Returns auth data (e.g., Stripe client_secret)"
+  AutoTopupModal -> User: "Renders payment form (e.g., StripeForm)"
+  User -> AutoTopupModal: "Completes payment authorization"
+  AutoTopupModal -> BackendAPI: "Confirms authorization"
+}
+
+BackendAPI -> AutoTopupModal: "Returns success response with new config"
+AutoTopupModal -> AutoTopupCard: "Fires onSuccess callback"
+AutoTopupModal -> User: "Closes modal"
+AutoTopupCard -> BackendAPI: "Refreshes configuration data"
+AutoTopupCard -> User: "Displays updated status"
+```
+
+## Complete Integration Example
+
+Here is a complete example of a credit management dashboard that integrates the `AutoTopup` component to manage multiple credit currencies. This demonstrates the recommended approach of letting `AutoTopup` handle the modal's presentation.
+
+```tsx
+import {
+  PaymentProvider,
+  AutoTopup,
+  CustomerInvoiceList,
+  Amount
+} from '@blocklet/payment-react';
+import { useState, useEffect } from 'react';
+import { Grid, Card, CardContent, Typography } from '@mui/material';
+import { useSessionContext } from '../hooks/session'; // Your custom session hook
+
+function CreditDashboard() {
+  const { session, connectApi } = useSessionContext();
+  const [creditCurrencies, setCreditCurrencies] = useState([]);
+
+  useEffect(() => {
+    // In a real app, you would fetch the user's available credit currencies
+    const fetchCurrencies = async () => {
+      const currencies = await fetchCreditCurrencies(); // Your API call
+      setCreditCurrencies(currencies);
+    };
+    
+    if (session.user) {
+      fetchCurrencies();
+    }
+  }, [session.user]);
+
+  const handleAutoTopupChange = (currencyId, config) => {
+    console.log(`Auto-topup updated for ${currencyId}:`, config);
+    // You might want to refetch currency data here
+  };
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <Grid container spacing={3}>
+        {creditCurrencies.map((currency) => (
+          <Grid item xs={12} md={6} key={currency.id}>
+            <Card>
+              <CardContent>
+                <Typography variant="h6">{currency.name} Balance</Typography>
+                <Typography variant="h4" color="primary">
+                  <Amount
+                    amount={currency.balance}
+                    decimal={currency.decimal}
+                    symbol={currency.symbol}
+                  />
+                </Typography>
+                
+                <AutoTopup
+                  currencyId={currency.id}
+                  mode="simple"
+                  onConfigChange={(config) => handleAutoTopupChange(currency.id, config)}
+                  sx={{ mt: 2 }}
+                />
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </PaymentProvider>
+  );
+}
+```
+
+This setup provides a robust and user-friendly interface for managing credit balances and auto-recharge settings within your application.