Skip to main content
The Borrower Dashboard Element provides a complete borrower portal for managing in-progress mortgage loans. This guide shows you how to integrate it into your application.

​
Prerequisites

Before building the Borrower Dashboard Element, ensure you have:
  1. Set up authentication - Configured your backend to handle Pylon authorization requests
  2. Installed the Elements library:
npm install @pylonlending/react-elements --save

​
Basic implementation

Here’s a minimal implementation of the Borrower Dashboard Element: 
// Import the Borrower Dashboard Element
import { BorrowerDashboardElement } from "@pylonlending/react-elements";

// Create a function that returns a Promise<AuthLease>
// This should fetch the results of your auth handler endpoint
const fetchPylonAuthLease = async (): Promise<AuthLease> => {
  const response = await fetch("/auth/pylon");
  return response.json();
};

<YourApplication>
  <BorrowerDashboardElement
    // Include your function that returns a Promise<AuthLease>
    authLeaseCallback={fetchPylonAuthLease}
    // Load this loan's dashboard
    loanId="loan_12345"
  />
</YourApplication>

​
Required properties

PropertyTypeDescription
authLeaseCallbackAuthLeaseCallbackA function that fetches the results of your authentication route. Must return a Promise<AuthLease>.
loanIdstringThe ID of the loan to display in the dashboard.

​
Loading loans

To determine which Element to use, check the loan’s submitted property: See Loading loans for more details.

​
Pre-filling data with the GraphQL API

You can use the GraphQL API to add or update borrower information, and the Borrower Dashboard Element will automatically reflect those changes. When you update data via the API (such as adding income, assets, or updating borrower information), the Element will display the latest data automatically. This allows you to:
  • Update data programmatically - Use the API to add information on behalf of borrowers
  • Sync external data - Keep loan data in sync with your own systems
  • Create custom workflows - Collect information through your own UI and have it appear in the dashboard
The Borrower Dashboard Element always displays the latest data from the API. Any updates you make via the GraphQL API will be reflected in the Element automatically.

​
Content Security Policy

If you’re using a Content Security Policy, add these directives: 
default-src https://api.{customer-id}.{env}.pylon.mortgage
frame-src https://api.{customer-id}.{env}.pylon.mortgage
script-src https://api.{customer-id}.{env}.pylon.mortgage/elements/pylon.js
connect-src https://api.{customer-id}.{env}.pylon.mortgage
Replace {customer-id} with your customer ID and {env} with test or prod.

​
Important notes

All props passed to the BorrowerDashboardElement should be const-they should not change after the Element’s first render. If props change, they will have no effect and will not be updated inside the Element.

​
Optional properties

PropertyTypeDescription
themeThemeTheme configuration object to customize the Element’s appearance. See Theming for details.

​
Complete example with theming

Here’s a complete example that includes theming: 
import { BorrowerDashboardElement } from "@pylonlending/react-elements";

function BorrowerDashboardPage({ loanId }: { loanId: string }) {
  const fetchPylonAuthLease = async (): Promise<AuthLease> => {
    const response = await fetch("/auth/pylon");
    return response.json();
  };

  const theme = {
    Global: {
      fonts: {
        fontFamily: "Inter, sans-serif",
        fontUrls: [
          "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap",
        ],
      },
      colors: {
        core: {
          primary: "#0066CC",
        },
      },
    },
  };

  return (
    <BorrowerDashboardElement
      authLeaseCallback={fetchPylonAuthLease}
      loanId={loanId}
      theme={theme}
    />
  );
}

​
Next steps