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:

  • Displayed upon logging in

  • Can be used to initiate any of the following actions::

  • 'Receive', 'withdraw', 'deposit', 'exchange', 'request',
    'send',
    'verify'

Announcements:

  • Displayed first in the cards list

  • Can consist of an image, a title, and a description.

  • Optional to include a redirect URL for tapping the card.

Alerts:

  • Displayed after announcements

  • Used to convey pertinent messages:

  • Variants: 'info', 'success', 'warning' and 'error'

Prompts:

  • Displayed after alerts

  • Tapping prompts will initiate the action associated with the prompt variant:

    'verify', 'bank', 'crypto' and 'default'

  • The variants, 'verify', 'bank', 'crypto' have actions (flows) associated with them while the 'default' variant will use the action specified in the action field:

    'Receive', 'withdraw', 'deposit', 'exchange', 'request', 'send',
    'verify'

Featured (Products and rewards)

Coming soon

Feed Tab:

Announcements:

  • Can be used in both the main and feed tabs

  • Can be used to introduce the cards below

Posts:

  • E.g. an interesting summary of the information contained in a web page which can be navigated to by tapping the post

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
}
}
}
},
Did this answer your question?