No-Code Overview
Introduction
Hydrogen No-Codes give both developers and non-developers a configurable application layer for financial products. All no-codes are production quality web and mobile applications, that are fully integrated into the Hydrogen data model, business logic, and back office.
To access our no-code library, login to the Hydrogen dev portal and navigate to the "Apps" tab on the top navigation. The following modules are all part of the no-code suite:
Web
Built for modern web browsers, and responsive for mobile.
Mobile
Built for modern mobile devices, both Android and iOS.
Each Hydrogen no-code solution is distinct, and is targeted for a specific intended use case. Please compare the options below to find the solution that best meets your needs:
| Solution | Intended User | Functionality | Technical Skills Required |
|---|---|---|---|
| Web Components | You have or will have your own hosted web application | - Control your own experience, login/logout, users, sessions - Embed modular fintech functionality (account opening, balances, analytics etc.) |
- Authenticating an API - Embedding HTML/JS |
| Mobile WebViews | You have or will have your own mobile app in the app store | - Control your own experience, login/logout, users, sessions - Embed modular fintech functionality (account opening, balances, analytics etc.) |
- Authenticating an API - Importing HTML/JS |
| White Label Web Apps | You do not have a web application or want a new white labeled app | - All hosting, experience, login/logout, users, sessions provided by Hydrogen - Toggle on/off features |
None required. Access to hosting provider to add DNS record if a custom domain is used. |
| White Label Mobile Apps | You do not have a mobile application or want a new app | - All hosting, experience, login/logout, users, sessions provided by Hydrogen - Toggle on/off features |
None required. Access to Apple and Android developer accounts to deploy and manage application. |
Design Configuration
All no-code apps can be configured to match the styling of your brand. Potential design configurations are explained in the guide below:
App Configuration
All no-codes are configurable using our no-code editor, and simple toggle on/off switches as seen in the example above. The configurations allow non-developers to customize the functionality of the app. Categories of configurations are explained below:
- App Design: Customize primary brand color and fonts. Overrides the universal design values set, so you can create different styles for various apps.
- App Features: Toggle on/off main functionality in the app
- App Settings: Choose from various app styles and default settings
Web Components
All Hydrogen UI components for the web are built using Web Component technology. According to webcomponents.org, "Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML." Hydrogen Web Components are self-contained widgets that perform API functions and complex orchestrations, and can either be used in isolation, or strung together to build larger applications
Whitelisting
Web Components will be embedded on your website and therefore require extra security to properly validate your access. On the "API Keys & Whitelists" page you will need to add the following values before you can start:
- IP Whitelist: The server that is calling the Hydrogen API to authenticate and get a token must be whitelisted for security. Please add the static ip4 to the input box.
- Domain Whitelist: The domain that you will be hosting the HTML embed client-side must also be added to the "API Keys & Whitelists" page, otherwise you will receive a CORS Access Control restriction error.
Authentication
All components require the generation of a single use token to verify the identity of the request owner. Before calling the service to retrieve an app_token, a Bearer access_token must first be generated using our OAuth 2.0 authorization service, with your client_id and client_secret. For those apps that return user level data, you will need to submit a Bearer access_token generated from the end client's username and password, in addition to your API keys. For more info on authentication, please see our guide here. The modal that displays the embed code for each app will tell you which OAuth grant type is required in addition to the app_name.
An access_token generated via the OAuth 2.0 Password grant type will be required for any components that create or use data specific to an end user. This is the case for many components. To properly authenticate the end user, you will need to create them as a username in our Nucleus Client service, and then use one of the options for the password explained in the guide below:
To generate a token for your app, call the following endpoint. Optionally, download our sample apps to view a working example, and client libraries in the most popular languages:
Client Libraries (Java, JS, PHP, Python, Ruby)
url -X GET https://api.hydrogenplatform.com/component/v1/app_token?app_name={app_name} \
-H "Authorization: Bearer {access_token}"If you would like to embed multiple components on the same page, you can generate tokens for each app using one call:
url -X GET https://api.hydrogenplatform.com/component/v1/app_token?app_name={app_name}&app_name={app_name}&app_name={app_name} \
-H "Authorization: Bearer {access_token}"As soon as the token is validated by our API when the app is embedded, it will be invalidated. When you reload the page you must generate a new token for security, otherwise your app will load no data.
In addition to an app-token, we also require a public-key be passed into all components as data attributes. You may find this token listed on the "API Keys & Whitelists" page of the developer portal. We use the public-key to identify developers on client-side apps, without exposing their OAuth credentials publicly.
Embedding
Embedding our components is as simple as pasting a few lines of HTML and JS code into your project. Please make sure you always include the embed code BEFORE any CSS AND JS.
Looking for a working example of how to embed components using our SDKs in popular JS frameworks? Download our sample apps below:
Here is a simple example using the Card Issuance:HTML
Replace the public-key and app-token in the HTML below using the values obtained from the Authentication section above. If the client-id is present in the embed code, you may optionally submit the Nucleus client_id to attribute the data, if you are authenticating as the app (client_credentials grant) and not the user (password grant).
<card-issuance public-key="{public key from API Keys page}" app-token="{app_token from component auth}" client-id="{optional client_id from Nucleus API}"></card-issuance>Some components like the Card Transactions below, allow an additional data attribute for a card-id. This is optional and if not explicitly supplied, cards for the authenticated user will automatically be pulled. If more than one card exists for the user, a select dropdown will display for the user to choose the card.
<card-transactions public-key="{public key from API Keys page}" app-token="{app_token from component auth}" card-id="{optional card_id from Nucleus API}"></card-transactions>JS
We will need to embed two javascript libraries to enable the Web Components from Hydrogen. The first library is hosted on the Hydrogen site, and contains a bundle of all CSS and JS necessary to run the app. Each set of apps will have a different bundle. Please make sure you copy the bundle referenced in the embed modal for the app.
<script src="https://cards.hydrogenplatform.com/bundle-web-components.js"></script>The second javascript library you must include is Polymer. This is a library created by Google that enables us to build cross-browser compatible apps and elements with web components.
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.1/custom-elements-es5-adapter.js"></script>
Mobile WebViews
For those users that have subscribed to our premium plans, you may also embed the UI components in any native mobile app using WebView technology. The WebView will use the same configuration and authentication as the Web Component, but is optimized for use in a mobile app. This optional configuration will automatically detect the User-Agent of the device as mobile and wrap the component inside a browser window. The component will be indistinguishable from any other content that is rendered natively in your app.
Installation
To render the WebViews in your iOS, Android, or React Native mobile app, please follow our guide below:
White Label Web Apps
White Labels are fully built web applications connected with all Hydrogen APIs. These turnkey solutions can be used by business users with no technical skills needed. All apps are lightly configurable through our dev portal and hosted by Hydrogen. Full white labels are distinguishable from the components in that they are full end-to-end user journeys with login/logout, sessions, sign ups, dashboards, and settings. Web apps are available on Hydrogen subdomains and can be configured for your company's brand including custom logos, colors, and fonts.
Hostnames
Hostnames of Hydrogen white label web apps can be routed in one of the following ways:
- Hydrogen Subdomain: If you do not have your own website and DNS, or wish to use the Hydrogen domain, you can choose a subdomain on Hydrogen such as
companyname.hydrogenplatform.comwhich will route to your white label app. - Custom CNAME: For those users that have subscribed to our Expand plan, you may also route a white label to a subdomain under your own TLD. This can be accomplished by adding a CNAME record at your DNS provider that directs to the hostname provided by Hydrogen on the dev portal.
For the custom CNAME option, we have instructions for a few of the most popular managers below. If your DNS is not listed below, please view their support to learn how to add a CNAME record.
SSL
Hydrogen white label apps require SSL (HTTPS) connections. Apps using Hydrogen subdomains (ex. companyname.hydrogenplatform.com) will automatically be assigned an SSL certificate. If you use a custom CNAME on your own domain, you can either submit an existing SSL certificate for the subdomain (or a wildcard certificate), or we can issue a certificate for you. Our customer success team will reach out to confirm.
White Label Mobile Apps
Coming Soon
All mobile apps are built in React Native for dual Android and iOS use. They have similar functionality to their web counterparts, but are optimized for mobile interactions such as swiping and dragging. They also include additional security functions such as PIN codes and facial recognition. Our white label apps have the same design and app configurations that are listed above. However, the apps will be hosted on a user's mobile device and downloaded from the Apple or Android app stores.