--- title: React.js Widgets slug: _ylly6L72rhECdFdoX1v5 docTags: createdAt: 2024-07-18T19:57:14.465Z --- Here is the list of all the available components that you can integrate into your own React.js application. ## Available Widgets All widgets use internally some hooks to retrieve and update data. You can subscribe to them, to show loading or error statuses. Or just to get the raw data to render in the format you desire. (Advanced). [You can read more about hooks here](docId\:wMqXhaR7t8Fwot5qkfWHw) Each view has linked the hooks that are consuming, so you can subscribe to them. ### Billed Usage ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/V6GRwqx9CGfvQ9ZVLxcL2_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/awYqR5t0IB2mDKrgx7REK_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/dhf-ZJyQnMQ2FtiZiDOQC_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/qGU8bmrc1MUwrb082viRT_image.png) **How to import:** `import { CostAndBilledUsage } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/Rh3LnOQZiXoeOIfkP_5Li_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/9b6WgzmMlGchD1TXLWD_6_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/ekuD6lsrYK2cmynt6qZBW_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/WvgQuJg0go0DFrHv07-f0_image.png) **Used Hooks** - [Hooks | useMeters()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | useUsage()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Charge Explorer Bar Graph ![](https://files.readme.io/303fe34-pic.png) **How to import:** `import { CostExplorerBarGraph } from "@amberflo/uikit";` **Available Props** There are no specific props for this view. To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) **Used Hooks** - [Hooks | useCost()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | usePricingPlanDetails()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Charge Table ![](https://files.readme.io/e8447cc-pic.png) **How to import:** `import { CostExplorerTable } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/eWSgNj5yLME_QKkVettxh_image.png) - [Hooks | useCost()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Included Units ![](https://files.readme.io/ca2d8c4-Screen_Shot_2023-01-09_at_11.36.15_AM.png) **How to import:** `import { IncludedUnits } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/VrVQmrg7LyuP_UrEPpUeb_image.png) **Used hooks** - [Hooks | useLatestInvoice()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | usePricingPlanDetails()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Credits Ledger ![](https://files.readme.io/3911365-image.png) ![](https://files.readme.io/9efa3e1-image.png) **How to import:** `import { CreditsLedger } from "@amberflo/uikit";` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/n66wAIg3gyKHJt4rw5Gy5_image.png) **Used Hooks** - [Hooks | useCreditsLedger()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | usePrepaidSummary()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Invoice Details ![](https://files.readme.io/321afbe-pic.png) **How to import:** `import { InvoiceDetails } from '@amberflo/uikit'` Available Props To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/vPIjPfaZxC0frndoJOSCP_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/Lg1nuLe63CbTQ6TjK42mr_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/4Se92D9tR-OBpMOLobnBR_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/pSkg8yCVTsm-TNnTP_3pc_image.png) -**Note:** Invoice data displayed in this component is affected by [Invoice-related options](docId\:jHFrRrrevQKbDEpckSup6). **Used Hooks** - [Hooks | useInvoiceDetails()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | useLatestInvoice()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | usePrepaidSummary()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Invoice PDF ::Image[]{src="https://files.readme.io/32b2095-Screen_Shot_2022-12-08_at_3.31.21_PM.png" size="38" width="202" height="164" position="center" showCaption="false"} **How to import:** `import { InvoicePdf } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/JLEDxLIYQpyMEVkWtq7Rb_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/WfNTpakQm7oK8JOhRD1GL_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/xeMP0lQTepVRXCyGma0Iq_image.png) **Note:** Invoice data displayed in this component is affected by [Invoice-related options](docId\:jHFrRrrevQKbDEpckSup6). **Used Hooks** - [Hooks | usePrepaidSummary()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Invoices List ![](https://files.readme.io/508b2b5-pic.png) **How to import:** `import { InvoicesList } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/DnuAa6Dd5g0nUxxCJ8iPX_image.png) **Note:** Invoice data displayed in this component is affected by [Invoice-related options](docId\:jHFrRrrevQKbDEpckSup6). **Used Hooks** - [Hooks | useInvoices()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | usePrepaidSummary()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Orders Usage Graph and Table ![](https://files.readme.io/e6498f5-Screenshot_2024-01-08_at_2.20.36_PM.png) How to import: `import { OrdersUsageGraphAndTable } from '@amberflo/uikit'` To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) . The following Common Props are not available for this component: `callToAction`, `title`, `withContainer` and `withTitle`. The [ReactJS Integration | Common Graph Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) are also available for this component. **Used Hooks** - [Hooks | useInvoices()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | useMeters()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | useProductItems()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | useUsage()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Prepaid Summary Graph ![](https://files.readme.io/daa8671-image.png) **How to import:** `import { PrepaidSummaryGraph } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/1dK6qN0JnrhmHz3VUT8Wk_image.png) **Used Hooks** - [Hooks | useLatestInvoice()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | usePrepaidSummary()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Prepaid Summary Table ![](https://files.readme.io/b610468-pic.png) **How to import:** `import { PrepaidSummaryTable } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/PeVXUNGmTLEZPpGLVje42_image.png) **Used Hooks** - [Hooks | useProductItems()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | usePrepaidSummary()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Pricing Plan ![](https://files.readme.io/d6c46e9-pic.png) How to import: `import { PricingPlan } from '@amberflo/uiki'` To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/BlftuRA96LY1BarZ5l5rf_image.png) Used Hooks - [Hooks | useCurrentPricingPlan()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Pricing Plan Summary ![](https://files.readme.io/8796582-Screen_Shot_2023-02-02_at_4.18.53_AM.png) How to import: `import { PricingPlanSummary } from '@amberflo/uikit'` Available Props To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/DIevy2cV7HFLhL7FUMajw_image.png) **Used Hooks** - [Hooks | useCurrentPricingPlan()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Usage Graph ![](https://files.readme.io/1571fa0-pic.png) How to import: `import { UsageByMeterLineGraph } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/8ys1Gy5l9_hWZsm4rHIUW_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/WxwJ0N_qRZt-VVJCUyjbu_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/kEcLe0ORhzAEkzSDmX_vW_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/R9PTeqbcpnXtkhZmaa6Bv_image.png) **Used Hooks** - [Hooks | useMeters()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | useUsage()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Usage Table ![](https://files.readme.io/fbd2eec-pic.png) **How to import:** `import { UsageByMeterTable } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/Cc7qm1imLA2u13xxALDqN_image.png) **Used Hooks** - [Hooks | useMeters()](docId\:wMqXhaR7t8Fwot5qkfWHw) - [Hooks | useUsage()](docId\:wMqXhaR7t8Fwot5qkfWHw) ### Order List ![](https://files.readme.io/bc35cdb-image.png) **How to import:** `import { OrderList } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/7LSZNQdFWbyofsoBpCiu7_image.png) ### Order Create ![](https://files.readme.io/8f3c4fb-image.png) ![](https://files.readme.io/c095161-image.png) **How to import:** `import { OrderCreate } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/pdUEj00uCQxtTiMRiOTI8_image.png) ### Order Details ![](https://files.readme.io/fe531f2-image.png) **How to import:** `import { OrderDetails } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/YFTa-eR1Y51IXYNiTUwTO_image.png) ### Orders Usage Graph and Table ![](https://files.readme.io/99bba84-image.png) **How to import:** `import { OrdersUsageGraphAndTable } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) To see graph props check [ReactJS Integration / Graph Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ### Stripe Setup Intent ![](https://files.readme.io/41ec243-Screen_Shot_2023-01-06_at_4.50.00_PM.png) ![](https://files.readme.io/2948d7d-Screen_Shot_2023-01-06_at_4.50.09_PM.png) **How to import:** `import { StripeSetupIntent } from '@amberflo/uikit'` **Available Props** To see common props check [ReactJS Integration / Common Props](docId:9ZJRkjeaTQ1Bb5XoBcZno) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/V3ezVVoezhDrjjn9dsQXx_image.png) After the payment method is set. A redirect will happen to the `returnUrl`. It can be the same url as the actual one. If the redirect url, has this component included, even if hidden, it will automatically set the default payment method. If not, read below how to set the default payment method. ## How To Get Secret Key From Stripe Call this endpoint: ��*** POST*** [https://app.amberflo.io/customer-portal/setup-intent](https://app.amberflo.io/customer-portal/setup-intent) **Payload:** :::BlockQuote \{ "provider": "stripe" } ::: **Response Body:** :::BlockQuote \{ "id": "seti\_1LIBSbFZnIN3GxYXnNiuvLGe", "clientSecret": "seti\_3MKDTdHBpKP5IzAZpNiuvLGe\_secret\_M0BqOmOj5LWcKZ910nPEzRCy1wFfe8M" } ::: ## How to make a payment the default payment method 1. After creating a new payment method, you’ll get redirected to a new URL with some query string parameters. The redirect is needed in order to get the query param called `setup_intent_client_secret` to retrieve payment method from Stripe. 2. You need to retrieve the payment method from Stripe, by running: `const setupIntentClientSecret = getQueryString("setup_intent_client_secret");` `const { setupIntent } = await stripe.retrieveSetupIntent(setupIntentClientSecret);` 3. Submit the payment method to endpoint to set as default payment method: ***📘POST*** [https://app.amberflo.io/customer-portal/payment-method](https://app.amberflo.io/customer-portal/payment-method) **Payload** :::BlockQuote \{ provider: "stripe", paymentMethodId: \, } ::: If on the redirect url, you place the `StripeSetupIntent`component, even if hidden, it will trigger automatically the set default payment method. You can also subscribe to `usePaymentMethod() `hook from `@maberflo/uikit/hooks`, like: ```javascript const { isSuccess } = usePaymentMethod() ``` This isSuccess will change to true after setting the payment method. ## Common Props These are props common to all views, and non of them are required: ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/1U6KlFoonxAYfbze2yAIx_image.png) ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/MdtmWBIdYNmvhIwW6TlVG_image.png) ## Common Date Picker Props There are a few props shared by views that have a date picker. And none of them are required. Views with date picker: - [Cost and Billed Usage](docId:9ZJRkjeaTQ1Bb5XoBcZno) - [Cost explorer Bar Graph](docId:9ZJRkjeaTQ1Bb5XoBcZno) - [Cost table](docId:9ZJRkjeaTQ1Bb5XoBcZno) - [Usage Graph](docId:9ZJRkjeaTQ1Bb5XoBcZno) - [Usage Table](docId:9ZJRkjeaTQ1Bb5XoBcZno) Shared props: ![](https://api.archbee.com/api/optimize/GQ6FhONXoR2DQjp03hOcB/y1-9PK_p6x-uFYEOwzEf5_image.png) ## Common Graph Props There are a few props shared by views that have a graph. And none of them are required. Views with graphs: - [Cost and Billed Usage](docId:9ZJRkjeaTQ1Bb5XoBcZno) - [Cost explorer Bar Graph](docId:9ZJRkjeaTQ1Bb5XoBcZno) - [Usage Graph](docId:9ZJRkjeaTQ1Bb5XoBcZno) - [Orders Usage Graph and Table](docId:9ZJRkjeaTQ1Bb5XoBcZno) Shared props: | **Name** | **Type** | **Default** | **Description** | | ------------------ | ------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `graphTextColor` | `string` | `undefined` | Color for the axis of graphs | | customGraphOptions | ChartOptions | undefined | We use [Chart.js](https://www.chartjs.org/docs/latest/) for our graphs. This prop allows to customize the graph using all the options they provide. For more info check: [https://www.chartjs.org/docs/latest/general/options.html](https://www.chartjs.org/docs/latest/general/options.html)

For example, you could change text colors, lines or bars weight, add animations, etc. |