CODEWITHSUNDEEP
javascript
Mark
Mark

Reputation: 3738

Canada Post AddressComplete API usage help needed

I've been having a difficult time just to run a demo of Canada Post AddressComplete.

This is what the demo shows: https://www.canadapost.ca/pca/support/guides/bestpractices

This is the API setup: https://www.canadapost.ca/pca/support/guides/advanced#fm

I've put the following in a html file. Note that I basically just copied the top 2 code snippets from the API setup URL.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="input-line">  
        <label for="street-address">Address</label>  
        <input id="street-address" type="text" placeholder="Street address" autofocus /> 
    </div> 
    <div class="input-line">  
        <label for="street-address2"></label>  
        <input id="street-address2" type="text" placeholder="" /> 
    </div> 
    <div class="input-line">  
        <label for="city"></label>  
        <input id="city" type="text" placeholder="City" /> 
    </div> 
    <div class="input-line">  
        <label for="state"></label>  
        <input id="state" type="text" placeholder="State/Province" /> 
    </div> 
    <div class="input-line">  
        <label for="postcode"></label>  
        <input id="postcode" type="text" placeholder="Zip/Postcode" /> 
    </div> 
    <div class="input-line">  
        <label for="country"></label>  
        <input id="country" type="text" placeholder="Country" /> 
    </div>  
     
    <div class="input-line">  
        <label for="multi-unit"></label>  
        <input id="multi-unit" type="text" placeholder="Multi-Unit-Indicator" /> 
    </div> 
    <div class="input-line">  
        <label for="residential-business"></label>  
        <input id="residential-business" type="text" placeholder="Residential/Business" /> 
    </div> 
  </body>
  
  <script type="text/javascript">  
    var fields = [   
        { element: "search", field: "", mode: pca.fieldMode.SEARCH }, 
 
        { element: "street-address", field: "Line1", mode: pca.fieldMode.POPULATE },   
        { element: "street-address2", field: "Line2", mode: pca.fieldMode.POPULATE },   
        { element: "city", field: "City", mode: pca.fieldMode.POPULATE },   
        { element: "state", field: "ProvinceName", mode: pca.fieldMode.POPULATE },   
        { element: "postcode", field: "PostalCode" },   
        { element: "country", field: "CountryName", mode: pca.fieldMode.COUNTRY }, 
 
        { element: "multi-unit", field: "{AcMua}", mode: pca.fieldMode.POPULATE },   
        { element: "residential-business", field: "{AcRbdi}", mode: pca.fieldMode.POPULATE }  
    ],  
    options = {   
        key: "AA11-AA11-AA11-AA11"  
    },  
    control = new pca.Address(fields, options); 
</script>

From the console it complains about:

Uncaught ReferenceError: pca is not defined

which makes sense because pca is not defined anywhere. My question is then, where is this pca object coming from? Do I import it somehow?

I've looked into this thread, Canada Post AddressComplete on "populate" not working. The author is able to search for the address and have some address fields auto populate. However I don't see the author importing pca from anywhere.

Upvotes: 1

Views: 3730

Answers (2)

Mark
Mark

Reputation: 3738

Figured it out,

The following script is needed.

<script type="text/javascript" src="https://ws1.postescanada-canadapost.ca/js/addresscomplete-2.30.js?key=xyz&app=14466&culture=en"></script>

Also for complete Address Complete implementation don't forget to add a div for the search input.

Below is the full implementation for the demo, don't forget to change the api key to your own:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="https://ws1.postescanada-canadapost.ca/css/addresscomplete-2.30.min.css?key=tr28-mh11-ud79-br91" />
    <script type="text/javascript" src="https://ws1.postescanada-canadapost.ca/js/addresscomplete-2.30.js?key=tr28-mh11-ud79-br91&app=14466&culture=en"></script>
  </head>
  <body>
    <div class="input-line">
      <input id="search" type="text" name="" value="">
    </div>
    <div class="input-line">  
        <label for="street-address">Address</label>  
        <input id="street-address" type="text" placeholder="Street address" autofocus /> 
    </div> 
    <div class="input-line">  
        <label for="street-address2"></label>  
        <input id="street-address2" type="text" placeholder="" /> 
    </div> 
    <div class="input-line">  
        <label for="city"></label>  
        <input id="city" type="text" placeholder="City" /> 
    </div> 
    <div class="input-line">  
        <label for="state"></label>  
        <input id="state" type="text" placeholder="State/Province" /> 
    </div> 
    <div class="input-line">  
        <label for="postcode"></label>  
        <input id="postcode" type="text" placeholder="Zip/Postcode" /> 
    </div> 
    <div class="input-line">  
        <label for="country"></label>  
        <input id="country" type="text" placeholder="Country" /> 
    </div>  
     
    <div class="input-line">  
        <label for="multi-unit"></label>  
        <input id="multi-unit" type="text" placeholder="Multi-Unit-Indicator" /> 
    </div> 
    <div class="input-line">  
        <label for="residential-business"></label>  
        <input id="residential-business" type="text" placeholder="Residential/Business" /> 
    </div> 
  </body>
  
  <script type="text/javascript">  
    var fields = [   
        { element: "search", field: "", mode: pca.fieldMode.SEARCH }, 
 
        { element: "street-address", field: "Line1", mode: pca.fieldMode.POPULATE },   
        { element: "street-address2", field: "Line2", mode: pca.fieldMode.POPULATE },   
        { element: "city", field: "City", mode: pca.fieldMode.POPULATE },   
        { element: "state", field: "ProvinceName", mode: pca.fieldMode.POPULATE },   
        { element: "postcode", field: "PostalCode" },   
        { element: "country", field: "CountryName", mode: pca.fieldMode.COUNTRY }, 
 
        { element: "multi-unit", field: "{AcMua}", mode: pca.fieldMode.POPULATE },   
        { element: "residential-business", field: "{AcRbdi}", mode: pca.fieldMode.POPULATE }  
    ],  
    options = {   
        key: "ADD-YOUR-KEY-HERE"  
    },  
    control = new pca.Address(fields, options); 
</script>
  
  
</html>

Upvotes: 3

Jake B.
Jake B.

Reputation: 444

May seem obvious; but, have you followed the steps on this page?

https://www.canadapost.ca/pca/support/guides/

When working with the API you will also need to setup the API key shown at step 2.

Upvotes: 0

Related Questions