API illustration

Zillow API Network

GetMonthlyPayments API Widget Example

For a specific loan amount, the GetMonthlyPayments API returns the estimated monthly payment that includes principal and interest based on today's mortgage rate. The API returns the estimated monthly payment per loan type (30-year fixed, 15-year fixed, and 5/1 ARM). If a ZIP code is entered, the estimated taxes and insurance are returned in the result set.

The GetMonthlyPayments API Web Service is located at: http://www.zillow.com/webservice/GetMonthlyPayments.htm

View documentation for the GetMonthlyPayments API at: http://www.zillow.com/howto/api/GetMonthlyPayments.htm

Sample Widget Implementation

The following image shows an example widget displaying monthly payment information for a particular property as well as the current national 30 year fixed and 15 year fixed mortgage rates:

The next three code examples define the CSS, HTML, and JavaScript necessary to implement this widget.

Step 1: Styles

The example widget is heavily styled to ensure it works in a variety of CSS environments. The styles can likely be shortened if you're adding the widget to a known CSS environment (i.e. your site).

<style>
  #payment-widget {
    position: relative;
    width: 350px; 
    height: 90px; 
    margin: 0 0 12px 0;
    font-size: 12px; 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 150%;
    border: 1px solid #bdbdbd; 
    background: url(http://www.zillow.com/static/images/zmm_blue_gradient_fc.gif) repeat-x;
  }

  #payment-info {
    position: absolute; 
    left: -7px; 
    top: 2px;
    width: 245px; 
  }

  #calculated-payment-info {
    display: none;
  }

  #no-payment-info {
    display: none;
  }

  .section-title {
    color: #1b63b5;
  }

  #payment-amount {
    color: fc7305;
    font-size: 15px;
  }

  .payment-details {
    font-size: 11px;
  }

  #rate-info {
    position: absolute;
    left: 213px;
    top: 2px;
    width: 130px;
    text-align: right;
  }

  a.rate-link {
    margin-right: 6px;
  }

  a.rate-link:link, a.rate-link:visited {
    color: #1b63b5;
  }

  .current-rate {
    visibility: hidden;
    color: #609519;    
  }

  a.footer-link {
    position: absolute;
    top: 70px;
    left: 7px;
  }

  a.footer-link:link, a.footer-link:visited {
    color: #1b63b5;
  }

  .footer-logo {
    position: absolute;
    left: 201px;
    top: 59px;
  }

  .footer-logo p {
    text-align: right;
    margin: 0 2px -5px 0;
    font-size: 10px;
  }

  .footer-logo a {
    display: block;
  }

  .footer-logo img {
    border: none;
  }
</style>
            

Step 2: HTML

The dynamic widget contents are filled in by the JavaScript, so the payment info and rate are initially set to default values and hidden using styles defined in step 1.

<div id="payment-widget">

  <!-- payment information section -->
  <div id="payment-info">
    <!-- block to display when payment information is available -->
    <div id="calculated-payment-info">
      <div>
        <strong><span class="section-title">Payments as low as</span></strong>
        <strong><span id="payment-amount">$0,000</span></strong>
        <span class="payment-details">per month</span>
      </div>
      <div class="payment-details">
        <div>Based on a <strong>30 year fixed-rate</strong> of</div>
        <strong><span id="assumed-rate">0.00%</span></strong>
        with
        <strong><span id="down-payment">$00,000</span></strong>
        (10%) down.
      </div>
    </div>

    <!-- block to display when payment information isn't available -->
    <div id="no-payment-info">
      <div><strong><span class="section-title">Payment Information</span></strong></div>
      <div>Get custom loan quotes anonymously</div>
      <div>on Zillow Mortgage Marketplace</div>
    </div>
  </div>

  <!-- rate information -->
  <div id="rate-info">
    <div class="section-title"><strong>Latest Rates</strong></div>
    <div>
      <a class="rate-link"
         href="http://www.zillow.com/30_Year_Fixed_Mortgage_Rates/">30 yr Fixed:</a>
      <strong><span id="thirty-year-rate" class="current-rate">0.00%</span></span></strong>
    </div>
    <div>
      <a class="rate-link"
         href="http://www.zillow.com/15_Year_Fixed_Mortgage_Rates/">15 yr Fixed:</a>
      <strong><span id="fifteen-year-rate" class="current-rate">0.00%</span></span></strong>
    </div>
  </div>

  <!-- footer -->
  <a class="footer-link" href="http://www.zillow.com/mortgage/Mortgage.htm">
    Get custom mortgage quotes!
  </a>

  <div class="footer-logo">
    <p>Powered by</p>
    <a href="http://www.zillow.com/mortgage/Mortgage.htm">
      <img src="http://www.zillow.com/static/images/zillow-mortgage-logo-small.gif" 
           alt="Zillow Mortgage Markeplace" />
    </a>
  </div>
  
