Skip to main content

Fluid Quick Deposit Integration

Overview​

The Fluid Quick Deposit is a web component that integrates into the DOM similarly to the Fluid Widget. It is designed as an inline element that respects its parent element styles and is intended for desktop gameplay.

Integration​

Initialisation​

Similar to the main Fluid Widget, the <fluid-quick-deposit> component requires specific attributes to be initialised correctly. Please note that initialising one component will automatically prepare the other component for use, for improved performance. Programmatic initialisation can be used to initialise both components. See Session handling for the session lifecycle rules.

Attributes​

Compared to the Fluid Widget, the Fluid Quick Deposit component is simpler and accepts only the following attributes:

  • operator-id **
  • session-id
  • user-id **
  • locale **
  • currency **
  • country **
  • z-index
  • bonuses ***
  • deposit-limit
  • user-data
  • transaction-attributes
  • deposit-amount

For detailed explanations of these attributes, refer to the Attributes reference.

** Not required in case of programmatic initialisation.

*** Even if bonuses are not available during the quick deposit process, providing bonus data to the component serves performance purpose - bonuses will be processed just once and be available in the main Fluid Widget.

Notifications​

The Fluid Quick Deposit component emits the same event types as the Fluid Widget and introduces two additional events, deposit-cta-clicked and error-cta-clicked. The full catalogue lives on the Events and errors page.

Example Implementation​

Below is an example of how to inject the Fluid Quick Deposit component into your website's DOM upon user login for automatic initialisation:

<script src="https://get.fluidpayments.io/index.js"></script>
<fluid-quick-deposit
    operator-id="<your operator ID>"
    session-id="<authenticated user session ID>"
    user-id="<authenticated user ID>"
    user-data="<authenticated user details>"
    locale="<locale tag>"
    country="<authenticated user country>"
    currency="<user currency code>"
    bonuses="<bonus data>"
    deposit-limit="<responsible gaming current deposit limit>"
    z-index="<z-index value>"
    transaction-attributes="<stringified JSON object of key-value pairs for the payment provider>"
    deposit-amount="<pre-filled deposit amount>"
></fluid-quick-deposit>

For further details, refer to the documentation on bonus data and user data on the Data objects page.