# Enabling Elements for the Web

Like other platforms, Browsers requires the same two or three simple steps: Add a web view, handle events/messages, and, in some cases, authenticate the user.

## Step 1. Set Up an Iframe

Component used: [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe)

Required Web View Configuration
- Enable JavaScript
- Enable Web Storage (DOM Storage)


#### Iframe Sample

elements-in-browser.html
    <!-- Step 1: Set Up an Iframe - Note: Setting src in JavaScript -->
    <iframe
      id="dpElement"
      style="width: 375px; height: 180px; border: 0; border-radius: 10px; overflow: 'hidden';"
    ></iframe>
    </div>

    <div>
      <h4>Element Log</h4>
      <textarea id="dpElementLog" cols="80" rows="15" readonly></textarea>
    </div>

    <div>
      <h4>Send an Event to the Element Above</h4>
      <div>Type: <input id="dpElementEventType" value="GIVE_TOKEN" /></div>
      <div>Payload (JSON):</div>
      <!-- prettier-ignore -->
      <textarea id="dpElementEventPayload" cols="80" rows="3">{ "token": "" }</textarea>
      <div><button id="sendEvent">Send Event to Element</button></div>
    </div>

    <script>
      const dpElementOrigin = 'https://elements.uat.dailypay.com';
      const dpElementUrl = new URL(dpElementOrigin + '/v1/available-earnings');
      dpElementUrl.searchParams.append('client_id', 'REPLACE_WITH_YOUR_CLIENT_ID');
      dpElementUrl.searchParams.append('implementation_id', 'REPLACE_WITH_YOUR_IMPLEMENTATION_ID');

      const elementIframe = document.getElementById("dpElement");
      elementIframe.src = dpElementUrl;
      
## Step 2. Set Up Event/Message Handling

### Sending Events

Method used: [window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)

#### Send Message Sample Code

elements-in-browser.html
      // Step 2: Set Up Communications: Event/Message Handling
      // Step 2a: Send Event to Elements
      function sendEvent(type, payload) {
        if (elementIframe && elementIframe.contentWindow && type && payload) {
          eventMessage = { type: type, payload: payload };
          console.log("Sending payload to iframe:", eventMessage);
          logArea.value = "Sending:" + JSON.stringify(eventMessage) + "\n" + logArea.value;
          elementIframe.contentWindow.postMessage(
            eventMessage,
            dpElementOrigin,
          );
        } else {
          console.log(
            "Iframe or contentWindow not available, or type/payload missing.",
          );
        }
      }

      
### Listening for Events

