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, <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.

Attributes

Compared to the Fluid Widget, the Fluid Quick Deposit component is simpler and requires 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 Fluid custom element attributes in detail.

** 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:

• fluid-command:
  • deposit-cta-clicked – Triggered when a user clicks the "Deposit" button (displayed when no recent payment method is available).
  • error-cta-clicked – Triggered when an error occurs in the deposit flow and the user clicks the "Try Again" button.

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 type="module" 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 in the main widget integration guide.