Usage and Billing Portal
Portal, Widgets, and APIs
6 min
the amberflo customer usage and billing portal allows accounts to extend amberflo’s capabilities directly to their customers there are multiple ways to implement this functionality depending on your needs and tech stack you can choose from the following options use the customer usage and billing portal apis deploy the fully hosted amberflo io customer usage and billing portal web application amberflo embeddable ui components for react js, use the embeddable ui kit react js for vanilla javascript, use the ui sdk vanilla javascript integration workflow authenticate the customer user in your app call customer usage and billing portal session api with the customer id and your api key to generate a customer specific session see portal, widgets, and apis /#customer usage and billing portal session use that session token in any of the customer usage and billing portal apps customer usage and billing portal session when using the customer usage and billing portal, the api key authenticates the amberflo account and grants access to customer data however, in the context of the portal, it’s important to restrict data access to a specific customer to enable customer access to the portal, a session token is required this token securely encapsulates both the amberflo account id and the customer id your application is responsible for authenticating the customer, after which it should call the session api using the customer id to generate the session token this process enables single sign on (sso) between your application and the amberflo customer usage and billing portal note the customer id must already exist in amberflo for the session token to be created session endpoint https //app amberflo io/session https //app amberflo io/session api reference create a session curl location request post 'https //app amberflo io/session' \\ \ header 'content type application/json' \\ \ header 'x api key idtoken {{api key}}' \\ \ data raw '{ "customerid" "bca5be25 f145 4448 b85c 1236dce1a2ac", "expirationepochmilliseconds" 1644004025153, "returnurl" "https //starkindustries com/" }' api response { "url" "https //portal amberflo io/session/9cd47871391814249841843c2fd82c6483f2c47bbc7f2c1fba6f975f1f9d7599605c4a580f99?returnurl=https%3a%2f%2fstarkindustries com%2f", "sessiontoken" "9cd47871391814249841843c2fd82c6483f2c47bbc7f2c1fba6f975f1f9d7599605c4a580f99" } the response from the session api includes two key values sessiontoken – this token can be used to authenticate api requests to the customer usage and billing portal it should be included in the x api key header or used with the amberflo ui kit url – this is the landing page url for the customer usage and billing portal web app it includes the session token and a returnurl parameter the returnurl allows users to navigate back to your application from the portal sessiontoken can now be used to call customer usage and billing portal apis adding a custom business logo if you're using the fully hosted amberflo io customer usage and billing portal web app, you can customize the appearance by adding your own business logo to do this, navigate to settings > business details within amberflo click the + button to upload your logo accepted formats include png, jpg, and svg, and the file size must be under 1mb this allows your customers to see your brand identity consistently across the portal a preview of what your new customer portal header will look like will appear after uploading your new logo you now have a custom business logo being displayed in your customer portal customer portal customization you can configure which items to show in the customer portal to do this, go to amberflo io integrations > customer portal