![\"ipstack-cover\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2020\/06\/cover-1.png\")
<\/p>\n<\/div>\n
\ud83d\udccd ipstack<\/b><\/h2>\n
Started with a different name in 2009, ipstack<\/a> 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.\u00a0<\/span><\/p>\n ipstack<\/a> 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\u2019s location. The data also help you assess risks and potential threats to your web application in time.<\/span><\/p>\n ipstack<\/a> provides three types of endpoints that let you choose their services according to your need. The base URL is <\/span>https:\/\/api.ipstack.com\/<\/i><\/a>. Now I am going to discuss each of them in detail.<\/span><\/p>\n 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.<\/span><\/p>\n Once you will hit this API endpoint, you will get the following information.<\/span><\/p>\n 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.<\/span><\/p>\n 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.<\/p>\n 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<\/strong> to the API’s base URL and specify your preferred optional parameters.<\/p>\n You will get a response somewhat like the one below.<\/p>\n 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.<\/p>\n 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<\/a> makes it extremely easy for you to develop just this unique feature. \u26a1\ufe0f<\/p>\n 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.<\/p>\n Now I am going to explain to you how I brought this application into existence.<\/p>\n Let’s do this in steps so you can understand it more clearly.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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!<\/p>\n I am a React.js fan. So to build this location tracker, I created a React.js app using\u00a0npx create-react-app app_name<\/em>. This is the code I wrote in the\u00a0App.js<\/strong>\u00a0that made the above application possible.<\/p>\n The first thing I did was to install\u00a0axios<\/strong> 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\u00a0data\u00a0<\/strong>object from the response. Lastly, I used the useState hook to save the data object in the state.<\/p>\n 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. \ud83d\udcaf<\/p>\n Now you know how easy it is to use ipstack<\/a> API in your e-commerce application and customize the content, offer discounts, and much more according to your visitor’s location.<\/p>\n 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.<\/p>\n 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.<\/p>\n \ud83d\udca1<\/p>\n 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.<\/p>\n 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.<\/p>\n ipstack is happy to oblige with our needs by providing us with extremely detailed documentation<\/a>. 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. \u26a1\ufe0f<\/p>\n The documentation also has an Options<\/strong> 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<\/a>, you can do that by appending &output=xml<\/strong> at the end of the API.<\/p>\n\ud83d\udd17 API Endpoints<\/b><\/h2>\n
\ud83d\udccc Standard Lookup<\/b><\/h3>\n
GET http:\/\/api.ipstack.com\/134.201.250.155?access_key=YOUR_ACCESS_KEY<\/code><\/pre>\n{\n\n\u00a0\u00a0\"ip\": \"134.201.250.155\",\n\n\u00a0\u00a0\"type\": \"ipv4\",\n\n\u00a0\u00a0\"continent_code\": \"NA\",\n\n\u00a0\u00a0\"continent_name\": \"North America\",\n\n\u00a0\u00a0\"country_code\": \"US\",\n\n\u00a0\u00a0\"country_name\": \"United States\",\n\n\u00a0\u00a0\"region_code\": \"CA\",\n\n\u00a0\u00a0\"region_name\": \"California\",\n\n\u00a0\u00a0\"city\": \"Los Angeles\",\n\n\u00a0\u00a0\"zip\": \"90013\",\n\n\u00a0\u00a0\"latitude\": 34.0453,\n\n\u00a0\u00a0\"longitude\": -118.2413,\n\n\u00a0\u00a0\"location\": {\n\n\u00a0\u00a0\u00a0\u00a0\"geoname_id\": 5368361,\n\n\u00a0\u00a0\u00a0\u00a0\"capital\": \"Washington D.C.\",\n\n\u00a0\u00a0\u00a0\u00a0\"languages\": [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"code\": \"en\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"name\": \"English\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"native\": \"English\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0],\n\n\u00a0\u00a0\u00a0\u00a0\"country_flag\": \"https:\/\/assets.ipstack.com\/images\/assets\/flags_svg\/us.svg\",\n\n\u00a0\u00a0\u00a0\u00a0\"country_flag_emoji\": \"\ud83c\uddfa\ud83c\uddf8\",\n\n\u00a0\u00a0\u00a0\u00a0\"country_flag_emoji_unicode\": \"U+1F1FA U+1F1F8\",\n\n\u00a0\u00a0\u00a0\u00a0\"calling_code\": \"1\",\n\n\u00a0\u00a0\u00a0\u00a0\"is_eu\": false\n\n\u00a0\u00a0},\n\n\u00a0\u00a0\"time_zone\": {\n\n\u00a0\u00a0\u00a0\u00a0\"id\": \"America\/Los_Angeles\",\n\n\u00a0\u00a0\u00a0\u00a0\"current_time\": \"2018-03-29T07:35:08-07:00\",\n\n\u00a0\u00a0\u00a0\u00a0\"gmt_offset\": -25200,\n\n\u00a0\u00a0\u00a0\u00a0\"code\": \"PDT\",\n\n\u00a0\u00a0\u00a0\u00a0\"is_daylight_saving\": true\n\n\u00a0\u00a0},\n\n\u00a0\u00a0\"currency\": {\n\n\u00a0\u00a0\u00a0\u00a0\"code\": \"USD\",\n\n\u00a0\u00a0\u00a0\u00a0\"name\": \"US Dollar\",\n\n\u00a0\u00a0\u00a0\u00a0\"plural\": \"US dollars\",\n\n\u00a0\u00a0\u00a0\u00a0\"symbol\": \"$\",\n\n\u00a0\u00a0\u00a0\u00a0\"symbol_native\": \"$\"\n\n\u00a0\u00a0},\n\n\u00a0\u00a0\"connection\": {\n\n\u00a0\u00a0\u00a0\u00a0\"asn\": 25876,\n\n\u00a0\u00a0\u00a0\u00a0\"isp\": \"Los Angeles Department of Water & Power\"\n\n\u00a0\u00a0}\n\n}<\/code><\/pre>\n\ud83d\udca1 Bulk Lookup<\/h3>\n
GET http:\/\/api.ipstack.com\/134.201.250.155,72.229.28.185,110.174.165.78?access_key=YOUR_ACCESS_KEY<\/code><\/pre>\n[\n {\n \"ip\": \"134.201.250.155\",\n \"type\": \"ipv4\",\n \"continent_code\": \"NA\",\n \"continent_name\": \"North America\",\n \"country_code\": \"US\",\n \"country_name\": \"United States\",\n \"region_code\": \"CA\",\n \"region_name\": \"California\",\n \"city\": \"Los Angeles\",\n \"zip\": \"90013\",\n \"latitude\": 34.0453,\n \"longitude\": -118.2413,\n \"location\": { ... },\n \"time_zone\": { ... },\n \"currency\": { ... },\n \"connection\": { ... },\n },\n {\n \"ip\": \"72.229.28.185\",\n \"type\": \"ipv4\",\n \"continent_code\": \"NA\",\n \"continent_name\": \"North America\",\n \"country_code\": \"US\",\n \"country_name\": \"United States\",\n \"region_code\": \"NY\",\n \"region_name\": \"New York\",\n \"city\": \"New York\",\n \"zip\": \"10036\",\n \"latitude\": 40.7605,\n \"longitude\": -73.9933,\n \"location\": { ... },\n \"time_zone\": { ... },\n \"currency\": { ... },\n \"connection\": { ... },\n },\n {\n \"ip\": \"110.174.165.78\",\n \"type\": \"ipv4\",\n \"continent_code\": \"OC\",\n \"continent_name\": \"Oceania\",\n \"country_code\": \"AU\",\n \"country_name\": \"Australia\",\n \"region_code\": \"NSW\",\n \"region_name\": \"New South Wales\",\n \"city\": \"Coffs Harbour\",\n \"zip\": \"2450\",\n \"latitude\": -30.2963,\n \"longitude\": 153.1135,\n \"location\": { ... },\n \"time_zone\": { ... },\n \"currency\": { ... },\n \"connection\": { ... },\n }\n]<\/code><\/pre>\n\ud83c\udfaf Requester IP Lookup<\/h3>\n
GET http:\/\/api.ipstack.com\/check?access_key=YOUR_ACCESS_KEY<\/code><\/pre>\n{\n \"ip\": \"155.52.187.7\",\n \"type\": \"ipv4\",\n \"continent_code\": \"NA\",\n \"continent_name\": \"North America\",\n \"country_code\": \"US\",\n \"country_name\": \"United States\",\n \"region_code\": \"MA\",\n \"region_name\": \"Massachusetts\",\n \"city\": \"Boston\",\n \"zip\": \"02115\",\n \"latitude\": 42.3424,\n \"longitude\": -71.0878,\n \"location\": {\n \"geoname_id\": 4930956,\n \"capital\": \"Washington D.C.\",\n \"languages\": [\n {\n \"code\": \"en\",\n \"name\": \"English\",\n \"native\": \"English\"\n }\n ],\n \"country_flag\": \"https:\/\/assets.ipstack.com\/images\/assets\/flags_svg\/us.svg\",\n \"country_flag_emoji\": \"\ud83c\uddfa\ud83c\uddf8\",\n \"country_flag_emoji_unicode\": \"U+1F1FA U+1F1F8\",\n \"calling_code\": \"1\",\n \"is_eu\": false\n },\n \"time_zone\": {\n \"id\": \"America\/New_York\",\n \"current_time\": \"2018-03-30T07:54:25-04:00\",\n \"gmt_offset\": -14400,\n \"code\": \"EDT\",\n \"is_daylight_saving\": true\n },\n \"currency\": {\n \"code\": \"USD\",\n \"name\": \"US Dollar\",\n \"plural\": \"US dollars\",\n \"symbol\": \"$\",\n \"symbol_native\": \"$\"\n },\n \"connection\": {\n \"asn\": 40127,\n \"isp\": \"Longwood Medical and Academic Area (LMA)\"\n }\n}<\/code><\/pre>\n\ud83d\uded2 IPStack API For eCommerce<\/h2>\n
![\"Where](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2020\/06\/where_are_you_from_thedevcouple.png\")
<\/p>\n<\/div>\n\ud83e\uddd0 How it works!?<\/h3>\n
\u2192 Step #1<\/b><\/h4>\n
![\"Price](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2020\/06\/price-page-thedevcouple.png\")
<\/p>\n<\/div>\n\u2192 Step #2<\/b><\/h4>\n
![\"Ipstack](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2020\/06\/ipstack-dashboard-thedevcouple.png\")
<\/p>\n<\/div>\n\u2192 Step #3<\/b><\/h4>\n
import React, { useState, useEffect } from \"react\";\nimport axiox from \"axios\";\nimport \".\/App.css\";\n\nfunction App() {\n const [countryInfo, setCountryInfo] = useState(\"\");\n const [location, setLocation] = useState(\"\");\n\n useEffect(() => {\n (async () => {\n const { data } = await axiox.get(\n \"http:\/\/api.ipstack.com\/check?access_key=YOUR_API_ACCESS_KEY\",\n );\n setCountryInfo(data);\n setLocation(data.location);\n })();\n }, []);\n\n return (\n <div className=\"container\">\n <div className=\"countryInfo\">\n <p>\n {` You are living in ${countryInfo.country_name} ${location.country_flag_emoji}`}\n <\/p>\n <\/div>\n <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\ud83d\ude80 Performance<\/h3>\n
\n
![\"Ipstack](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2020\/06\/ipstack-performance.png\")
<\/p>\n<\/div>\n\ud83d\udcd6 Documentation<\/h3>\n
GET http:\/\/api.ipstack.com\/134.201.250.155?access_key=YOUR_API_ACCESS_KEY&output=xml<\/code><\/pre>\n![\"Ipstack](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2020\/06\/ipstack-documentation-thedevcouple.png\")
<\/p>\n<\/div>\n\ud83d\udcb0 Pricing<\/h2>\n