Nothing Found

Tilia UI Sandbox users guide

This topic describes the components of the UI sandbox and how to use them.

The Tilia UI Sandbox presents Tilia User Interface (UI) widgets as components in a container page. With this, you can simulate and test workflows that require user interaction without the need to develop an app or a web-page to present the Tilia UI widgets.

Set up your UI Sandbox

To open the UI widgets in the UI Sandbox, you need:

  1. Tilia developer credentials. Contact us if you need these credentials.
  2. A user account ID

This information is entered into these fields at the top of the UI Sandbox.

UI Sandbox developer credentials

Set your Tilia developer credentials

After you have your Tila developer credentials, enter them in Client info fields in the top-left corner of the UI Sandbox.

To add your Developer credentials to the UI Sandbox:

  1. Open the UI Sandbox at https://fake-integrator.staging.tilia-inc.com/ui/ .
  2. In the ENV corner of the display, choose ADD CLIENT , to see these fields.

    UI Sandbox developer credentials entry

  3. Enter your Tilia Developer credentials, and then choose SET .

Set the user account ID

After you enter your developer credentials, enter the account ID of the user account with which you want to interact through the UI Sandbox.

UI Sandbox account entry

To set the user account of your UI Sandbox:

  1. In ACCOUNT ID , enter the account ID.
  2. Press the Enter key to accept the entry.

With your Tilia Developer credentials and the user account ID set, the UI Sandbox is ready to use.

To interact with another user account, repeat this procedure with a different account ID.

UI Sandbox Components

This section describes the elements of the UI Sandbox interface shown in this image.

UI Sandbox screen

Left column

The left column includes these controls.

UI Sandbox - left column table

Top control bar

The top control bar includes these controls.

UI Sandbox - top bar table

User's account information

ACCOUNT ID contains the account ID of the user account the widgets access.

Interaction controls

These controls configure the behavior of the widget.

PAYLOAD

(Not shown) Some widgets display a PAYLOAD button, which opens a text editor in which you can modify the request payload passed to the widget.

HIDE EXIT BUTTONS
  • SELECTED : Hides the widget's exit or cancel controls.
  • NOT SELECTED : Displays the widget's exit and cancel controls.
FULL WIDTH
  • SELECTED : Fills the widget display space with the widget interface.
  • NOT SELECTED : Centers the widget interface between left and right margins of the widget display space.
RESIZE
  • SELECTED : The widget is displayed in its full height and the entire widget scrolls with the browser window.
  • NOT SELECTED : The widget header is fixed and the list below the widget header scrolls independently while the browser window display does not move.
DEBUG

Enables the output of additional informational messages to the browser's console log.

Widget display space

Beneath the top control bar and to the right of the left column is the widget display space in which the selected widget is displayed. Some widgets have configuration controls that are displayed in this space as well.

After a widget is closed, the response data returned by the widget appears in this space, as this example shows.

widget-exit-displaye

UI Sandbox Widgets

The Tilia UI Sandbox supports these UI widgets.

ADD CARD

Adds a payment card to the user's account.

Displays the Add credit card portion of the Payment selection widget.

ADD CARD configuration controls

The top control bar buttons control this widget. This widget doesn't display any additional configuration controls.

ADD PM

Adds a payment method to the user's account. The payment method can be a PayPal account or a credit card.

Displays the Add payment method portion of the Payment selection widget.

ADD PM configuration controls

The top control bar buttons control this widget; however, the RESIZE and HIDE EXIT buttons have no effect on this widget.

This widget also displays the CONFIG control with these options:

  • PayPal shows only the PayPal payment method sign up interface
  • Credit Card shows only the credit card interface
  • None shows PayPal interface with the Add Credit Card option

DEPOSIT

This widget is not supported.

CHECKOUT

Displays the contents of an invoice to the user so they can select and attach a payment method to complete the transaction.

Displays the Checkout widget using a default invoice that has several line items and a transaction fee. Only transactions in USD are supported.

CHECKOUT configuration controls

The top control bar buttons control this widget; however, the HIDE EXIT control does not affect this widget. The Checkout widget also displays these configuration controls.

PAYLOAD (Checkout)

The PAYLOAD button in the top control bar opens an editor in which you can modify the invoice displayed in the widget. For information about the request buffer, see Checkout widget and Authorize invoice.

FLOW CONFIG

On the left side of the widget display space, the FLOW CONFIG controls include:

  • HIDE WALLETS : Controls the display of the user's wallets as a payment option. Note that wallets are only displayed if they have funds.
  • UPDATE : Updates the widget with the current state of the HIDE WALLETS state.

KYC

Accepts the information from a user to provide the information required by the KYC (Know Your Customer) evaluation. If the user has not accepted Tilia's Terms of Service (TOS), the TOS acceptance interface is displayed before the KYC interface.

If the user's KYC information has already been entered and the user has been approved, no interface is displayed.

KYC configuration controls

