Front End Callbacks

The Connect SDK's provide callback functions to handle user interactions and deposit lifecycle events in your frontend application

Suggest Edits

onDeposit

Triggered when a deposit completes (successfully or unsuccessfully).

{  
"data": {  
  "depositId": "c55481bf-626b-4410-8997-4cee83e1385f",  
  "status": {  
    "value": "COMPLETED",  
    "details": "Deposit completed",  
    "occurredAt": "2025-10-07T19:44:50Z",  
   },  
"assetId": "btc"  
,  
"networkId": "bitcoin"  
,  
"amount": "0.013"  
 }  
}

onError

Triggered when errors occur during SDK operations (network issues, authentication failures, validation
errors, etc.).

{  
"errorCode": "auth_error",  
"reason": "Session expired. Please refresh your authentication token."  
}

onClose

Triggered when the user closes the Auth SDK interface. No payload provided.

onEvent - Deposit submitted

Triggered when a deposit is created and submitted (before it is confirmed on-chain).

{  
"type": "deposit.submitted",  
"data": {  
"depositId": "c55481bf-626b-4410-8997-4cee83e1385f"  
 }  
}

Implementation Example

React SDK Example

import React from "react";
import { Auth } from "@connect-xyz/auth-react";

function App() {
  const jwt = "your-jwt-token"; // Replace with actual JWT

  return (
    <Auth
      jwt={jwt}
      env="production"
      theme="auto"
       => {
        console.log("Deposit completed:", deposit);
      }}
       => {
        console.log("Error occurred:", error);
      }}
       => {
        console.log("Widget closed");
      }}
       => {
        console.log("Event:", event);
      }}
    />
  );
}

export default App;

JavaScript SDK Example

import { Auth } from '@connect-xyz/auth-js';

// Initialize the SDK
const auth = new Auth({
  jwt: 'your-jwt-token', // Replace with actual JWT
  env: 'production',
  theme: 'auto',
  onDeposit: (deposit) => {
    console.log('Deposit completed:', deposit);
  },
  onError: (error) => {
    console.log('Error occurred:', error);
  },
  onClose: () => {
    console.log('Widget closed');
  },
  onEvent: (event) => {
    console.log('Event:', event);
  }
});

// Render the widget in a container element
auth.render(document.getElementById('connect-auth-container'));

Updated 8 days ago