Nothing Found

Payout (Full) Flow

The Payout (Full) flow enables a user to:

  • View their current USD or convertible token balance
  • Add and select a payout payment method
  • View the expected timeline and fee their payout will be assessed
  • Create a payout request
  • View and manage pending payout requests

payout full flow

When a user opens this page, they can view their current USD or convertible token balance. They see a payment method selected for them (and have the ability to set a default payout payment method to be pre-selected for all future payout requests). They can expand the drop down to view other payout-supported payment methods or to add a new one. Below this, they can enter the amount they wish to cashout. On the button at the bottom, they will see the fee amount removed and the amount they can anticipate to be transferred to their payment method. Upon clicking the button, the payout request will be created and will begin going through the Payout Rules Engine.

payout full flow

Upon returning to the Payout (Full) widget, users will be able to view and manage any payouts that are currently in a pending state.

note

This flow begins with a check for a signed TOS. If one has not been signed, a TOS screen appears for a user to accept before proceeding with the flow. After TOS, users will also need to complete either KYC (and have a KYC state of ACCEPT) or Tax Info Collection (and have a pii_level of BASIC) to land on the Payout (Full) screen.

Requirements

Requirement Description
ID of the <div /> element Your named <div /> in which the payment selection flow will be rendered
Redirect URL URL that initiates the flow

Widget Flow Implementation

Use the following steps to open and customize a payout page in the widget:

  1. Copy the following code sample.
Copy
Copied
window.Tilia.execute({
    rootId: "<YOUR-ELEMENT-ID>"
    flow: "payout-full",
    redirect: "<WIDGET-REDIRECT-URL>",
    onComplete: handleComplete,
	onError: handleError,
    fixedAmount: "",
    hideWalletBalance: false,
    currency: "<YOUR-VIRTUAL-CURRENCY-CODE>"
    theme: {
      backgroundColor: "#323232",
      primaryColor: "#47CC00"
    }
});
  1. Replace the placeholder values ( , ) with the values from the Requirements section.
  2. (Optional) In the theme object, customize the appearance of the widget.
    • fixedAmount (in USD cents, i.e. $10 = 1000) allows you to pass in the payout value to the transaction, if you already have a UI that handles this
    • hideWalletBalance similarly hides the balance from the top of the screen
    • currency (defaults to USD) sets the currency for the payout. Use your virtual currency code to allow users to payout from their convertible token earnings

Events

The Payout (Full) flow fires the following events.

OnComplete

Fired when a user clicks the Close button after completing a payout request:

Copy
Copied
{
  source: "tilia",
  event: "tilia.payout-full.complete",
  state: "complete",
  trigger: "header-close-button"
}

Fired when a user clicks the "X" button in the header

Copy
Copied
{
  source: "tilia",
  event: "tilia.payout-full.complete",
  state: "cancel",
  trigger: "header-close-button"
}