The top control bar buttons control this widget. The KYC widget displays the following configuration controls. After you change a value, choose the UPDATE button to update the widget.

  • FLOW CONTROL : Updates the widget's configuration at the bottom of the configuration controls to customize the widget's behavior.
    • BYPASS TOS : has no effect on this widget.
    • EXCLUDE PAYPAL (WHEN AVAILABLE) : has no effect on this widget.
    • USE ONLY BASIC VERIFICATION IN KYC (WHEN AVAILABLE) : affects the widget flow. When checked, the widget renders the Tax Info Collection flow. When unchecked, it renders the full KYC flow.
  • SECTION HEADER : has no effect on this widget.
  • PURCHASE BUTTON : does not affect this widget.
  • TRANSACTION DETAILS : is not used by this widget.
  • POST OAUTH RETURN OVERRIDE : sets the postOAuthURLOverride propery in the response buffer.

PAYMENT SELECTION

Displays the Payment Selection widget for users to select a saved payment method to complete a transaction. If the user doesn't have any payment methods saved, the Add payment method interface appears before the PAYMENT SELECTION interface is displayed. The user can also add a new payment method while using this widget.

If the user has not accepted Tilia's Terms Of Service, the TOS acceptance user interface is shown, unless the BYPASS TOS (WHEN AVAILABLE) is checked.

PAYMENT SELECTION configuration controls

The top control bar buttons control this widget. The PAYMENT SELECTION widget also displays these configuration controls in the widget display space:

  • FLOW CONFIG : does not affect this widget.
  • SECTION HEADER : does not affect this widget.
  • PURCHASE BUTTON : does not affect this widget.
  • TRANSACTION DETAILS Sets the data in the postOAuthURLOverride object returned in the response body. USD wallets with no usable balance are not displayed. When HIDE WALLETS checked, the widget doesn't show the wallet option, even if it has a USD wallet with a usable balance.

PAYOUT (legacy)

Displays the Payout widget for the user to specify the transfer of funds from their USD wallet to an external account. If the user has not accepted Tilia's Terms of Service (TOS), the TOS interface is displayed before any other interface.

If the user has not accepted Tilia's Terms Of Service, the TOS acceptance user interface is shown, unless the BYPASS TOS (WHEN AVAILABLE) is checked.

If the user's KYC information is not complete, the KYC interface is displayed before the Payout widget, unless the USE ONLY BASIC VERIFICATION IN KYC (WHEN AVAILABLE) configuration option is checked.

PAYOUT (legacy) configuration controls

The top control bar buttons control this widget. These configuration controls are also displayed in the widget display space:

PAYOUT FULL

Displays the Payout (full) widgets for the user to specify the transfer of funds from their USD wallet to an external account.

If the user has not accepted Tilia's Terms of Service (TOS), the TOS interface is displayed before any other interface.

If the user's KYC information is not complete, the KYC interface is displayed before the Payout widget.

PAYOUT FULL configuration controls

The top control bar buttons control this widget. These configuration controls are also displayed in the widget display space:

  • CURRENCY : Sets the currency used, if different from USD .
  • FIXED AMOUNT : Sets the payout (Cashout) amount in USD to display in the widget.
  • HIDE WALLET BALANCE : When checked, the payout wallet balance is not displayed.
  • USE ONLY BASIC VERIFICATION IN KYC (WHEN AVAILABLE) : affects the KYC interface flow. When checked, the KYC interface renders the Tax Info Collection flow. When unchecked, it renders the full KYC flow.
  • UPDATE : updates the widget with the current configuration.

TRANSACTION DETAILS

Displays the details of the specified transaction in the Transaction Details widget.

TRANSACTION DETAILS configuration controls

The top control bar buttons control this widget. These configuration controls are also displayed in the widget display space:

  • UPDATE : updates the widget with the current transaction ID.
  • TRANSACTION ID : The transaction ID of the transaction to display in the widget.

TRANSACTION HISTORY

Displays the current user's transactions in the Transaction history widget.

TRANSACTION HISTORY configuration controls

The top control bar buttons control this widget. It has no other configuration controls.

TOS

Displays the Terms of Service (TOS) widget, unless the user has already accepted the TOS. If the user has already accepted the TOS, only the final STATE response body is displayed instead of the widget.

TOS configuration controls

The top control bar buttons control this widget. It has no other configuration controls.

Customizing the appearance of the UI Sandbox

At the bottom of the left column, you can find the Theme Config controls that enable manipulation of the theme properties that are passed to the widget.

For information about customizing the appearance of the widgets, see UI Customization.

Configuration controls

The UI Sandbox's left column contains these controls to configure the widget's appearance.

  • RESET : Returns the primary and background color values to their default values.
  • PRIMARYCOLOR : Sets the primaryColor property of the widget's theme object. Choose SET to select a new color value.
  • BACKGROUNDCOLOR : Sets the backgroundColor property of the widget's theme object. Choose SET to select a new color value.

The UI Sandbox's Top bar contains these controls to configure the widget's appearance.

  • Hide exit buttons : Hides the exit/cancel controls in the widget.
  • Full width : Fills the Widget space with the widget controls. Normally, the widget controls occupy the center of the widget space with left and right margins.