Debit Cards UI

Debit Cards UI is a simple user interface built on top of our debit cards API.

You can play with the demo right here.

Steps to deploying Debit Cards UI are the following

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 OAuth Key for the user, with scopes USER|GET, NODE|GET, NODES|GET, TRANS|GET, TRANS|POST.

3. Test the UI

Next step is to go to the Debit 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 debit card node

public_key

Your public key

node_id

Synapse ID of the node

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). By default it uses our logo

Failure URI

The link where the user will be redirected if actions are unsuccessful.

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 Manager on the dashboard to do so. (FAQ on how to get to the Client Manager).

Debit Cards UI


Debit Cards UI is a simple user interface built on top of our debit cards API.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.