Learn how to embed Hydrogen Card Components using React and Node.

Read our guides below to become more familiar with how our components are authenticated and embedded in this app.

Web Component Guide

Authentication Guide

1. Node.js Compatible with <= v14.17.4
2. IP & Domain Whitelist

You must run the app on a real domain that you can whitelist on the Hydrogen portal in #2 above (localhost cannot be whitelisted), otherwise you will receive CORS Access-Control errors on the components. If you do wish to run the app locally, the app will still generate tokens and embed the components, as well as allow you to login.

The following Hydrogen Web Components are used in the sample app.

Pre-Login

1. Card Issuance

Uses the client_credentials OAuth grant type to issue a card for a brand new client that hasn't yet been created. If you wish to issue a card for a client that has already been signed up, you can either pass in a Nucleus client-id to the embed code, or embed post-login using the password grant type below.

Post-Login

1. Card Balance
2. Card Transactions

Uses the password OAuth grant type to only pull in balance and transaction data for the authenticated cardholder.

1. Navigate to the .env file in the backend-node folder
2. Update the following fields:

TENANT_NAME={YOUR OAUTH CLIENT_ID}
TENANT_PASSWORD={YOUR OAUTH CLIENT_SECRET}
PUBLIC_KEY={YOUR PUBLIC KEY}
BASE_PATH=https://api.hydrogenplatform.com/component/v1

You can find your credentials on the "API Keys & Whitelists" link on the header of the account portal.

3. To test components post-login that use the password OAuth grant, you will need to create a username and password in the admin user service. Please read our docs here.

Open the command line, and follow the instructions below.

1. Navigate to the node-sdk folder and then run the following command:

sudo npm link

2. Navigate out of the current folder to the app-token-react folder, and run the following commands:

sudo npm install
sudo npm start

Your browser should open at http://localhost:7029/ with a Login screen displayed. The frontend React app is now running.

3. Finally, we will run the backend app. Open a new tab. Then navigate out of the current folder to the backend-node folder, and run the following commands:

sudo npm link ../node-sdk
node server.js

The backend Node server should now be running with a message Server is listening on port 3005. If you refresh the browser window now, you should see the Card Issuance component display.