Subscribe to a Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?

How amazing it would be if you can show products in your e-commerce application according to the location of your audience. How it would stand you out from the rest of the competition. Today, I am going to talk about an API that provides location information of your visitors and much. I am also going to show you how you can use it in your e-commerce application. So without any further ado, let’s jump in!

ipstack-cover

๐Ÿ“ ipstack

Started with a different name in 2009, ipstack was a community funded open-source project that offered software developers an API that gave the geolocation information of any IP address. Fast forward to eleven years later, the API was rebuilt into a fully-fledged IP geolocation platform. Currently, ipstack is serving the needs of 100k+ satisfied customers.ย 

ipstack API service allows you to get the location of website visitors at a stage before any data is entered into the system. This location data then helps you customize content on your website according to your visitorโ€™s location. The data also help you assess risks and potential threats to your web application in time.

๐Ÿ”— API Endpoints

ipstack provides three types of endpoints that let you choose their services according to your need. The base URL is https://api.ipstack.com/. Now I am going to discuss each of them in detail.

๐Ÿ“Œ Standard Lookup

The first one on the list is standard lookup which gives you the power to get the location data of any IP address. The only thing you need to do is add the IP address and your ipstack access key after the base URL.

GET http://api.ipstack.com/134.201.250.155?access_key=YOUR_ACCESS_KEY

Once you will hit this API endpoint, you will get the following information.

{

ย ย "ip": "134.201.250.155",

ย ย "type": "ipv4",

ย ย "continent_code": "NA",

ย ย "continent_name": "North America",

ย ย "country_code": "US",

ย ย "country_name": "United States",

ย ย "region_code": "CA",

ย ย "region_name": "California",

ย ย "city": "Los Angeles",

ย ย "zip": "90013",

ย ย "latitude": 34.0453,

ย ย "longitude": -118.2413,

ย ย "location": {

ย ย ย ย "geoname_id": 5368361,

ย ย ย ย "capital": "Washington D.C.",

ย ย ย ย "languages": [

ย ย ย ย ย ย ย ย {

ย ย ย ย ย ย ย ย ย ย "code": "en",

ย ย ย ย ย ย ย ย ย ย "name": "English",

ย ย ย ย ย ย ย ย ย ย "native": "English"

ย ย ย ย ย ย ย ย }

ย ย ย ย ],

ย ย ย ย "country_flag": "https://assets.ipstack.com/images/assets/flags_svg/us.svg",

ย ย ย ย "country_flag_emoji": "๐Ÿ‡บ๐Ÿ‡ธ",

ย ย ย ย "country_flag_emoji_unicode": "U+1F1FA U+1F1F8",

ย ย ย ย "calling_code": "1",

ย ย ย ย "is_eu": false

ย ย },

ย ย "time_zone": {

ย ย ย ย "id": "America/Los_Angeles",

ย ย ย ย "current_time": "2018-03-29T07:35:08-07:00",

ย ย ย ย "gmt_offset": -25200,

ย ย ย ย "code": "PDT",

ย ย ย ย "is_daylight_saving": true

ย ย },

ย ย "currency": {

ย ย ย ย "code": "USD",

ย ย ย ย "name": "US Dollar",

ย ย ย ย "plural": "US dollars",

ย ย ย ย "symbol": "$",

ย ย ย ย "symbol_native": "$"

ย ย },

ย ย "connection": {

ย ย ย ย "asn": 25876,

ย ย ย ย "isp": "Los Angeles Department of Water & Power"

ย ย }

}

๐Ÿ’ก Bulk Lookup

This endpoint allows its users to get location data of multiple IP addresses with a single API call. All you need to do is put all the IPs together with a comma between them and you are good to go.

GET http://api.ipstack.com/134.201.250.155,72.229.28.185,110.174.165.78?access_key=YOUR_ACCESS_KEY

You will get an array of objects as a response. Each object contains the location information of the IP address that was put in the API.

