Cards UI
Cards UI is a simple user interface built on top of our cards API.
Introduction
Our Cards UI is a white-label solution that allows you to present card information to the user without the need to store or transmit card information directly. This provides the benefit of handling stringent PCI Compliance standards for you.
Demo
Recommended Flow
1. Issue Public Key
At your backend, where you have stored client_id and client_secret securely, issue a public key with scope CLIENT|CONTROLS and USER|GET.
2. Issue OAuth Key
Issue an Issue OAuth Key for the user, with scopes USER|GET, NODE|GET, NODES|GET, TRANS|GET, TRANS|POST.
- If you are using our Cards UI with SUBNETS, please also add
SUBNETS|GETandSUBNET|GET.
You can learn more about User Authentication on this page.
3. Test the UI
Next step is to go to the Cards UI and see if everything is rendering appropriately.
Link (for sandbox): https://uat-uiaas.synapsefi.com/card
Link (for production): https://uiaas.synapsefi.com/card
GET Params needed in the URL
| GET Param | Note |
|---|---|
| oauth_key | OAuth key of the user who needs to link new card node |
| public_key | Your public key |
| node_id | Synapse ID of the node |
If you are using debit card user interface with CARD-US nodes, the final URL would look like this:
https://uat-uiaas.synapsefi.com/card?oauth_key=oauth_key&public_key=public_key&node_id=node_id
If you are using debit card user interface with SUBNETS, the final URL would look like this:
Android webviews
If you are rendering this component inside an Android webview, please make sure that you have DOM storage enabled
settings.setDomStorageEnabled(true);
GET Params on redirect
GET Params returned on failure_uri:
| GET Param | Note |
|---|---|
| error_code | Error code from Errors Section |
| http_code | HTTP code from Errors Section |
| message | Reason for failure |
| user_id | Synapse ID of the user |
Customizing the UI
You can customize the following things on the UI
| Field | Comment |
|---|---|
| Color Palette | You can update the color with any hex value. By default it uses our colors |
| Logo | Any landscape logo (recommended: 1388 × 367 pixels). Please update the Light Landscape logo. By default it uses our logo |
| Failure URI | The link where the user will be redirected if actions are unsuccessful. Must follow Hypertext Transfer Protocol Secure (HTTPS) or Hypertext Transfer Protocol (HTTP). |
| Page Title for Unsaved Progress Warning | What title should go back warning page have |
| Transactions Controls | If the UI should display transactions associated with the card or not |
| Balance Controls | If the UI should display the balance of the card or not |
| Cash In / Out Controls | If UI should allow the user should be allowed to add or withdraw funds out of the card or not |
| Card Number Controls | If the card number should be visible by default or hidden |
| Preferences Controls | If the UI should display the card preferences controls. This includes card status, card pin update, and foreign transaction controls. |
If you wish to change any of these fields, please go to Client Settings on the dashboard to do so.
Updated almost 4 years ago