Address AutoComplete API
As an additional service, TradeGlobal Commerce has address validation capability to provide address auto-complete functionality on your site checkout page. By integrating this API and some javascript, you can have a list of addresses auto-populate as your user is completing the address information. This not only provides a smoother checkout experience, but also prevents delays in shipping when invalid/incomplete address data is assigned to the order. This is available for US destinations and can be used for domestic orders as well.
Request
Authorization Required
To access this endpoint you will need to provice your Access Token provided to you by TradeGlobal in the token parameter of the request.
Address Auto-Complete requests are supported by the HTTP GET method. Create a GET request by adding the parameters in the HTTP request parameters using the application/json media type. The request URL must conform to the following specifications:
| Environment | Protocol | Host | Path | Format |
|---|---|---|---|---|
| Production | https:// | services.tradeglobal.com | /TGCInternalServices/AddressValidation/api/AddressAutoComplete | Json |
| Staging | https:// | services.filltekglobalsolutions.com | /TGCInternalServices/AddressValidation/api/AddressAutoComplete | Json |
Example Request
GET /TGCInternalServices/AddressValidation/api/AddressAutoComplete?token=:token&merchantCode=:merchantCode&address1=:address1&address2=:address2&city=:city&stateprovince=:stateprovince&country=:country&postalcode=:postalcode |
Production Host: services.tradeglobal.com |
Staging Host: services.filltekglobalsolutions.com |
Content-Type: application/json |
Output Elements (Y=Yes, N=No, C=Conditional, N/A=Not Applicable)
Example Respone - JSON Format
200 OK
Content-Type: application/json
{
"Token": 123,
"MerchantCode": "TGCSANDBOX",
"MaxRecords": 5,
"AddressInput": {
"Address1": "446",
"Address2": null,
"City": null,
"StateProvince": null,
"Country": "US",
"PostalCode": null
},
"Results": {
"AddressResults": [
{
"AddressLine": null,
"Address1": "446 E 10th Ave ",
"Address2": "",
"City": "Anchorage",
"StateProvince": "AK",
"Country": "US",
"PostalCode": "99501-3704"
},
{
"AddressLine": null,
"Address1": "446 W 4th Ave ",
"Address2": "",
"City": "Anchorage",
"StateProvince": "AK",
"Country": "US",
"PostalCode": "99501-2303"
},
{
"AddressLine": null,
"Address1": "4460 Edinburgh Dr ",
"Address2": "",
"City": "Anchorage",
"StateProvince": "AK",
"Country": "US",
"PostalCode": "99502-1419"
},
{
"AddressLine": null,
"Address1": "4460 W Lake Cir ",
"Address2": "",
"City": "Anchorage",
"StateProvince": "AK",
"Country": "US",
"PostalCode": "99502-4910"
},
{
"AddressLine": null,
"Address1": "4461 W Lake Cir ",
"Address2": "",
"City": "Anchorage",
"StateProvince": "AK",
"Country": "US",
"PostalCode": "99502-4911"
}
]
}
}
Integrating into your checkout
To make use of the autocomplete functionality, you will need to use both the API in addition to some extra javascript in your checkout fields. Below is a sample html page to demostrate how to do this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>TradeGlobal Commerce - Address Validation</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/tradeglobal-ui-dashboard.css?v=1.0.1" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<!--<link href="../assets/demo/demo.css" rel="stylesheet" />-->
<script src="scripts/MerchantIntegration.js"></script>
<script src="scripts/MerchantIntegrationPageEvents.js"></script>
<script src="scripts/Login.js"></script>
<script src="../assets/js/core/jquery.min.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Google Maps Plugin -->
<!--<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>-->
<!-- Chart JS -->
<script src="../assets/js/plugins/chartjs.min.js"></script>
<!-- Notifications Plugin -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
<script src="../assets/js/tradeglobal-ui-dashboard.js?v=1.0.1"></script>
<!-- Now Ui Dashboard DEMO methods, don't include it in your project! -->
<!--<script src="../assets/demo/demo.js"></script>-->
<script src="scripts/CommonStuff.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="Styles/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
//ADDRESS VALIDATION
function ClearFields() {
$("#Address1Box").val('');
$("#Address2Box").val('');
$("#CityBox").val('');
$("#StateBox").val('');
$("#PostalCodeBox").val('');
}
$(document).ready(LoadCountryDropDown("ShipToCountryBox"));
$(document).ready(function () {
$("#Address1Box").keyup(function GetAddress() {
var address1 = $("#Address1Box").val();
if (address1 == '') {
ClearFields();
return;
}
var address2 = $("#Address2Box").val();
var city = $("#CityBox").val();
var state = $("#StateBox").val();
var postal = $("#PostalCodeBox").val();
var country = $("#ShipToCountryBox").val();
$.ajax({
method: 'GET',
url: 'https://services.filltekglobalsolutions.com/TGCInternalServices/AddressValidation/api/AddressAutoComplete',
data: '{ address1: "' + address1 + '", address2: "' + address2 + '", city: "' + city + '", state: "' + state + '", country: "' + country + '", postal: "' + postal + '" }',
contentType: 'application/json',
dataType: 'json',
success: function (data) {
if (data.d != null) {
var results = data.d["Results"];
var addressResults = results.AddressResults;
var resultLines = [];
for (var x = 0; x < addressResults.length; x++) {
var add1 = addressResults[x]["Address1"];
var add2 = addressResults[x]["Address2"];
var city = addressResults[x]["City"];
var state = addressResults[x]["StateProvince"];
var country = addressResults[x]["Country"];
var postal = addressResults[x]["PostalCode"];
var resultLine = add1 + ' ' + add2 + ' ' + city + ' ' + state + ' ' + country + ' ' + postal;
//resultLines.push(resultLine);
var optionValue = { address1: add1, address2: add2, local: city, province: state, zip: postal, addressLine: resultLine };
resultLines.push(optionValue);
}
$("#Address1Box").autocomplete({
minLength: 2,
source: function (request, response) {
response($.map(resultLines, function (value, key) {
return {
fullAddress: value.addressLine,
Address_1: value.address1,
Address_2: value.address2,
Locality: value.local,
State: value.province,
Zip: value.zip,
value: value.addressLine
//address1: value.address1
}
}));
},
focus: function (event, ui) {
$('#Address1Box').val(ui.item.fullAddress);
return false;
},
select: function (event, ui) {
$("#Address1Box").val(ui.item.Address_1);
$("#Address2Box").val(ui.item.Address_2);
$("#CityBox").val(ui.item.Locality);
$("#StateBox").val(ui.item.State);
$("#PostalCodeBox").val(ui.item.Zip);
return false;
}
});
}
},
error: function (response) {
}
});
});
})
//END ADDRESS VALIDATION
</script>
</head>
<body style="background-color:#e9eaef">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute bg-primary fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<div class="navbar-toggle">
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<a class="navbar-brand" href="#pablo">TradeGlobal Commerce</a>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="panel-header panel-header-sm">
<div class="header text-center">
</div>
</div>
<div class="content" style="background-color:#e9eaef">
<div class="row" style="padding-top:3%">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding-left:10%;padding-right:10%">
<div class="card">
<div class="card-title" style="padding-left:5%; padding-top:2%">
<h3 class="card-title">Address Validation</h3>
</div>
<div class="card-body" style="padding-left:5%">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1">
<label for="FirstNameBox">First Name</label>
<input type="text" class="form-control" id="FirstNameBox" />
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<label for="MiddleNameBox">Middle Name</label>
<input type="text" class="form-control" id="MiddleNameBox" />
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<label for="LastNameBox">Last Name</label>
<input type="text" class="form-control" id="LastNameBox" />
</div>
</div>
<div class="row" style="padding-top:1%">
<div class="col-xs-12 col-sm-12 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1">
<label for="ShipToCountryBox">Country</label>
<select id="ShipToCountryBox" class="form-control">
<option value="Select">Select</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-1 col-lg-6 col-lg-offset-1">
<label for="Address1Box">Address 1</label>
<input type="text" class="form-control" id="Address1Box" />
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-1 col-lg-6 col-lg-offset-1">
<label for="Address2Box">Address 2</label>
<input type="text" class="form-control" id="Address2Box" />
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-md-offset-1 col-lg-2 col-lg-offset-1">
<label for="CityBox">City</label>
<input type="text" class="form-control" id="CityBox" />
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<label for="StateBox">State/Province</label>
<input type="text" class="form-control" id="StateBox" />
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<label for="PostalCodeBox">Postal Code</label>
<input type="text" class="form-control" id="PostalCodeBox" />
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-1 col-lg-4 col-lg-offset-1">
<label for="PhoneBox">Phone</label>
<input type="text" class="form-control" id="PhoneBox" />
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-1 col-lg-4 col-lg-offset-1">
<label for="EmailBox">Email</label>
<input type="text" class="form-control" id="EmailBox" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>