[
  {
    "ip": "134.201.250.155",
    "type": "ipv4",
    "continent_code": "NA",
    "continent_name": "North America",
    "country_code": "US",
    "country_name": "United States",
    "region_code": "CA",
    "region_name": "California",
    "city": "Los Angeles",
    "zip": "90013",
    "latitude": 34.0453,
    "longitude": -118.2413,
    "location": { ... },
    "time_zone": { ... },
    "currency": { ... },
    "connection": { ... },
  },
  {
    "ip": "72.229.28.185",
    "type": "ipv4",
    "continent_code": "NA",
    "continent_name": "North America",
    "country_code": "US",
    "country_name": "United States",
    "region_code": "NY",
    "region_name": "New York",
    "city": "New York",
    "zip": "10036",
    "latitude": 40.7605,
    "longitude": -73.9933,
    "location": { ... },
    "time_zone": { ... },
    "currency": { ... },
    "connection": { ... },
  },
  {
    "ip": "110.174.165.78",
    "type": "ipv4",
    "continent_code": "OC",
    "continent_name": "Oceania",
    "country_code": "AU",
    "country_name": "Australia",
    "region_code": "NSW",
    "region_name": "New South Wales",
    "city": "Coffs Harbour",
    "zip": "2450",
    "latitude": -30.2963,
    "longitude": 153.1135,
    "location": { ... },
    "time_zone": { ... },
    "currency": { ... },
    "connection": { ... },
  }
]

๐ŸŽฏ Requester IP Lookup

The ipstack API also offers a separate API endpoint capable of detecting the IP address which the current API request is coming from. In order to use this endpoint, simply append check to the API’s base URL and specify your preferred optional parameters.

GET http://api.ipstack.com/check?access_key=YOUR_ACCESS_KEY

You will get a response somewhat like the one below.

{
  "ip": "155.52.187.7",
  "type": "ipv4",
  "continent_code": "NA",
  "continent_name": "North America",
  "country_code": "US",
  "country_name": "United States",
  "region_code": "MA",
  "region_name": "Massachusetts",
  "city": "Boston",
  "zip": "02115",
  "latitude": 42.3424,
  "longitude": -71.0878,
  "location": {
    "geoname_id": 4930956,
    "capital": "Washington D.C.",
    "languages": [
        {
          "code": "en",
          "name": "English",
          "native": "English"
        }
    ],
    "country_flag": "https://assets.ipstack.com/images/assets/flags_svg/us.svg",
    "country_flag_emoji": "๐Ÿ‡บ๐Ÿ‡ธ",
    "country_flag_emoji_unicode": "U+1F1FA U+1F1F8",
    "calling_code": "1",
    "is_eu": false
  },
  "time_zone": {
    "id": "America/New_York",
    "current_time": "2018-03-30T07:54:25-04:00",
    "gmt_offset": -14400,
    "code": "EDT",
    "is_daylight_saving": true
  },
  "currency": {
    "code": "USD",
    "name": "US Dollar",
    "plural": "US dollars",
    "symbol": "$",
    "symbol_native": "$"
  },
  "connection": {
    "asn": 40127,
    "isp": "Longwood Medical and Academic Area (LMA)"
  }
}

๐Ÿ›’ IPStack API For eCommerce

In 2020, there are loads of e-commerce applications available on the Internet. This much saturation ultimately leads to competition. If your application is just like the rest then it will not stand out. If it does not stand out then probably it will not be a success.

What if you can offer a discount on your products depending upon the location of your audience. This will be a huge game-changer for you. Fortunately, ipstack makes it extremely easy for you to develop just this unique feature. โšก๏ธ

I have built a small web application that shows its visitor the country they are residing in. I have used ipstack API to get the visitor’s location.

Where Are You From Thedevcouple

Now I am going to explain to you how I brought this application into existence.

๐Ÿง How it works!?

Let’s do this in steps so you can understand it more clearly.

โ†’ Step #1

You need the ipstack API to get your visitor’s location. So head over to the website. If you are only testing the API then go for the free API key. You can get that by navigating to the pricing page.

Price Page Thedevcouple

โ†’ Step #2

On the pricing page, you will see that there are five packages, i.e., one free package, three paid packages, and one custom package. Select the free package. You will be directed to sign up.

Once you have signed up, you will be directed to a dashboard. There you will see your API access key. This might be the most important thing on your dashboard. Copy it!

Ipstack Dashboard Thedevcouple

โ†’ Step #3

I am a React.js fan. So to build this location tracker, I created a React.js app usingย npx create-react-app app_name. This is the code I wrote in theย App.jsย that made the above application possible.

import React, { useState, useEffect } from "react";
import axiox from "axios";
import "./App.css";

