Using Velo you can write code to access 3rd-party web services. You can call a 3rd-party service directly from your client-side code. However, if you have security concerns, such as exposing API keys, you can call the service from a . backend web module You cannot request HTTP content from a service if your site is an HTTPS site. Invalid requests will cause an error that you can see using your . To fix the request, you can either use the HTTPS protocol to fetch the requested resources from you HTTPS site or you can to fetch an HTTP resource. Note: browser's developer tools turn off SSL on your site Advanced: Modules available for calling services In the following examples we use the module to call a service, but the Node.js , , and modules are also available. wix-fetch http https net Client-Side Service Call For example, suppose you want to call a 3rd-party service to look up a currency exchange rate. For this example, we've created a simple form with the following elements: When you have the form set up, you can set the button's properties so that its handler will call the following function: onClick { url = ; symbol = $w( ).value; fullUrl = url + + symbol; 
 
  fetch(fullUrl, { : })
    .then( response.json())
    .then( $w( ).text = json.rates[symbol].toString());
} export ( ) function buttonFetchRate_click event let "https://api.exchangeratesapi.io/latest?base=USD" let "#textInputSymbol" let "&symbols=" method 'get' => response => json "#textRate" In this example, you start by constructing the full URL for the fetch request. The URL is made up of the service's address and some query parameters. For simplicity, we'll always convert U.S. dollars, so the base parameter's value is hardcoded to USD. The value for the symbols parameter is pulled from the form. Then the function makes the actual request. When it receives a response, it pulls out the conversion rate for the symbol we passed and sets it as the label's text. Certain (Cross-Origin Resource Sharing) requests are restricted when originating from a browser. Usually, GET requests and certain POST requests can be made from your site's , , or code. All other requests need to be made from your site's code. Invalid requests will cause an error that you can see using your . If you are experiencing an issue with a call due to a CORS restriction, move the call to the backend as described below. Note: CORS Public Page Site Backend browser's developer tools fetch Backend Service Call Making a service call from the backend is done in 3 parts: Store the API key in the . Secrets Manager Write code that will extract the API key using the and make the service call in a . This avoids the security concerns, such as exposing API keys, that would arise if you tried to call the service from your client-side code. Secrets API backend web module Write client-side code to trigger the backend service call, returning data if necessary. For example, suppose you want to call a 3rd-party weather service to find the current weather in a city the user has chosen. First, you create a function in a backend web module to call the weather service and retrieve the data: {fetch} ; (getSecret} ; { url = ; key = getSecret(WeatherApiKey); fullUrl = url + city + + key + ; fetch(fullUrl, { : })
    .then( response.json())
    .then( json.main.temp);
} //serviceModule.jsw import from 'wix-fetch' import from 'wix-secrets-backend' export async ( ) function getCurrentTemp city const 'https://api.openweathermap.org/data/2.5/weather?q=' const await let '&APPID=' '&units=imperial' return method 'get' => response => json In this example, you start by importing the functions needed to to make https requests and to get secrets from the Secrets Manager. Then you create a new function that takes in a city whose weather you want to look up. The function begins by constructing the full URL for the fetch request. The URL is made up of the service's address and an API key. To make this example work, you'd have to store your API in the Secrets Manager with the name "WeatherApiKey". Then the function makes the actual request. When it receives a response, it pulls out the temperature data. That temperature data will be received by the client-side call. On the client side, you need to decide where to call the backend function and what to do with the data it returns. For this example, we've created a simple form that has the following elements: When you have the form set up, you can set the button's properties so that its handler calls the function you wrote in the backend module. onClick {getCurrentTemp} ; {
 getCurrentTemp($w( ).value)
  .then( $w( ).text = temp + );
} //Form's page code import from 'backend/serviceModule' //... export ( ) function buttonFetchTemp_click event "#textInputCity" => temp "#textTemp" "°" You start here by importing the function that you wrote in the backend. Then, in the button's event handler, call the function. The Input element's value gets passed as the argument. When the function has finished running, set the text label to display the temperature that was returned. getCurrentTemp city Previously published at https://support.wix.com/en/article/velo-accessing-3rd-party-services-with-the-fetch-api

Fetch

How To Work with External Database

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

The API fetch Module as the Way to Accessing 3rd-Party Services

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps