BigCommerce Integration

Ideal Postcodes provides a BigCommerce integration that facilitates UK address search and validation across a BigCommerce Store.

This extension is free to download and install. However, our address validation services requires a paid account at ideal-postcodes.co.uk.

This integration works by hooking into BigCommerce's custom HTML field. It waits until a valid address form is present before binding itself.

Contact us if you get stuck. Drop by our developer chat page for in-depth assistance.

Features

• Address autocompletion on checkout shipping and billing pages
• Address autocomplete
• Postcode lookup
• Binds to the following address forms:
  • Checkout billing address
  • Checkout shipping address
  • Account registration
  • Account management
• Checks if key is usable before enabling address search
• Populates organisation name from selected address

Screenshots

Address Autocomplete

Postcode Lookup

Links

• Guide
• Changelog
• npm Module
• GitHub Repository
• CDN

Support

If you need support, you can either reach out to us on our support page or drop by our developer chat page.

Installation

There are 2 methods of installation.

Deciding Coverage

You can opt to have address validation on checkout only or include account pages (such as registration and address management).

If you wish to add address validation to both your accounts and checkout flows, you will need to use Analytics Tracking Code.

If you only wish to add address validation to your checkout flows, you may use the Script Manager.

Install via Tracking Code

This integration is installed via embedding scripts in Google Analytics Tracking Code. It enables address validation on both your checkout and accounts page.

1. Navigate to your Tracking Code page by clicking on the Advanced Settings tab from your dashboard.
2. Check the Google Analytics checkbox in the Analytics page (under the General Settings tab).
3. Insert Initialisation Code and Key. In the Analytics page, under the Google Analytics tab, insert the script from our code insertion step step and click on Save. The page should appear like below:

Install via Script Manager

This integration is installed via embedding scripts in Script Manager. It enables address validation on your checkout only (and not accounts page).

1. From the Administration page, click on Store Front and then Script Manager.
2. Click on the blue Create a Script button.
3. On the Create Script page, name your script. Select the following options:
   • Footer as the location on page
   • Checkout as the page on which the script will be added
   • Essential as the script category
   • Script as the script type
4. Insert the script from our code insertion step step below in the Script contents editor and click on Save. The page should appear like below:

Setup Plugin

In the relevant script field, you will need to insert:

  <script>
    window.idpcConfig = {
      apiKey: "Your API Key goes here"
    };
  </script>

  <script async 
    type="text/javascript"
    crossorigin="anonymous"
    src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/bigcommerce@Y.Y.Y">
  </script>

When inserting the configuration codes, take care to replace the following:

• The apiKey attribute in the first script tag. This should be replaced with the key on your account
• The version number of the second script src field. The latter Y.Y.Y in "https://cdn.jsdelivr.net/npm/@ideal-postcodes/bigcommerce@Y.Y.Y" should be replaced with the relevant version number.

The latest version number is below:

Versions are automatically logged and tracked on our Changelog.

Testing

Your first key on your Ideal Postcodes account will carry a free test balance which you can use to verify and test your integration. Please contact support if you need a larger test balance.

Going Live

In order to go live, you will need to purchase a balance of lookups on your API Key. This can be done manually or automated from your dashboard. Each address search consumes one lookup from your key balance.

See our account setup guide for the quickest way to go live by creating your first API Key and enabling automated top-ups.

Configuration

The minimum configuration is as follows:

  <script>
    window.idpcConfig = {
      apiKey: "Your API Key goes here"
    };
  </script>

See our integration configuration guide to understand how to customise this.

Defaults

The available configuration attributes for the configuration are as follows:

{
   // API Key is not set by default
  apiKey: "",

  // Postcode Lookup is enabled
  postcodeLookup: true,

  // Autocomplete is enabled
  autocomplete: true,

  // Company name field is updated
  populateOrganisation: true,
  // County name field is not updated
  populateCounty: false,

  // Advanced configuration
  autocompleteOverride: {},
  postcodeLookupOverride: {}
}

API Key

Your API Key is central to how our service recognises your integration. See our guide on API Keys to find out more.

API Keys can also be safeguarded against potential misuse, please see our guide on securing your API key to find out more.