function App() {
  const [countryInfo, setCountryInfo] = useState("");
  const [location, setLocation] = useState("");

  useEffect(() => {
    (async () => {
      const { data } = await axiox.get(
        "http://api.ipstack.com/check?access_key=YOUR_API_ACCESS_KEY",
      );
      setCountryInfo(data);
      setLocation(data.location);
    })();
  }, []);

  return (
    <div className="container">
      <div className="countryInfo">
        <p>
          {` You are living in ${countryInfo.country_name} ${location.country_flag_emoji}`}
        </p>
      </div>
    </div>
  );
}

export default App;

The first thing I did was to installย axios package to make the API call. Then I imported React hooks, i.e., useState and useEffect. I made the API call in the useEffect hook and using object destructuring extractedย dataย object from the response. Lastly, I used the useState hook to save the data object in the state.

This data object contains the location information of your website’s visitor. I simply used this information to extract the country information and displayed it on the screen. That’s it. ๐Ÿ’ฏ

Now you know how easy it is to use ipstack API in your e-commerce application and customize the content, offer discounts, and much more according to your visitor’s location.

๐Ÿš€ Performance

The performance of an API is extremely important as in many cases the data it provides us is directly being used in the application. If there is any lag whatsoever, your website performance can be affected. Companies such as Microsoft, Samsung, Airbnb, etc are using ipstack API. So it must be extremely fast.

I am doing a performance test using Postman. I have run several tests with different API addresses. The following is the result I acquired. These results are the average of many tests I performed.

๐Ÿ’ก

  • โšก๏ธ On the first test, I received a response time of 413msย which is quite decent.
  • ๐Ÿš€ I then used different IP addresses and I observed an average response time of 385ms.
  • ๐Ÿ”ฅ I also used check endpoint and the response time was 398ms.

385ms average response time is extremely impressive for an API of this scale. This again justifies that ipstack API will be the perfect location tracking API for your e-commerce application.

Ipstack Performance

๐Ÿ“– Documentation

The next thing that comes to mind is that there should be a complete guide about how to use the API. It can also happen that your e-commerce application is facing some unexpected error or it needs a specific set of options or results from the API. All of this can be easily dealt with if the API has proper documentation.

ipstack is happy to oblige with our needs by providing us with extremely detailed documentation. The documentation not only has information about the API endpoints but also includes explanations of the error messages. It explains the error code so that the API users can easily debug what the issue is. โšก๏ธ

The documentation also has an Options section. This section contains all the options you can add to the API URL to get your desired result. For instance, if you are interested in getting the API response as XML, you can do that by appending &output=xml at the end of the API.

GET http://api.ipstack.com/134.201.250.155?access_key=YOUR_API_ACCESS_KEY&output=xml

Ipstack Documentation Thedevcouple

๐Ÿ’ฐ Pricing

ipstack offers three fixed price plans and one custom plan that you can avail according to your need. The three fixed price plans are Basic, Professional, and Professional Plus.ย  All three of them offer different API features. You also have an option to purchase any of these plans on a yearly basis. A yearly base plan gets you a 20% discount. ๐Ÿฅ‚

On the Basic plan, you get 50,000 API requests/month, premium support, the location module, SSL encryption, currency, timezone, and connection module. On the Professional plan, you get everything in the Basic plan with addition to 500,000 API requests/month and bulk endpoint. Last but not least, the Professional Plus plan includes everything that is in the Professional Plan but with a major change. Instead of 500,000 API requests, you get 2M API requests/month and also security module.

Price Page Thedevcouple

๐Ÿ™Œ๐Ÿป Wrapping Up

ipstack is one of the best location tracking API I have worked with. It provides you a lot of amazing features that you can make use of in your product. It has great applications in e-commerce. Getting your user’s location data can allow you to show them more region-specific content.

It is a blazing fast API. Easy to use. It has great documentation and the price is also very affordable. If you are looking for a location tracking API for your e-commerce application then ipstack might be your best choice. ๐Ÿ’ฏ

Have you used IPAPI or any similar service to drill userโ€™s information? Which service did you use and how was your experience? Let us know your thoughts in the comments section below.ย 

Peace! ๐Ÿคž

๐Ÿ™Œ

SUBSCRIBE TO DEVELOPERS TAKEAWAY!

A Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?

IPStack #1 Choice for Site Visitors’ Tracking and Identification DevKinsta โ€“ One Suite For All Your WordPress Development IPWhoIs.io Review โ€“ย Get User Location Data In An Instant
There are currently no comments.

๐Ÿ™Œ You must have something to say here...