Demo Application

Let's learn how to integrate Wise Payouts APIs in a simple React application coupled with the Express backend.

We'll cover the following

This lesson walks us through a simple web application that shows the functionality of Wise Payouts APIs. We used the React library for the client-side implementation and Express.js to make API calls to the Wise server. We'll use the endpoints related to the following operations in the application:

  1. Getting the balance of our account

  2. Listing all recipients

  3. Adding a new recipient

  4. Sending money

  5. Listing current exchange rates for the GBP

Tip: Since it's a demo application, some values and fields may be hardcoded.

Application workflow

Click the “Run” button in the widget below to run the application. Once the application has started, click the URL against “Your app can be found at:” to view the application.

The "Home" page shows the balance in four different currencies and the menu buttons "Recipients," "Add Recipient," "Send Money," and "Exchange Rates." Clicking them will take us to the relevant component.

Note: We use a custom hook, useFetch, defined in useFetch.js, to fetch the data from any API endpoint. Besides, we have some utility functions to make POST requests.

Get hands-on with 1200+ tech skills courses.