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.

May 21, 2025

Comments

Please login to comment.