Integrating Address Validation in Optimizely Using Smarty
Address validation is a crucial component of any ecommerce platform. It ensures accurate customer data, reduces shipping errors, and improves the overall user experience. In this post, we’ll walk through how to integrate address validation in Optimizely (formerly Episerver) using Smarty with the smartystreets-dotnet SDK.
Why Smarty?
Smarty provides powerful APIs for:
-
Autocompleting address input
-
Verifying domestic and international addresses
-
Validating zip/postal codes
It offers both US-specific and international endpoints, making it suitable for global ecommerce implementations.
Setting Up Smarty in Optimizely
1. Configure Credentials
First, define your configuration model to hold Smarty credentials:
public class SmartyConfiguration
{
public string ApplicationId { get; set; }
public string ApplicationSecret { get; set; }
}
Extend your configuration setup:
public static class SmartyConfigurationLoader
{
public static IConfiguration SmartyConfiguration(this IConfiguration configuration) =>
configuration.GetSection("SmartyConfiguration");
}
2. Define Smarty Settings for Your CMS
Create a model for managing country exclusions:
public class SmartySettingsModel
{
[JsonProperty("autocompleteExcludedCountries")]
public string AutocompleteExcludedCountries { get; set; }
[JsonProperty("verificationExcludedCountries")]
public string VerificationExcludedCountries { get; set; }
}
Display settings in the UI using a ViewComponent:
public class SmartySettingsViewComponent : ViewComponent
{
private readonly ISmartyService _smartyService;
public SmartySettingsViewComponent(ISmartyService smartyService)
{
_smartyService = smartyService;
}
public IViewComponentResult Invoke()
{
var viewModel = _smartyService.GetSettings();
return View("~/Features/Smarty/Components/SmartySettings/Default.cshtml", viewModel);
}
}
3. Implement the Smarty Controller
The controller handles front-end requests for autocomplete and address validation:
[Route("smarty/autocomplete")]
public IActionResult Autocomplete(AutocompleteRequestModel model)
[Route("smarty/street")]
public IActionResult Street(...)
Both actions use a caching layer to optimize repeated queries.
4. Create the Smarty Service
The heart of the integration is the SmartyService that communicates with the Smarty APIs:
-
US Autocomplete via
USAutocompleteProApi -
International Autocomplete via
InternationalAutocompleteApi -
US Street Verification via
USStreetApi -
International Address Verification via
InternationalStreetApi
Example method:
public object Autocomplete(AutocompleteRequestModel request)
{
// Handles US or international logic
}
public object Street(AddressModel addressModel)
{
// Determines whether to use US or international client
}
Fallback strategies like trying with placeholder streets (“A” or “B”) for ZIP code validation enhance reliability (if your checkout don't have full address.)
Client-side JavaScript Integration
You can call /smarty/autocomplete or /smarty/street from your JavaScript to power address suggestions and validation. For example:
fetch(`/smarty/autocomplete?countryCode=USA&line1=123 Main`)
.then(response => response.json())
.then(data => {
// Render autocomplete suggestions
});
Customize your UI interactions based on the response schema.
Benefits of Smarty Integration
-
Improved accuracy in shipping addresses
-
Reduced failed deliveries
-
Better customer experience with live autocomplete
-
Support for international addresses
Conclusion
Integrating address validation using Smarty in Optimizely helps elevate your e-commerce platform’s user experience. Smarty becomes a powerful ally for global address accuracy with robust APIs and thoughtful error handling.
Comments