Interface EventListeners

A set of non-blocking callback functions that are triggered in response to the widget events.

Example

<SuperfluidWidget eventListeners={{
  onButtonClick: (props) => console.log(`${props?.type} button is clicked`),
  onRouteChange: (props) => console.log(`Route is changed to ${props?.route}`),
  onSuccess: () => console.log('Checkout is successfully finished!'),
  onSuccessButtonClick: () => console.log('Merchant success button is clicked!')
  onPaymentOptionUpdate: (paymentOption) => setChainId(paymentOption?.chainId);
}} />
interface EventListeners {
    onButtonClick?: ((props?) => void);
    onPaymentOptionUpdate?: ((paymentOption?) => void);
    onPersonalDataUpdate?: ((props?) => void);
    onRouteChange?: ((props?) => void);
    onSuccess?: (() => void);
    onSuccessButtonClick?: (() => void);
    onTransactionSent?: ((props?) => void);
}

Hierarchy (view full)

Properties

onButtonClick? onPaymentOptionUpdate? onPersonalDataUpdate? onRouteChange? onSuccess? onSuccessButtonClick? onTransactionSent?

Properties

Optional onButtonClick

onButtonClick?: ((props?) => void)

Called when a button is pressed. Usually a call to action (CTA).

Type declaration

    • (props?): void

    • Parameters

      • Optional props: {
            type: "next_step" | "skip_step" | "step_label" | "connect_wallet" | "switch_network" | "invoke_transaction" | "back_transactions" | "success_button" | "superfluid_dashboard" | "retry_gas_estimation" | "force_invoke_transaction" | "skip_to_next" | "copy_account_address" | "view_transaction_on_block_explorer";
        }
        • type: "next_step" | "skip_step" | "step_label" | "connect_wallet" | "switch_network" | "invoke_transaction" | "back_transactions" | "success_button" | "superfluid_dashboard" | "retry_gas_estimation" | "force_invoke_transaction" | "skip_to_next" | "copy_account_address" | "view_transaction_on_block_explorer"

      Returns void

Optional onPaymentOptionUpdate

onPaymentOptionUpdate?: ((paymentOption?) => void)

Called when the payment option is initialized or changed by the user.

Type declaration

    • (paymentOption?): void

    • Parameters

      Returns void

Optional onPersonalDataUpdate

onPersonalDataUpdate?: ((props?) => void)

Called when any personalData fields update.

Type declaration

    • (props?): void

    • Parameters

      • Optional props: {
            data?: Record<string, string>;
        }
        • Optional data?: Record<string, string>

      Returns void

Optional onRouteChange

onRouteChange?: ((props?) => void)

Called when the widget route changes. "Route" is a term to define the view the user sees.

Type declaration

    • (props?): void

    • Parameters

      • Optional props: {
            data?: Record<string, string>;
            route: "transactions" | "step_payment_option" | "step_wrap" | "step_review" | "step_personal_data" | "success_summary";
        }
        • Optional data?: Record<string, string>
        • route: "transactions" | "step_payment_option" | "step_wrap" | "step_review" | "step_personal_data" | "success_summary"

      Returns void

Optional onSuccess

onSuccess?: (() => void)

Called when the checkout is successfully finished.

Type declaration

    • (): void

    • Returns void

Deprecated

Use onTransactionSent instead (filter for functionName === 'createFlow | 'updateFlow').

Optional onSuccessButtonClick

onSuccessButtonClick?: (() => void)

Called when the merchant's success button is defined in the schema and it's clicked.

Type declaration

    • (): void

    • Returns void

Optional onTransactionSent

onTransactionSent?: ((props?) => void)

Called when a transaction is executed.

Type declaration

    • (props?): void

    • Parameters

      • Optional props: {
            functionName?: "createFlow" | "deleteFlow" | "grantPermissions" | "revokePermissions" | "setFlowrate" | "setFlowrateFrom" | "updateFlow" | "updateFlowOperatorPermissions";
            hash?: `0x${string}`;
        }
        • Optional functionName?: "createFlow" | "deleteFlow" | "grantPermissions" | "revokePermissions" | "setFlowrate" | "setFlowrateFrom" | "updateFlow" | "updateFlowOperatorPermissions"
        • Optional hash?: `0x${string}`

      Returns void

Settings

Member Visibility

Theme

On This Page

onButtonClickonPaymentOptionUpdateonPersonalDataUpdateonRouteChangeonSuccessonSuccessButtonClickonTransactionSent