UI SDK - Vanilla Javascript integration

<script
  type="module"
  src="https://js.amberflo.io/index.1.0.30.js">
</script>

<script>
  window.onload = () => {
    amberflo = new AmberfloSDK("{{YOUR_SESSION_TOKEN}}");
  };
</script>

<div
  class="amberflo"
  data-amberflo-type="usage-table"
  data-amberflo-colors="#1565c0"
  data-amberflo-font-size="16px"
  data-amberflo-font-family="Roboto, Helvetica, Arial, serif"
  data-amberflo-font-custom="https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;500&family=Great+Vibes&family=Rubik&display=swap"
  data-amberflo-with-container="true"
  data-amberflo-with-title="true"
  data-amberflo-title="Custom Title"
></div>

const express = require('express');
const app = express();
const request = require('request');

app.get('/amberflo-session', async (req, res) => {
  request({
    method: 'POST',
    uri: 'http://app.amberflo.io/session',
    body: {
      "customerId": "{{DESIRED_CUSTOMER_ID}},
      "expirationEpochMilliSeconds": {{EXPIRATION_DATE_IN_MILLISECONDS}}
    },
    headers: {
      "X-API-KEY": "{{YOUR_API_KEY}}"
    }
  }, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            res.json({ sessionToken: response.sessionToken })
        }
    }
  );
})

const response = fetch('/amberflo-session').then(function(response) {
  return response.json();
}).then(function(responseJSON) {
  const sessionToken = responseJson.sessionToken
})

<div
  id="usage-table"
  class="amberflo"
  data-amberflo-type="usage-table"
  data-amberflo-meters="SampleMeter"
></div>

<script>
  window.onload = () => {
    after setting up your session token...
    document
      .getElementById("usage-table")
      .addEventListener("datechange", (event) => {
        console.log(event.details);
        // { startDate: 1670112000000, endDate: 1672779539731 }
      });
  };
</script>

<div
  class="amberflo"
  data-amberflo-type="usage-table"
  data-amberflo-meters="ApiCalls,cluster_count,cluster_instance_hours,cluster_partitions,cluster_reads,cluster_storage,cluster_writes,CpuHours,DataVolumeGb,number_of_runs"
></div>

<div
  class="amberflo"
  data-amberflo-type="usage-graph"
  data-amberflo-meter="ApiCalls"
></div>

<div
  class="amberflo"
  data-amberflo-type="cost-table"
></div>

<div
  class="amberflo"
  data-amberflo-type="invoice-details"
  data-amberflo-invoice-date="1/9/2022"
></div>

<div
  class="amberflo"
  data-amberflo-type="invoices-list"
></div>

<div
  class="amberflo"
  data-amberflo-type="order-usage-graph-table"
></div>

<div
  class="amberflo"
  data-amberflo-type="prepaid-summary"
></div>

<div
  class="amberflo"
  data-amberflo-type="prepaid-table"
></div>

<div
  class="amberflo"
  data-amberflo-type="stripe-payment-method"
  data-amberflo-publishable-key="pk_test_62MIq3eFMMJsb2ZF6ivl10ycy6kVNhPau9QnrwJE649HGEEz3vZNDo5XA5I6ZdHRosbjGq8eAGPBrE0wrl7Q0Fxn1i00CaNu0Ar"
  data-amberflo-button-text="Submit"
  data-amberflo-return-url="https://mysite.com/stripe"
  data-amberflo-colors="#1565c0"
></div>

<script
  type="module"
  src="https://js.amberflo.io/index.1.0.24.js"
></script>

<script>
  window.onload = () => {
    amberflo = new AmberfloSDK("{{YOUR_SESSION_TOKEN}}");
  };
</script>

<div
  class="amberflo"
  data-amberflo-type="pricing-plan"
  data-amberflo-pricing-plan="65ad692f-b7ae-4886-ab8a-3d0146d0817d"
  data-amberflo-title="Plan Name"
  data-amberflo-product-item-lines="30$ / GB,Custom  Text"
  data-amberflo-fixed-price="true"
  data-amberflo-price="$40 Fixed Price"
  data-amberflo-colors="#0078D4"
