No-Code Quickstart Guide

Follow the guide below to learn how to use Hydrogen no-code apps



No-Code Overview


Introduction

Hydrogen No-Codes give both developers and non-developers a configurable application layer for cards, money, payments, and wealth 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:

Design Guide


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

Whitelisting Guide

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:

  1. 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.
  2. 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 Admin service, and then use one of the options for the password explained in the guide below:

Password Auth Guide

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)

React & Angular Sample Apps

url -X GET https://[sandbox][api].hydrogenplatform.com/admin/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://[sandbox][api].hydrogenplatform.com/admin/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_token in all components. You may find this token listed on the "API Keys & Whitelists" page of the developer portal. We use the public_token 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:

React & Angular Sample Apps

Here is a simple example using the PFM budget:

HTML

Replace the {public_key} and {app_token} in the HTML below using the values obtained from the Authentication section above:

<pfm-budget public-key="{public_key}" app-token="{app_token}"></pfm-budget>
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://api.hydrogenplatform.com/app/pfm/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:

WebView Installation Guide



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:

  1. 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.com which will route to your white label app.
  2. 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.

  • CloudFlare
  • GoDaddy
  • Namecheap
  • Squarespace
  • Wix
  • 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

    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.

    Deployment

    Mobile deployment requires some extra steps that a member of the Hydrogen customer success team will assist you with. We have described the process for both Apple and Android below:

  • Android Deployment
  • iOS Deployment
  • By using this website, you agree to our use of cookies, and you acknowledge that you have read and understand our Privacy Policy and Terms of Use   Continue