</div>
            

Step 3: JavaScript

The JavaScript code is responsible for calling a data or proxy page on your servers that in turn retrieve monthly payment and rate data from the GetMonthlyPayment API. In the following code, <LOCAL PROXY URL> should be replaced with the URL of your local proxy or data page, <PARSE XML DATA> should be replaced with logic to parse the data returned by your proxy or data page, and <INSERT PRICE IF AVAILABLE> should be replaced by either the price of the home for which you'd like to calculate a monthly payment.

<script type="text/javascript">
  var ZillowUpdater = (function() {
    // local URL proxy to Zillow JSON page
    var PROXY_URL = '<LOCAL PROXY URL>';

    // the async request object
    var request;

    // Make the rate data async call.
    function makeAsyncCall(price) {
      try {
        // try Mozilla request
        request = new XMLHttpRequest();
      } catch (e1) { 
        try {
          // try modern Microsoft request
          request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e2) {
          try {
            // try old Microsoft request
            request = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e3) {
            // failure
            request = false;
          }
        }
      }
        
      if (request) {
        var url = PROXY_URL
                + ((price != null && price > 0) ? '?price=' + price : '');
            
        request.open("GET", url, true);
        request.onreadystatechange = handleDataUpdate;
        request.send(null);
      }                    
    }
    
    // Processes the XML data returned by the rate data async call.
    function handleDataUpdate() {
      var data;
          
      if (request.readyState == 4) {
        if (request.status == 200) {
          try {
            data = <PARSE XML DATA>
          } catch (e) {
            // ignore invalid XML
          }
        }
      }
      
      if (data) {
        updateRates(data.thirtyYearRate, data.fifteenYearRate);
    
        if (data.message.code === '0') {
          showGenericMessage();
        } else {
          showPaymentMessage(data.monthlyPayment, data.thirtyYearRate, data.downPayment);
        }
      }
    }
    
    function showGenericMessage() {
      document.getElementById('z-payment-info').style.display = 'none';
      document.getElementById('z-no-payment-info').style.display = 'block';
    }
    
    function showPaymentMessage(monthlyPayment, rate, downPayment) {
      document.getElementById('z-payment').innerHTML = monthlyPayment;
      document.getElementById('z-assumed-rate').innerHTML = rate;
      document.getElementById('z-down-payment').innerHTML = downPayment;
      
      document.getElementById('z-no-payment-info').style.display = 'none';                    
      document.getElementById('z-payment-info').style.display = 'block';
    }
    
    function updateRates(thirtyYearRate, fifteenYearRate) {
      updateRate(document.getElementById('z-30-year-rate'), thirtyYearRate);
      updateRate(document.getElementById('z-15-year-rate'), fifteenYearRate);
      
      document.getElementById('z-30-year-rate-wrapper').style.visibility = 'visible';
      document.getElementById('z-15-year-rate-wrapper').style.visibility = 'visible';
    }
    
    function updateRate(element, rate) {
      element.innerHTML = rate == '0.00%' ? '---' : rate;
    }
    
    return {
      updateMonthlyPaymentAndRateData: function(price) {
          makeAsyncCall(price);
      }
    };
  })();
  
  ZillowUpdater.updateMonthlyPaymentAndRateData(<INSERT PRICE IF AVAILABLE>);
</script>