></div>

<div
  id="orderList"
  class="amberflo"
  data-amberflo-type="order-list"
></div>

<script>
  document.getElementById("orderList").addEventListener("addorder", (event => {
    // Do something when add order button is pressed. For instance:
    window.location.href = `/add-order/${event.detail}`
  });
                                                        
  document.getElementById("orderList").addEventListener("rowclick", (event => {
    // Do something when an order row is clicked. For instance:
    window.location.href = `/order-details/${event.detail.id}`
  });
</script>

<div
  id="orderDetails"
  class="amberflo"
  data-amberflo-type="order-details"
  data-amberflo-order-id="65ad692f-b7ae-4886-ab8a-3d0146d0817d"
></div>

<script>
  document.getElementById("orderDetails").addEventListener("back", (event => {
    // Do something when back button is pressed. For instance:
    window.location.href = "/order-list"
  });
</script>

<div
  id="orderCreate"
  class="amberflo"
  data-amberflo-type="order-create"
  data-amberflo-product-item-id="65ad692f-b7ae-4886-ab8a-3d0146d0817d"
></div>

<script>
  document.getElementById("orderCreate").addEventListener("back", (event => {
    // Do something when back button is pressed. For instance:
    window.location.href = "/order-list"
  });
                                                          
   document.getElementById("orderCreate").addEventListener("cancel", (event => {
    // Do something when cancel button is pressed. For instance:
    window.location.href = "/order-list"
  });
</script>

<div
  class="amberflo"
  data-amberflo-type="order-usage-graph-table"
></div>

<html>
    <head>
        <script id="amberflo-script" type="module" src="https://js.amberflo.io/index.1.0.24.js"></script>
        <script>
            window.onload = () => {
                // YOU SHOULD NOT RETRIEVE A SESSION TOKEN LIKE THIS IN YOUR CLIENT-SIDE CODE.
                // THIS IS ONLY FOR DEMONSTRATION PURPOSES TO TRY OUT A QUICK WORKING EXAMPLE.
                // Please see this section (https://docs.amberflo.io/docs/uikit-sdk#get-session-token)
                // for more information on how to provide a session token to your client.
                fetch("https://app.amberflo.io/session", {
                    method: "POST",
                    body: JSON.stringify({
                        // replace customer123 with an actual customer id
                        customerId: "customer123",
                    }),
                    headers: {
                        // YOU SHOULD NOT HAVE YOUR API KEY IN YOUR CLIENT SIDE CODE.
                        // THIS IS ONLY FOR DEMONSTRATION PURPOSES TO TRY OUT A QUICK WORKING EXAMPLE.
                        // replace your_api_key with your account's API key.
                        // Please see this section for more info.
                        // (https://docs.amberflo.io/docs/uikit-sdk#get-session-token)
                        "x-api-key": "your_api_key"
                    },
                })
                .then((response) => response.json())
                .then((responseJson) => {
                    amberflo = new AmberfloSDK(responseJson.sessionToken);

                    // This is an example of using an event.
                    // This will log the date info when changing the date on the usage graph using the date picker.
                    document
                    .getElementById("usage-graph")
                    .addEventListener("datechange", (event) => {
                        console.log(event.detail);
                        // { startDate: 1674000000000, endDate: 1676603751569 }
                    });
                });
            };
        </script>
    </head>

    <body>
        <!-- replace meter-api-name with actual meter API Name -->
        <div
            id="usage-graph"
            class="amberflo meter"
            data-amberflo-type="usage-graph"
            data-amberflo-meter="meter-api-name"
        ></div>
        <div
            id="usage-table"
            class="amberflo"
            data-amberflo-type="usage-table"
            data-amberflo-with-container="true"
            data-amberflo-with-title="true"
            data-amberflo-title="Usage Table"
        ></div>
    </body>
</html>