Skip to main content

Events and errors

All Fluid widgets emit information to the host website using CustomEvent (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent), with the detail property containing the information. This page is the single catalogue of every event across the three widgets.

The detail property is an object with the following structure, available as the FluidNotificationDetail type in the @fluidpayments/types package:

type FluidNotificationDetail = {
message: string;
[key: string]: any;
};

message contains a string with the different event values listed below.

Add the following code to receive the events:

const fluid = document.querySelector('fluid-widget'); // or fluid-quick-deposit / fluid-virtual

fluid.addEventListener("fluid-command", onFluidCommand);
fluid.addEventListener("fluid-info", onFluidInfo);
fluid.addEventListener("fluid-error", onFluidError);

There are three event types:

  • fluid-info - messages of informational nature, with the purpose of e.g. tracking or allowing user action
  • fluid-error - unexpected failure notifications
  • fluid-command - commands the host site should react to

In the tables below, Widget is the main <fluid-widget>, QD is <fluid-quick-deposit> and Virtual is the Sweepstakes <fluid-virtual>. For the Sweepstakes widget, the transaction related event values keep their literal deposit and withdrawal names, corresponding to the purchase and redeem flows respectively.

fluid-info

MessageWidgetQDVirtualMeaning
initialisedYesYesYesThe wallet has been prepared for opening. It should not be allowed to open before this is emitted.
openedYesNoYesThe wallet has been opened.
destroyedYesNoYesThe wallet instance has been terminated.
internal-operation-changeYesNoYesThe transaction flow has been amended internally, e.g. upon a withdrawal without a positive withdrawable balance.
success-cta-clickYesNoYesThe user clicked on the CTA shown on the transaction success screen.
deposit-successYesYesYesA successful deposit (purchase, for Sweepstakes) was made.
deposit-failureYesYesYesA deposit (purchase, for Sweepstakes) attempt failed.
withdrawal-successYesNoYesA successful withdrawal (redemption, for Sweepstakes) was made.
withdrawal-failureYesNoYesA withdrawal (redemption, for Sweepstakes) attempt failed.
withdrawal-cancelledYesNoYesA withdrawal (redemption, for Sweepstakes) was cancelled.
try-again-clickYesYesYesThe user clicked on the CTA shown on the transaction failure screen.
contact-supportYesNoYesThe user clicked on the Contact Support link shown on the transaction failure screen.
bonus-changedYesNoNoThe user changed the selected deposit bonus.
payment-method-changedYesYesYesThe user changed the selected payment method.
dialog-openedYesNoYesA dialog has been opened from the wallet.
dialog-closedYesNoYesA dialog has been closed from the wallet.
deposit-cta-clickedNoYesNoThe user clicked the "Deposit" button, displayed when no recent payment method is available.
closeNoYesNoQuick Deposit only: the user closed the expanded element. The other widgets report closing through the fluid-command of the same name.
start-kyc-verificationYesNoYesTracking counterpart of the fluid-command of the same name; see KYC Verification.

Note that fluid-info notifications are not primarily designed for tracking, although some carry detailed information on the event. The transaction result events include transactionId (along with amount, currency, paymentMethod, bonus on success, plus errorCode, providerCode and responseCode on failure, and packId on Sweepstakes purchases), which allows stitching those events to a particular transaction. payment-method-changed carries selectedMethodName, previousMethodName and selectedMethodIsStored; bonus-changed carries selectedBonusCode and previousBonusCode.

fluid-error

MessageWidgetQDVirtualMeaning
initialisation-failureYesYesYesFluid was not able to configure itself, e.g. due to a network or backend issue, or missing required attributes. See Session handling.
operation-execution-failureYesNoYesAn operation failed unexpectedly due to an error.
gateway-configuration-errorYesNoYesThe orchestrator configuration for the operator could not be fully resolved. The cashier surfaces the problem to the user; contact Fluid Payments if it persists.
invalid-bonus-dataYesYesNoThe bonus data is not in the correct format expected.
invalid-user-dataYesYesYesThe user data is not in the correct format expected.
invalid-transaction-attributesYesYesYesThe transaction attributes are not in the correct format expected.
invalid-init-attributesYesYesYesAn init attribute (for example the locale) failed validation; the widget falls back to a safe default (en for locale) and keeps initialising. On the Sweepstakes widget the same message is also emitted for malformed virtual-currencies, balance or packs payloads and unknown transaction values. When the widget is initialised programmatically via fluid.init(...), the call rejects with an error instead (see Programmatic Init).
invalid-withdrawal-warningYesNoNoThe withdrawal-warning attribute could not be parsed as JSON. The widget renders no warning until the attribute is corrected. See Withdrawal Warning.

fluid-command

MessageWidgetQDVirtualMeaning
closeYesNoYesThe user selected to close the wallet from within; the open attribute should be set to false. Quick Deposit reports closing on the fluid-info channel instead.
handle-transactionYesYesYesEmitted instead of Fluid processing the transaction, when the selected payment method is configured to be completed by the host site. The event detail carries amount, method (the payment method name), bonus (the bonus code, when applicable) and transaction (the transaction type); your page takes over the flow from there.
start-kyc-verificationYesNoYesThe user clicked on the Verify button in the identity verification prompt. Take the user into your platform's verification flow; see KYC Verification. Also emitted as fluid-info for tracking.
withdrawal-warning-cta-clickedYesNoNoThe user clicked the CTA shown in the configured withdrawal warning. The host should react accordingly (for example, navigate the user to the bonuses screen). See Withdrawal Warning.
handle-banner-cta-clickNoNoYesThe user clicked on the banner on the first step of the Quick Buy flow.

For cases where the widget needs to request data or trigger an action on the host page and receive a typed response, see the Window Bridge API.