Skip to main content
To load a loan into Pylon Elements, you need to determine which Element to use based on the loan’s status.

​
Determining which Element to use

Check the loan’s submitted property:

​
Retrieving loans

Retrieve all loans for a user using the borrowerUser GraphQL query: 
query GetBorrowerLoans($userId: ID!) {
  borrowerUser(userId: $userId) {
    loans {
      id
      submitted
      # ... other loan fields
    }
  }
}
The user_id used in the Auth Handshake must match the user_id on the loan, or the Element will not load.

​
Example implementation

const fetchLoans = async () => {
  const response = await fetch("pylon/loan-applications?user_id=user_24601");
  const loans = await response.json();
  return loans.filter((loan) => loan.archive_date === null);
};

const loans = await fetchLoans();

const openLoan = (loan: LoanApplication) => {
  if (loan.submitted) {
    // Open Borrower Dashboard Element
    return (
      <BorrowerDashboardElement
        authLeaseCallback={fetchPylonAuthLease}
        loanId={loan.id}
      />
    );
  } else {
    // Open Loan Application Element
    return (
      <LoanApplicationElement
        authLeaseCallback={fetchPylonAuthLease}
        loanId={loan.id}
      />
    );
  }
};

// To start a new loan application, omit the loanId
<LoanApplicationElement
  authLeaseCallback={fetchPylonAuthLease}
/>

​
Starting a new loan

To start a new loan application, load the Loan Application Element without a loanId: 
<LoanApplicationElement
  authLeaseCallback={fetchPylonAuthLease}
  // loanId is undefined for new applications
/>

​
Pre-filling data with the GraphQL API

You can use the GraphQL API to pre-fill borrower information before initializing Elements. This is useful when you already have borrower data from your system or want to create a more streamlined experience.

​
How it works

  1. Create a loan via API - Use the GraphQL API to create a loan and add borrower information (personal details, income, assets, property information, etc.)
  2. Initialize the Element - Pass the loanId to the Element
  3. Data is pre-filled - The Element automatically displays all the data you added via the API, pre-filled on behalf of the borrower

​
Example: Pre-filling a loan application

// Step 1: Create loan and add borrower data via GraphQL API
const createLoanWithData = async () => {
  const mutation = `
    mutation CreateLoan($input: CreateLoanInput!) {
      createLoan(input: $input) {
        id
      }
    }
  `;

  const variables = {
    input: {
      dealId: "deal_123",
      borrowers: [{
        personalInformation: {
          firstName: "John",
          lastName: "Doe",
          email: "[email protected]",
          phoneNumber: "555-1234"
        }
      }],
      property: {
        address: {
          street: "123 Main St",
          city: "San Francisco",
          state: "CA",
          zipCode: "94105"
        }
      }
    }
  };

  const response = await fetch("https://pylon.mortgage/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    body: JSON.stringify({ query: mutation, variables }),
  });

  const { data } = await response.json();
  return data.createLoan.id;
};

// Step 2: Initialize Element with the loanId
const loanId = await createLoanWithData();

<LoanApplicationElement
  authLeaseCallback={fetchPylonAuthLease}
  loanId={loanId}
/>
When the Element initializes, all the borrower information, property details, and any other data you added via the API will be pre-filled, allowing borrowers to review and complete the remaining fields rather than starting from scratch.
You can continue to add or update data via the GraphQL API even after the Element is initialized. The Element will reflect the latest data from the API automatically.

​
Next steps