Method used: [window.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

#### Receive Message Sample Code

elements-in-browser.html
      // Step 2b: Listen for events from Elements
      window.addEventListener("message", function (event) {
        // Log the raw event for debugging and illustration
        console.log("Raw event received:", event);
        // It is crucial to verify the origin of the message for security reasons.
        if (event.origin !== dpElementOrigin) {
          console.log("Message from unexpected origin:", event.origin);
          return;
        }

        console.log("Message received from Element:", event.data);
        var dpEventMessage = null;
        switch (typeof event.data) {
          case "object":
            // Available earnings seems to return an object
            // If event.data is already an object, use it directly
            dpEventMessage = event.data;
            break;
          case "string":
            // Tokenization seems to return a JSON string
            // If event.data is a JSON string, parse it
            try {
              dpEventMessage = JSON.parse(event.data);
            } catch (e) {
              console.error("Error parsing JSON string:", e);
              dpEventMessage = null;
            }
            break;
          default:
            console.error("Unexpected data type:", typeof event.data);
            dpEventMessage = null;
            return;
        }
        if (dpEventMessage && dpEventMessage.type) {
          logArea.value = "Receiving:" + JSON.stringify(dpEventMessage) + "\n" + logArea.value;
          switch (dpEventMessage.type) {
            case "DAILYPAY_CARD_TOKENIZE_RESPONSE":
              // Call create account function
              console.log("DAILYPAY_CARD_TOKENIZE_RESPONSE received: ", receivedMessage.success);
              console.log("DAILYPAY_CARD_TOKENIZE_RESPONSE received: ", receivedMessage.response);
              break;
            case "EXT_LOG":
              // Log if needed
              console.log("EXT_LOG received: ", dpEventMessage.payload);
              break;
            case "EXT_NEED_AUTH":
              // Call login function
              console.log("EXT_NEED_AUTH received: ", dpEventMessage.payload);
              break;
            default:
              console.log("Unhandled event type: ", dpEventMessage.type);
          }
        }
      });
      
## Step 3. Set Up User Authentication (Optional)

elements-in-browser.html
      // Step 3: Setup Authentication
      //
      // Code sample coming soon
      //
      
## Full Sample Code

elements-in-browser.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DailyPay Elements Sample</title>
  </head>
  <body>
    <h1>DailyPay Elements</h1>

    <div>
      <h4>Element</h4>
    <!-- Step 1: Set Up an Iframe - Note: Setting src in JavaScript -->
    <iframe
      id="dpElement"
      style="width: 375px; height: 180px; border: 0; border-radius: 10px; overflow: 'hidden';"
    ></iframe>
    </div>

    <div>
      <h4>Element Log</h4>
      <textarea id="dpElementLog" cols="80" rows="15" readonly></textarea>
    </div>

    <div>
      <h4>Send an Event to the Element Above</h4>
      <div>Type: <input id="dpElementEventType" value="GIVE_TOKEN" /></div>
      <div>Payload (JSON):</div>
      <!-- prettier-ignore -->
      <textarea id="dpElementEventPayload" cols="80" rows="3">{ "token": "" }</textarea>
      <div><button id="sendEvent">Send Event to Element</button></div>
    </div>

    <script>
      const dpElementOrigin = 'https://elements.uat.dailypay.com';
      const dpElementUrl = new URL(dpElementOrigin + '/v1/available-earnings');
      dpElementUrl.searchParams.append('client_id', 'REPLACE_WITH_YOUR_CLIENT_ID');
      dpElementUrl.searchParams.append('implementation_id', 'REPLACE_WITH_YOUR_IMPLEMENTATION_ID');

      const elementIframe = document.getElementById("dpElement");
      elementIframe.src = dpElementUrl;
      // Step 1 End

      const logArea = document.getElementById("dpElementLog");
      const typeInput = document.getElementById("dpElementEventType");
      const payloadInput = document.getElementById("dpElementEventPayload");
      const sendEventButton = document.getElementById("sendEvent");

      // Step 3: Setup Authentication
      //
      // Code sample coming soon
      //
      // Step 3 End

      // Step 2: Set Up Communications: Event/Message Handling
      // Step 2a: Send Event to Elements
      function sendEvent(type, payload) {
        if (elementIframe && elementIframe.contentWindow && type && payload) {
          eventMessage = { type: type, payload: payload };
          console.log("Sending payload to iframe:", eventMessage);
          logArea.value = "Sending:" + JSON.stringify(eventMessage) + "\n" + logArea.value;
          elementIframe.contentWindow.postMessage(
            eventMessage,
            dpElementOrigin,
          );
        } else {
          console.log(
            "Iframe or contentWindow not available, or type/payload missing.",
          );
        }
      }

      // Step 2b: Listen for events from Elements
      window.addEventListener("message", function (event) {
        // Log the raw event for debugging and illustration
        console.log("Raw event received:", event);
        // It is crucial to verify the origin of the message for security reasons.
        if (event.origin !== dpElementOrigin) {
          console.log("Message from unexpected origin:", event.origin);
          return;
        }

        console.log("Message received from Element:", event.data);
        var dpEventMessage = null;
        switch (typeof event.data) {
          case "object":
            // Available earnings seems to return an object
            // If event.data is already an object, use it directly
            dpEventMessage = event.data;
            break;
          case "string":
            // Tokenization seems to return a JSON string
            // If event.data is a JSON string, parse it
            try {
              dpEventMessage = JSON.parse(event.data);
            } catch (e) {
              console.error("Error parsing JSON string:", e);
              dpEventMessage = null;
            }
            break;
          default:
            console.error("Unexpected data type:", typeof event.data);
            dpEventMessage = null;
            return;
        }
        if (dpEventMessage && dpEventMessage.type) {
          logArea.value = "Receiving:" + JSON.stringify(dpEventMessage) + "\n" + logArea.value;
          switch (dpEventMessage.type) {
            case "DAILYPAY_CARD_TOKENIZE_RESPONSE":
              // Call create account function
              console.log("DAILYPAY_CARD_TOKENIZE_RESPONSE received: ", receivedMessage.success);
              console.log("DAILYPAY_CARD_TOKENIZE_RESPONSE received: ", receivedMessage.response);
              break;
            case "EXT_LOG":
              // Log if needed
              console.log("EXT_LOG received: ", dpEventMessage.payload);
              break;
            case "EXT_NEED_AUTH":
              // Call login function
              console.log("EXT_NEED_AUTH received: ", dpEventMessage.payload);
              break;
            default:
              console.log("Unhandled event type: ", dpEventMessage.type);
          }
        }
      });
      // Step 2 End

      sendEventButton.addEventListener("click", function () {
        if (typeInput.value && payloadInput.value) {
          try {
            var parsedInput = JSON.parse(payloadInput.value);
          } catch (e) {
            console.error("Invalid JSON in payload input:", e);
            return;
          }
          sendEvent(typeInput.value, parsedInput);
        } else {
          console.log("Type or payload input is empty.");
        }
      });
    </script>
  </body>
</html>