Elements are web properties hosted by DailyPay that provide a simple, "low code" mechanism to deliver on-demand pay and other DailyPay services to your users. Elements are designed to be delivered in a "web view" or iframe and use cross-origin communication (events or “post messages”) to communicate with your application.
Elements can be implemented in two or three easy steps, depending on the Element utilized:
- Set up a web view or iframe
- Set up event/message handling
- Set up user authenticatication (optional)
Please see one of our Elements Platform Guides, for specific instructions for your environment: Android, iOS, React, Web
Because Elements are hosted by DailyPay, they must be rendered in a web view or iframe. While web views have been common in web applications for some time, there is growing use in mobile applications and some of the best examples are available from Shopify and Stripe.
- Enable JavaScript
- Enable Web Storage (DOM Storage)
It is critical that your web view can securely interact with the Element. Each Element utilizes “post message” APIs to enable cross-origin communications between the application and the embedded web view. Depending on your platform, the cross-origin communication may be referred to as an event or a message. In addition, it is most likely that the event will be received as a string (Android, iOS), but in some cases an object is returned (browser). If the Element returns a string, it will be valid JSON that you may parse into an object using the appropriate mechanism.
To handle Elements' communications, your app will need to do two things:
- Listen for events, verify the sending URL origin, and take the appropriate action based on the event type received
- Send events (usually a required response, such as authorization) and specify the receiver's URL origin
Please Log In to view this content.
Please Log In to view this content.
Note: Not all Elements require authentication. Some Elements, such as Call to Action and Debit Card Tokenization, do not require auth at all!
Elements use the same authentication mechanism as the DailyPay REST API. The auth experience may be enhanced with additional OIDC or SAML configurations that will reduce the burden on the user (see Trust Relationship Authentication). More information on OIDC and SAML options is available. Because each implementation is unique, DailyPay will work with your development team to suggest an approach to obtaining user access tokens that best serves your application's user experience.
Basic authentication steps:
- Elements that require authentication will emit an event when loaded indicating the need for an authorization token to render additional content. Implement a listener to detect when an Element is ready to receive an authorization token.
- Complete the authorization code flow.
- Pass only the access token (not the ID nor refresh token, even if available) to the Element using the appropriate “post message”.
- Enable WebView debugging to see console messages
- Check network connectivity if widget fails to load
- Verify that JavaScript is enabled in the WebView