How do cards work?
Cards are a great new way to communicate with mobile and web wallet users. They can be used for a number of purposes and provide flexible ways of guiding your customers and providing them with useful information. This guide will help you enable and customize cards suited to your needs.
Where are cards displayed?
There are three tabs that house all cards except popups.
Main - landing page. Good for alerts and announcements
Feed - swipe left from Main. Good for sharing announcements and posts (posts can redirect the user to web links)
Transaction history - This category simply lists the transaction history and can be set to show or hide only (coming soon)
Card types:
Main Tab:
Popups:
| 
|
Announcements:
|
 |
Alerts:
Prompts:
| 
|
Featured (Products and rewards) | Coming soon |
Feed Tab:
Announcements:
| 
|
Posts:
| 
|
How to enable and customize cards
Copy the script that follows into the config JSON in the App Extension on the base level and edit the fields according to their descriptions in the table below.
Be sure to note the format and content required for each field.
It’s safer to copy the entire script and disable the cards that you do not wish to include in your app using the “enable” field. This means that if you’d like to include another type of card in the future, all that’s needed is to enable it.
If you’d like more than one of any type of card, simply copy and paste the fields related to a card at the same level as the original, being careful to include the braces at the start and end of the section. In the example script, two Posts are included and can be used as an example of how to add multiples of the same card.
List of fields:
Field name | Options | Description |
“id” | Free text | Card identifier |
“image” | url | Link to the location of the image to be used for the card |
“title” | Free text | Card title |
“enable” | 'true' / 'false' | Enable or disable the card |
"endDate" | yyyy-mm-dd | Card end date |
"startDate"
| yyyy-mm-dd | Card start date |
"description"
| Free text | Subtext on the card below the title |
"dismissible"
| 'true' / 'false' | Allow or disallow users to dismiss (hide) the card |
"redirectURL" | url | Selecting the card redirects the user to this url |
"action”
| 'Receive', 'withdraw', 'deposit', 'exchange', 'request',
'send',
'verify'
| Selecting the action label initiates the action flow |
"actionLabel"
| Free text | A button on the card that initiates an action flow |
"variant"
| Prompt: 'verify', 'bank', 'crypto' and 'default'
Alert: 'info', 'success', 'warning' and 'error'
| Prompts and alerts have preconfigured variants based on their purpose. |
"hideRewards"
| 'true' / 'false' | Set this to True to hide featured rewards from the home page |
"hideProducts" | 'true' / 'false' | Set this to True to hide featured products from the home page |
Example script:
"cards": {
"home": {
"feed": {
"posts": [
{
"id": "post_1",
"image": "https://i.imgur.com/R7jE2QA.png",
"title": "For Fintechs",
"enable": true,
"endDate": "2022-05-16 00:00",
"startDate": "2021-03-16 00:00",
"description": "Building the next Paypal, Venmo, Revolut, or Coinbase? Rehive is a great starting point to save time and cost!",
"dismissible": false,
"redirectURL": "https://rehive.com/solutions/fintechs/"
},
{
"id": "post_2",
"image": "https://i.imgur.com/JV63sO8.png",
"title": "Heads up merchants!",
"enable": true,
"endDate": "2022-05-16 00:00",
"startDate": "2021-03-16 00:00",
"description": "Our web app supports merchant management features. Checkout the merchant portal for any type of business in your marketplace",
"dismissible": false,
"redirectURL": "https://rehive.com/merchant-dashboard/"
}
],
"announcement": {
"id": "explore",
"image": "https://i.imgur.com/t7zNjC4.png",
"title": "Latest news",
"description": "Welcome to our app, check out the latest news below!",
"dismissible": true
}
},
"main": {
"popup": {
"id": "verify",
"image": "https://i.imgur.com/yfyqwFT.png",
"title": "Let's get started!",
"action": "verify",
"endDate": "2022-05-16 00:00",
"startDate": "2021-03-16 00:00",
"actionLabel": "Verify",
"description": "Verify your account to start transacting.",
"dismissible": false
},
"alerts": [
{
"id": "info",
"endDate": "2022-05-16 00:00",
"variant": "info",
"startDate": "2021-03-16 00:00",
"description": "This is a demo app. You are not using real money",
"dismissible": false
}
],
"prompts": [
{
"id": "verify",
"title": "Complete verification",
"action": "verify",
"enable": true,
"variant": "verify",
"description": "Tap the banner to complete your onboarding",
"dismissible": false
}
],
"announcement": {
"id": "welcome",
"image": "https://i.imgur.com/Qdmzm9s.png",
"title": "Welcome to the demo",
"description": "Explore the app and enjoy your stay",
"dismissible": false
}
}
}
},