Widget Setup

The Araucaria Connect widget is an embeddable UI component that handles bank selection and credential entry securely.

First, your backend creates a connection by calling the Araucaria API. This returns a widgetToken that you'll pass to your frontend. The widget token is short-lived (15 minutes) and safe to expose to the browser.

javascript

              // Your backend endpoint (e.g., /api/create-connection)
const response = await fetch('https://api.araucaria.money/v1/connections', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer arau_your_api_key',  // Keep this secret on your server
    'Content-Type': 'application/json'
  }
});

const { connectionId, widgetToken } = await response.json();
// Return widgetToken and connectionId to your frontend
            

⚠️ Important

Never expose your API key (arau_xxx) in frontend code. Always make this call from your backend server.

Add the Araucaria script to your HTML, then call Araucaria.open() with the widget token from your backend. This opens a secure modal where users select their bank and enter credentials.

html

              <script src="https://api.araucaria.money/widget/araucaria-connect.js"></script>

<script>
// Get widgetToken and connectionId from your backend
Araucaria.open({
  token: widgetToken,
  connectionId: connectionId,

  onSuccess: (metadata) => {
    console.log('Connected!', metadata.connectionId);
    // Connection successful - your backend will receive a webhook
  },

  onExit: (error) => {
    if (error) {
      console.error('Error:', error.message);
    } else {
      console.log('User closed widget');
    }
  }
});
</script>
            

Callbacks

onSuccess(metadata) - Called when connection is established. Receives { connectionId }
onExit(error) - Called when user closes the widget or an error occurs

Widget Setup

1. Backend: Get Widget Token

2. Frontend: Open the Widget

Callbacks