{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["openapiLink"]},"type":"markdown"},"seo":{"title":"Tilia UI Sandbox users guide","description":"Tilia Wallet Developer Documentation","siteUrl":"https://thunes-tilia-docs.redocly.app/","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tilia-ui-sandbox-users-guide","__idx":0},"children":["Tilia UI Sandbox users guide"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This topic describes the components of the UI sandbox and how to use them."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"set-up-your-ui-sandbox","__idx":1},"children":["Set up your UI Sandbox"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To open the UI widgets in the UI Sandbox, you need:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Tilia developer credentials."," ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/contact-sales/"},"children":["Contact us"]}," if you need these credentials."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A user account ID"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This information is entered into these fields at the top of the UI Sandbox."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/ui-sand-developer-cred-display.7a0e6cc7bddfc03082fb807afcf39cd41fc2e32f419130f0e1a2fc98529afad6.9c1bb791.png","alt":"UI Sandbox developer credentials"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"set-your-tilia-developer-credentials","__idx":2},"children":["Set your Tilia developer credentials"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After you have your Tila developer credentials, enter them in Client info fields"," ","in the top-left corner of the UI Sandbox."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["To add your Developer credentials to the UI Sandbox:"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Open the UI Sandbox at ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://fake-integrator.staging.tilia-inc.com/ui/"},"children":["https://fake-integrator.staging.tilia-inc.com/ui/"]},"."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ENV"]}," corner of the display, choose ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ADD CLIENT"]},", to see these fields."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/ui-sand-dev-cred-entry-display.e3e2a992b3c92faff97e849c6d23f3e685ed1786019ad4f1915abd3f7829fa64.9c1bb791.png","alt":"UI Sandbox developer credentials entry"},"children":[]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enter your Tilia Developer credentials, and then choose ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SET"]},"."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"set-the-user-account-id","__idx":3},"children":["Set the user account ID"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After you enter your developer credentials, enter the account ID of the"," ","user account with which you want to interact through the UI Sandbox."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/ui-sand-account-entry-display.2c5450839d3fd7664d1deaa5c53482900f4684176091eac2bf83cdadd318a7a0.9c1bb791.png","alt":"UI Sandbox account entry"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["To set the user account of your UI Sandbox:"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ACCOUNT ID"]},", enter the account ID."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Press the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Enter"]}," key to accept the entry."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With your Tilia Developer credentials and the user account ID set, the UI Sandbox is ready to use."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To interact with another user account, repeat this procedure with a different account ID."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"ui-sandbox-components","__idx":4},"children":["UI Sandbox Components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This section describes the elements of the UI Sandbox interface shown in this image."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/ui-sand-screen-display-annotated.1cc2600d8232c1b37e8e72d168d968b2807e0360bcbf07744d9cbb46e2e9efcd.9c1bb791.png","alt":"UI Sandbox screen"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"left-column","__idx":5},"children":["Left column"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The left column includes these controls."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/ui-sand-left-col-table.20295e85f683ef30327f6a057207764845ecc77072d7dd64e36ad476f68e9e0d.9c1bb791.png","alt":"UI Sandbox - left column table"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"top-control-bar","__idx":6},"children":["Top control bar"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar includes these controls."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/ui-sand-top-bar-table.77828dba1c48cbf72de350d63624092894a8c808618f1b5e147394d7020b2e77.9c1bb791.png","alt":"UI Sandbox - top bar table"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"users-account-information","__idx":7},"children":["User's account information"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ACCOUNT ID"]}," contains the account ID of the user account the widgets access."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"interaction-controls","__idx":8},"children":["Interaction controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["These controls configure the behavior of the widget."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":5,"id":"payload","__idx":9},"children":["PAYLOAD"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["(Not shown) Some widgets display a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PAYLOAD"]}," button, which opens a text editor in which you can modify the request payload passed to the widget."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":5,"id":"hide-exit-buttons","__idx":10},"children":["HIDE EXIT BUTTONS"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SELECTED"]},": Hides the widget's exit or cancel controls."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["NOT SELECTED"]},": Displays the widget's exit and cancel controls."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":5,"id":"full-width","__idx":11},"children":["FULL WIDTH"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SELECTED"]},": Fills the widget display space with the widget interface."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["NOT SELECTED"]},": Centers the widget interface between left and right margins of the widget display space."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":5,"id":"resize","__idx":12},"children":["RESIZE"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SELECTED"]},": The widget is displayed in its full height and the entire widget scrolls with the browser window."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["NOT SELECTED"]},": The widget header is fixed and the list below the widget header scrolls independently while the browser window display does not move."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":5,"id":"debug","__idx":13},"children":["DEBUG"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enables the output of additional informational messages to the browser's console log."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"widget-display-space","__idx":14},"children":["Widget display space"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After a widget is closed, the response data returned by the widget appears in this space, as this example shows."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/ui-sand-widget-exit.3e8dc39084a829811995eac04a9ca1bc6e00d176daf78249c63a3a8bcc54fcb2.9c1bb791.png","alt":"widget-exit-displaye"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"ui-sandbox-widgets","__idx":15},"children":["UI Sandbox Widgets"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Tilia UI Sandbox supports these UI widgets."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-card","__idx":16},"children":["ADD CARD"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Adds a payment card to the user's account."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add credit card"]}," portion of the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/payment-selection/"},"children":["Payment selection widget"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"add-card-configuration-controls","__idx":17},"children":["ADD CARD configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget."," ","This widget doesn't display any additional configuration controls."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-pm","__idx":18},"children":["ADD PM"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Adds a payment method to the user's account."," ","The payment method can be a PayPal account or a credit card."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add payment method"]}," portion of the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/payment-selection/"},"children":["Payment selection widget"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"add-pm-configuration-controls","__idx":19},"children":["ADD PM configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget; however, the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["RESIZE"]}," and"," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HIDE EXIT"]}," buttons have no effect on this widget."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This widget also displays the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CONFIG"]}," control with these options:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PayPal"]}," shows only the PayPal payment method sign up interface"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Credit Card"]}," shows only the credit card interface"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["None"]}," shows PayPal interface with the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add Credit Card"]}," option"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"deposit","__idx":20},"children":["DEPOSIT"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This widget is not supported."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"checkout","__idx":21},"children":["CHECKOUT"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the contents of an invoice to the user so they can select and attach a payment method to complete the transaction."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/checkout-flow/"},"children":["Checkout widget"]}," using a default invoice"," ","that has several line items and a transaction fee."," ","Only transactions in USD are supported."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"checkout-configuration-controls","__idx":22},"children":["CHECKOUT configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget; however, the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HIDE EXIT"]}," control does not affect this widget."," ","The Checkout widget also displays these configuration controls."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":5,"id":"payload-checkout","__idx":23},"children":["PAYLOAD (Checkout)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["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"," ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/checkout-flow/"},"children":["Checkout widget"]}," and"," ",{"$$mdtype":"Tag","name":"OpenapiLink","attributes":{"link":"invoicing/openapi/invoice/authorizeinvoice","text":"Authorize invoice"},"children":[]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":5,"id":"flow-config","__idx":24},"children":["FLOW CONFIG"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["On the left side of the widget display space, the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["FLOW CONFIG"]}," controls include:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HIDE WALLETS"]},": Controls the display of the user's wallets as a payment option."," ","Note that wallets are only displayed if they have funds."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["UPDATE"]},": Updates the widget with the current state of the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HIDE WALLETS"]}," state."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"kyc","__idx":25},"children":["KYC"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/kyc-flow/"},"children":["KYC interface"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the user's KYC information has already been entered and the user has been approved,"," ","no interface is displayed."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"kyc-configuration-controls","__idx":26},"children":["KYC configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget."," ","The KYC widget displays the following configuration controls."," ","After you change a value, choose the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["UPDATE"]}," button to update the widget."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["FLOW CONTROL"]},": Updates the widget's configuration at the bottom of the configuration controls to customize the widget's behavior."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BYPASS TOS"]},": has no effect on this widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["EXCLUDE PAYPAL (WHEN AVAILABLE)"]},": has no effect on this widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["USE ONLY BASIC VERIFICATION IN KYC (WHEN AVAILABLE)"]},": affects the widget flow. When checked, the widget renders the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tax Info Collection"]}," flow. When unchecked, it renders the full KYC flow."]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SECTION HEADER"]},": has no effect on this widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PURCHASE BUTTON"]},": does not affect this widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TRANSACTION DETAILS"]},": is not used by this widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["POST OAUTH RETURN OVERRIDE"]},": sets the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postOAuthURLOverride"]}," propery in the response buffer."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payment-selection","__idx":27},"children":["PAYMENT SELECTION"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/payment-selection/"},"children":["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 ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PAYMENT SELECTION"]}," interface is displayed."," ","The user can also add a new payment method while using this widget."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the user has not accepted Tilia's Terms Of Service, the TOS acceptance user interface"," ","is shown, unless the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BYPASS TOS (WHEN AVAILABLE)"]}," is checked."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"payment-selection-configuration-controls","__idx":28},"children":["PAYMENT SELECTION configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget."," ","The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PAYMENT SELECTION"]}," widget also displays these configuration controls in the widget display space:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["FLOW CONFIG"]},": does not affect this widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SECTION HEADER"]},": does not affect this widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PURCHASE BUTTON"]},": does not affect this widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TRANSACTION DETAILS"]}," ","Sets the data in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postOAuthURLOverride"]}," object returned in the response body. USD wallets with no usable balance are not displayed.  When ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HIDE WALLETS"]}," checked, the widget doesn't show the wallet option, even if it has a USD wallet with a usable balance."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payout-legacy","__idx":29},"children":["PAYOUT (legacy)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/payout-flow/"},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the user has not accepted Tilia's Terms Of Service, the TOS acceptance user interface"," ","is shown, unless the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BYPASS TOS (WHEN AVAILABLE)"]}," is checked."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the user's KYC information is not complete, the KYC interface is displayed before the Payout widget, unless the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["USE ONLY BASIC VERIFICATION IN KYC (WHEN AVAILABLE)"]}," configuration option is checked."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"payout-legacy-configuration-controls","__idx":30},"children":["PAYOUT (legacy) configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget."," ","These configuration controls are also displayed in the widget display space:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payout-full","__idx":31},"children":["PAYOUT FULL"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/payout-full-flow/"},"children":["Payout (full) widgets"]}," for the user"," ","to specify the transfer of funds from their USD wallet to an external account."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the user has not accepted Tilia's Terms of Service (TOS), the TOS interface is displayed before any other interface."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the user's KYC information is not complete, the KYC interface is displayed before the Payout widget."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"payout-full-configuration-controls","__idx":32},"children":["PAYOUT FULL configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget."," ","These configuration controls are also displayed in the widget display space:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CURRENCY"]},": Sets the currency used, if different from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["USD"]},"."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["FIXED AMOUNT"]},": Sets the payout (Cashout) amount in USD to display in the widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HIDE WALLET BALANCE"]},": When checked, the payout wallet balance is not displayed."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["USE ONLY BASIC VERIFICATION IN KYC (WHEN AVAILABLE)"]},": affects the KYC interface flow. When checked, the KYC interface renders the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tax Info Collection"]}," flow. When unchecked, it renders the full KYC flow."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["UPDATE"]},": updates the widget with the current configuration."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"transaction-details","__idx":33},"children":["TRANSACTION DETAILS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the details of the specified transaction in the  ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/transaction-details/"},"children":["Transaction Details widget"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"transaction-details-configuration-controls","__idx":34},"children":["TRANSACTION DETAILS configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget."," ","These configuration controls are also displayed in the widget display space:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["UPDATE"]},": updates the widget with the current transaction ID."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["TRANSACTION ID"]},": The transaction ID of the transaction to display in the widget."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"transaction-history","__idx":35},"children":["TRANSACTION HISTORY"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the current user's transactions in the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/checkout-flow/"},"children":["Transaction history widget"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"transaction-history-configuration-controls","__idx":36},"children":["TRANSACTION HISTORY configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget."," ","It has no other configuration controls."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tos","__idx":37},"children":["TOS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displays the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/tos-flow/"},"children":["Terms of Service (TOS) widget"]},","," ","unless the user has already accepted the TOS."," ","If the user has already accepted the TOS, only"," ","the final ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["STATE"]}," response body is displayed instead of the widget."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"tos-configuration-controls","__idx":38},"children":["TOS configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The top control bar buttons control this widget."," ","It has no other configuration controls."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customizing-the-appearance-of-the-ui-sandbox","__idx":39},"children":["Customizing the appearance of the UI Sandbox"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At the bottom of the left column, you can find the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Theme Config"]}," controls that enable"," ","manipulation of the theme properties that are passed to the widget."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For information about customizing the appearance of the widgets,"," ","see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.tilia.io/docs/web-uis/customization/"},"children":["UI Customization"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configuration-controls","__idx":40},"children":["Configuration controls"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The UI Sandbox's left column contains these controls to configure the widget's appearance."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["RESET"]},": Returns the primary and background color values to their default values."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PRIMARYCOLOR"]},": Sets the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["primaryColor"]}," property of the widget's theme object."," ","Choose ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SET"]}," to select a new color value."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BACKGROUNDCOLOR"]},": Sets the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]}," property of the widget's theme object."," ","Choose ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SET"]}," to select a new color value."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The UI Sandbox's Top bar contains these controls to configure the widget's appearance."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hide exit buttons"]},": Hides the exit/cancel controls in the widget."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["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."]}]}]}]},"headings":[{"value":"Tilia UI Sandbox users guide","id":"tilia-ui-sandbox-users-guide","depth":1},{"value":"Set up your UI Sandbox","id":"set-up-your-ui-sandbox","depth":2},{"value":"Set your Tilia developer credentials","id":"set-your-tilia-developer-credentials","depth":3},{"value":"Set the user account ID","id":"set-the-user-account-id","depth":3},{"value":"UI Sandbox Components","id":"ui-sandbox-components","depth":2},{"value":"Left column","id":"left-column","depth":3},{"value":"Top control bar","id":"top-control-bar","depth":3},{"value":"User's account information","id":"users-account-information","depth":4},{"value":"Interaction controls","id":"interaction-controls","depth":4},{"value":"PAYLOAD","id":"payload","depth":5},{"value":"HIDE EXIT BUTTONS","id":"hide-exit-buttons","depth":5},{"value":"FULL WIDTH","id":"full-width","depth":5},{"value":"RESIZE","id":"resize","depth":5},{"value":"DEBUG","id":"debug","depth":5},{"value":"Widget display space","id":"widget-display-space","depth":3},{"value":"UI Sandbox Widgets","id":"ui-sandbox-widgets","depth":2},{"value":"ADD CARD","id":"add-card","depth":3},{"value":"ADD CARD configuration controls","id":"add-card-configuration-controls","depth":4},{"value":"ADD PM","id":"add-pm","depth":3},{"value":"ADD PM configuration controls","id":"add-pm-configuration-controls","depth":4},{"value":"DEPOSIT","id":"deposit","depth":3},{"value":"CHECKOUT","id":"checkout","depth":3},{"value":"CHECKOUT configuration controls","id":"checkout-configuration-controls","depth":4},{"value":"PAYLOAD (Checkout)","id":"payload-checkout","depth":5},{"value":"FLOW CONFIG","id":"flow-config","depth":5},{"value":"KYC","id":"kyc","depth":3},{"value":"KYC configuration controls","id":"kyc-configuration-controls","depth":4},{"value":"PAYMENT SELECTION","id":"payment-selection","depth":3},{"value":"PAYMENT SELECTION configuration controls","id":"payment-selection-configuration-controls","depth":4},{"value":"PAYOUT (legacy)","id":"payout-legacy","depth":3},{"value":"PAYOUT (legacy) configuration controls","id":"payout-legacy-configuration-controls","depth":4},{"value":"PAYOUT FULL","id":"payout-full","depth":3},{"value":"PAYOUT FULL configuration controls","id":"payout-full-configuration-controls","depth":4},{"value":"TRANSACTION DETAILS","id":"transaction-details","depth":3},{"value":"TRANSACTION DETAILS configuration controls","id":"transaction-details-configuration-controls","depth":4},{"value":"TRANSACTION HISTORY","id":"transaction-history","depth":3},{"value":"TRANSACTION HISTORY configuration controls","id":"transaction-history-configuration-controls","depth":4},{"value":"TOS","id":"tos","depth":3},{"value":"TOS configuration controls","id":"tos-configuration-controls","depth":4},{"value":"Customizing the appearance of the UI Sandbox","id":"customizing-the-appearance-of-the-ui-sandbox","depth":2},{"value":"Configuration controls","id":"configuration-controls","depth":3}],"frontmatter":{"seo":{"title":"Tilia UI Sandbox users guide"}},"lastModified":"2026-02-05T18:12:30.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/web-uis/ui-sandbox-guide","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}