{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-products/rest/elements/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["partial","code-snippet","json-schema","login-link"]},"type":"markdown"},"seo":{"title":"Enabling Elements for the Web","description":"Embed DailyPay On Demand Pay into your applications with our APIs and SDKs.","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":["openapi"],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"enabling-elements-for-the-web","__idx":0},"children":["Enabling Elements for the Web"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-set-up-an-iframe","__idx":1},"children":["Step 1. Set Up an Iframe"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Component used: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe"},"children":["iframe"]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Required Web View Configuration"},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enable JavaScript"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enable Web Storage (DOM Storage)"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"iframe-sample","__idx":2},"children":["Iframe Sample"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"../code-samples/browser/generic-example.html","language":"html","title":"elements-in-browser.html","header":{"title":"elements-in-browser.html","controls":{"copy":{}}},"lang":"html","source":"    <!-- Step 1: Set Up an Iframe - Note: Setting src in JavaScript -->\n    <iframe\n      id=\"dpElement\"\n      style=\"width: 375px; height: 180px; border: 0; border-radius: 10px; overflow: 'hidden';\"\n    ></iframe>\n    </div>\n\n    <div>\n      <h4>Element Log</h4>\n      <textarea id=\"dpElementLog\" cols=\"80\" rows=\"15\" readonly></textarea>\n    </div>\n\n    <div>\n      <h4>Send an Event to the Element Above</h4>\n      <div>Type: <input id=\"dpElementEventType\" value=\"GIVE_TOKEN\" /></div>\n      <div>Payload (JSON):</div>\n      <!-- prettier-ignore -->\n      <textarea id=\"dpElementEventPayload\" cols=\"80\" rows=\"3\">{ \"token\": \"\" }</textarea>\n      <div><button id=\"sendEvent\">Send Event to Element</button></div>\n    </div>\n\n    <script>\n      const dpElementOrigin = 'https://elements.uat.dailypay.com';\n      const dpElementUrl = new URL(dpElementOrigin + '/v1/available-earnings');\n      dpElementUrl.searchParams.append('client_id', 'REPLACE_WITH_YOUR_CLIENT_ID');\n      dpElementUrl.searchParams.append('implementation_id', 'REPLACE_WITH_YOUR_IMPLEMENTATION_ID');\n\n      const elementIframe = document.getElementById(\"dpElement\");\n      elementIframe.src = dpElementUrl;\n      ","wrapContents":true},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-set-up-eventmessage-handling","__idx":3},"children":["Step 2. Set Up Event/Message Handling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"sending-events","__idx":4},"children":["Sending Events"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Method used: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"},"children":["window.postMessage"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Please ",{"$$mdtype":"Tag","name":"MarkdocLoginLink","attributes":{},"children":[]}," to view this content."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"send-message-sample-code","__idx":5},"children":["Send Message Sample Code"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"../code-samples/browser/generic-example.html","language":"javascript","title":"elements-in-browser.html","header":{"title":"elements-in-browser.html","controls":{"copy":{}}},"lang":"javascript","source":"      // Step 2: Set Up Communications: Event/Message Handling\n      // Step 2a: Send Event to Elements\n      function sendEvent(type, payload) {\n        if (elementIframe && elementIframe.contentWindow && type && payload) {\n          eventMessage = { type: type, payload: payload };\n          console.log(\"Sending payload to iframe:\", eventMessage);\n          logArea.value = \"Sending:\" + JSON.stringify(eventMessage) + \"\\n\" + logArea.value;\n          elementIframe.contentWindow.postMessage(\n            eventMessage,\n            dpElementOrigin,\n          );\n        } else {\n          console.log(\n            \"Iframe or contentWindow not available, or type/payload missing.\",\n          );\n        }\n      }\n\n      ","wrapContents":true},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"listening-for-events","__idx":6},"children":["Listening for Events"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Method used: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"},"children":["window.addEventListener"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Please ",{"$$mdtype":"Tag","name":"MarkdocLoginLink","attributes":{},"children":[]}," to view this content."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"receive-message-sample-code","__idx":7},"children":["Receive Message Sample Code"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"../code-samples/browser/generic-example.html","language":"javascript","title":"elements-in-browser.html","header":{"title":"elements-in-browser.html","controls":{"copy":{}}},"lang":"javascript","source":"      // Step 2b: Listen for events from Elements\n      window.addEventListener(\"message\", function (event) {\n        // Log the raw event for debugging and illustration\n        console.log(\"Raw event received:\", event);\n        // It is crucial to verify the origin of the message for security reasons.\n        if (event.origin !== dpElementOrigin) {\n          console.log(\"Message from unexpected origin:\", event.origin);\n          return;\n        }\n\n        console.log(\"Message received from Element:\", event.data);\n        var dpEventMessage = null;\n        switch (typeof event.data) {\n          case \"object\":\n            // Available earnings seems to return an object\n            // If event.data is already an object, use it directly\n            dpEventMessage = event.data;\n            break;\n          case \"string\":\n            // Tokenization seems to return a JSON string\n            // If event.data is a JSON string, parse it\n            try {\n              dpEventMessage = JSON.parse(event.data);\n            } catch (e) {\n              console.error(\"Error parsing JSON string:\", e);\n              dpEventMessage = null;\n            }\n            break;\n          default:\n            console.error(\"Unexpected data type:\", typeof event.data);\n            dpEventMessage = null;\n            return;\n        }\n        if (dpEventMessage && dpEventMessage.type) {\n          logArea.value = \"Receiving:\" + JSON.stringify(dpEventMessage) + \"\\n\" + logArea.value;\n          switch (dpEventMessage.type) {\n            case \"DAILYPAY_CARD_TOKENIZE_RESPONSE\":\n              // Call create account function\n              console.log(\"DAILYPAY_CARD_TOKENIZE_RESPONSE received: \", receivedMessage.success);\n              console.log(\"DAILYPAY_CARD_TOKENIZE_RESPONSE received: \", receivedMessage.response);\n              break;\n            case \"EXT_LOG\":\n              // Log if needed\n              console.log(\"EXT_LOG received: \", dpEventMessage.payload);\n              break;\n            case \"EXT_NEED_AUTH\":\n              // Call login function\n              console.log(\"EXT_NEED_AUTH received: \", dpEventMessage.payload);\n              break;\n            default:\n              console.log(\"Unhandled event type: \", dpEventMessage.type);\n          }\n        }\n      });\n      ","wrapContents":true},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-set-up-user-authentication-optional","__idx":8},"children":["Step 3. Set Up User Authentication (Optional)"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"../code-samples/browser/generic-example.html","language":"javascript","title":"elements-in-browser.html","header":{"title":"elements-in-browser.html","controls":{"copy":{}}},"lang":"javascript","source":"      // Step 3: Setup Authentication\n      //\n      // Code sample coming soon\n      //\n      ","wrapContents":true},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"full-sample-code","__idx":9},"children":["Full Sample Code"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"../code-samples/browser/generic-example.html","language":"html","title":"elements-in-browser.html","header":{"title":"elements-in-browser.html","controls":{"copy":{}}},"lang":"html","source":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>DailyPay Elements Sample</title>\n  </head>\n  <body>\n    <h1>DailyPay Elements</h1>\n\n    <div>\n      <h4>Element</h4>\n    <!-- Step 1: Set Up an Iframe - Note: Setting src in JavaScript -->\n    <iframe\n      id=\"dpElement\"\n      style=\"width: 375px; height: 180px; border: 0; border-radius: 10px; overflow: 'hidden';\"\n    ></iframe>\n    </div>\n\n    <div>\n      <h4>Element Log</h4>\n      <textarea id=\"dpElementLog\" cols=\"80\" rows=\"15\" readonly></textarea>\n    </div>\n\n    <div>\n      <h4>Send an Event to the Element Above</h4>\n      <div>Type: <input id=\"dpElementEventType\" value=\"GIVE_TOKEN\" /></div>\n      <div>Payload (JSON):</div>\n      <!-- prettier-ignore -->\n      <textarea id=\"dpElementEventPayload\" cols=\"80\" rows=\"3\">{ \"token\": \"\" }</textarea>\n      <div><button id=\"sendEvent\">Send Event to Element</button></div>\n    </div>\n\n    <script>\n      const dpElementOrigin = 'https://elements.uat.dailypay.com';\n      const dpElementUrl = new URL(dpElementOrigin + '/v1/available-earnings');\n      dpElementUrl.searchParams.append('client_id', 'REPLACE_WITH_YOUR_CLIENT_ID');\n      dpElementUrl.searchParams.append('implementation_id', 'REPLACE_WITH_YOUR_IMPLEMENTATION_ID');\n\n      const elementIframe = document.getElementById(\"dpElement\");\n      elementIframe.src = dpElementUrl;\n      // Step 1 End\n\n      const logArea = document.getElementById(\"dpElementLog\");\n      const typeInput = document.getElementById(\"dpElementEventType\");\n      const payloadInput = document.getElementById(\"dpElementEventPayload\");\n      const sendEventButton = document.getElementById(\"sendEvent\");\n\n      // Step 3: Setup Authentication\n      //\n      // Code sample coming soon\n      //\n      // Step 3 End\n\n      // Step 2: Set Up Communications: Event/Message Handling\n      // Step 2a: Send Event to Elements\n      function sendEvent(type, payload) {\n        if (elementIframe && elementIframe.contentWindow && type && payload) {\n          eventMessage = { type: type, payload: payload };\n          console.log(\"Sending payload to iframe:\", eventMessage);\n          logArea.value = \"Sending:\" + JSON.stringify(eventMessage) + \"\\n\" + logArea.value;\n          elementIframe.contentWindow.postMessage(\n            eventMessage,\n            dpElementOrigin,\n          );\n        } else {\n          console.log(\n            \"Iframe or contentWindow not available, or type/payload missing.\",\n          );\n        }\n      }\n\n      // Step 2b: Listen for events from Elements\n      window.addEventListener(\"message\", function (event) {\n        // Log the raw event for debugging and illustration\n        console.log(\"Raw event received:\", event);\n        // It is crucial to verify the origin of the message for security reasons.\n        if (event.origin !== dpElementOrigin) {\n          console.log(\"Message from unexpected origin:\", event.origin);\n          return;\n        }\n\n        console.log(\"Message received from Element:\", event.data);\n        var dpEventMessage = null;\n        switch (typeof event.data) {\n          case \"object\":\n            // Available earnings seems to return an object\n            // If event.data is already an object, use it directly\n            dpEventMessage = event.data;\n            break;\n          case \"string\":\n            // Tokenization seems to return a JSON string\n            // If event.data is a JSON string, parse it\n            try {\n              dpEventMessage = JSON.parse(event.data);\n            } catch (e) {\n              console.error(\"Error parsing JSON string:\", e);\n              dpEventMessage = null;\n            }\n            break;\n          default:\n            console.error(\"Unexpected data type:\", typeof event.data);\n            dpEventMessage = null;\n            return;\n        }\n        if (dpEventMessage && dpEventMessage.type) {\n          logArea.value = \"Receiving:\" + JSON.stringify(dpEventMessage) + \"\\n\" + logArea.value;\n          switch (dpEventMessage.type) {\n            case \"DAILYPAY_CARD_TOKENIZE_RESPONSE\":\n              // Call create account function\n              console.log(\"DAILYPAY_CARD_TOKENIZE_RESPONSE received: \", receivedMessage.success);\n              console.log(\"DAILYPAY_CARD_TOKENIZE_RESPONSE received: \", receivedMessage.response);\n              break;\n            case \"EXT_LOG\":\n              // Log if needed\n              console.log(\"EXT_LOG received: \", dpEventMessage.payload);\n              break;\n            case \"EXT_NEED_AUTH\":\n              // Call login function\n              console.log(\"EXT_NEED_AUTH received: \", dpEventMessage.payload);\n              break;\n            default:\n              console.log(\"Unhandled event type: \", dpEventMessage.type);\n          }\n        }\n      });\n      // Step 2 End\n\n      sendEventButton.addEventListener(\"click\", function () {\n        if (typeInput.value && payloadInput.value) {\n          try {\n            var parsedInput = JSON.parse(payloadInput.value);\n          } catch (e) {\n            console.error(\"Invalid JSON in payload input:\", e);\n            return;\n          }\n          sendEvent(typeInput.value, parsedInput);\n        } else {\n          console.log(\"Type or payload input is empty.\");\n        }\n      });\n    </script>\n  </body>\n</html>\n","wrapContents":true},"children":[]}]},"headings":[{"value":"Enabling Elements for the Web","id":"enabling-elements-for-the-web","depth":1},{"value":"Step 1. Set Up an Iframe","id":"step-1-set-up-an-iframe","depth":2},{"value":"Iframe Sample","id":"iframe-sample","depth":4},{"value":"Step 2. Set Up Event/Message Handling","id":"step-2-set-up-eventmessage-handling","depth":2},{"value":"Sending Events","id":"sending-events","depth":3},{"value":"Send Message Sample Code","id":"send-message-sample-code","depth":4},{"value":"Listening for Events","id":"listening-for-events","depth":3},{"value":"Receive Message Sample Code","id":"receive-message-sample-code","depth":4},{"value":"Step 3. Set Up User Authentication (Optional)","id":"step-3-set-up-user-authentication-optional","depth":2},{"value":"Full Sample Code","id":"full-sample-code","depth":2}],"frontmatter":{"seo":{"title":"Enabling Elements for the Web"}},"lastModified":"2026-07-14T14:30:25.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/rest/elements/developer-guide/browser","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}