Custom UI

If the prebuilt React components don’t match your design requirements, you can build fully custom UIs using the client-js-core SDK directly.

When to use this approach

• You need a layout that doesn’t match the prebuilt components
• You’re using a framework other than React (Vue, Angular, Svelte, vanilla JS)
• You want full control over every DOM element and CSS class

Setting up the client

import { OpendoorClient } from '@opendoor/partner-sdk-client-js-core';

const client = new OpendoorClient({
  baseURL: '/api/opendoor/v1',
  timeout: 30000,
});

Address suggestions

const { addresses } = await client.getAddressSuggestions('123 Main St');

// addresses: Address[]
// Each address has: street1, street2?, city, state, postalCode
addresses.forEach((addr) => {
  console.log(
    `${addr.street1}, ${addr.city}, ${addr.state} ${addr.postalCode}`
  );
});

Creating an offer

const offer = await client.createOffer({
  address: {
    street1: '123 Main St',
    city: 'Phoenix',
    state: 'AZ',
    postalCode: '85001',
  },
});

console.log(offer.opendoorOfferRequestId); // UUID
console.log(offer.offerStatus); // 'PENDING' | 'DENIED'

if (offer.denialInfo) {
  console.log(offer.denialInfo.code); // e.g., 'DWELLING_TYPE'
  console.log(offer.denialInfo.explanation); // Human-readable reason
}

Updating an offer

const updated = await client.updateOffer(offer.opendoorOfferRequestId, {
  seller: {
    email: 'seller@example.com',
    fullName: 'Jane Smith',
    phoneNumber: '555-0100',
  },
  home: {
    bedrooms: 3,
    bathroomsFull: 2,
    yearBuilt: 2005,
  },
});

Polling for offer status

const status = await client.getOffer(offer.opendoorOfferRequestId);

if (status.offerStatus === 'OFFERED' && status.offerData) {
  console.log('Price:', status.offerData.headlinePriceCents / 100);
  console.log('Dashboard:', status.offerData.url);
}

Error handling

import {
  ValidationError,
  APIError,
} from '@opendoor/partner-sdk-client-js-core';

try {
  await client.createOffer({ address });
} catch (err) {
  if (err instanceof ValidationError) {
    // Client-side validation failed (missing fields, etc.)
    console.log(err.field); // e.g., 'address.street1'
  } else if (err instanceof APIError) {
    // Server returned an error
    console.log(err.code); // 'API_ERROR' | 'TIMEOUT' | 'NETWORK_ERROR'
    console.log(err.statusCode); // HTTP status code
  }
}

Backend setup

Your backend needs to proxy these requests using the server SDK. See the Quick Start for a complete Express example.