Skip to main content
We will be creating a simple node server integrating the Request Network API to create payments and track their status. We are going to use fastify as our server and use drizzle with SQLite to store our payment data. Additionally, we’ll be creating a simple React web application to interact with the API and execute payments. View the entire codebase on Code Sandbox.

Backend

In this section we’ll create your API that integrates Request Network’s API to create and track payments. After we are done with it, we’ll jump over and create a web app connecting to your API and put everything together!

Setup

As mentioned, we are using fastify and drizzle for this demo, you can of course choose whatever suits you best. Create a new project. In it create a folder called rn-test-backend inside and copy over this package.json file to rn-test-backend.
The folder structure for the demo is going to be simple:
Folder structure
Then run npm install and when that’s done, run npm run db:push.

Get your API credentials

Sign in to the Request Dashboard with your wallet and create a Client ID. The Client ID is your API credential — copy it into your .env file.

Create your first payment

Let’s create two new endpoints, one for creating a payment on our API and the other to fetch all of the payments users have made on our API.
Note: the amount our API receives is human readable, so just send over the amount in invoiceCurrency you wish, no BigNumbers needed!

Let’s try it out!

Call our /payments endpoint with the right data to create a payout and let’s see what we get back.
The response should look something like the following object (full API reference):
Now you can check your database with npm run db:studio and assert that the payment is there.
Database Studio

Setting up webhooks

In order for your app to make use of our payment tracking easily and in real-time, we provide webhook support. You just provide the endpoint and the Request Network API does the rest. Let’s create a new route for handling webhook calls.
We’ll go into more detail on how to get the RN_WEBHOOK_SECRET in the next subsection.

Testing webhooks locally

As you may know, it’s impossible for our webhooks to call your locally running server. In order to test them, use a tool like ngrok. Install it and run ngrok http 3000 in your terminal. In a few moments, you should see something similar to the screenshot below and copy the URL.
ngrok terminal
Next up, register the webhook via the Auth API. The URL is the ngrok URL from above with /webhooks appended (e.g. https://34c701d1d7f9.ngrok-free.app/webhooks):
The response includes a one-time secret value — copy it and add to your .env file, then restart the app.
If you want to test it out, fire a test delivery and observe your server’s logs:
Your output should look something like the following:

Testing webhooks live

Once your application is deployed, register a new webhook via POST /v1/webhook using your deployment’s webhook route — same curl as above with the production URL. Then copy the returned secret to your deployment’s environment variables and you can test your handlers just as we did above.

Responding to payment confirmation events

To make use of payment tracking, we need to map different event types to handlers. For demo purposes, let’s create a new handler that will update the status of a payment in your API to confirmed when it’s been confirmed by Request Network.
This is it for the API, now to properly test this, we’re going to build a simple frontend app that will interact with the newly created API!

Frontend

We cannot test out the entire flow without a user actually paying a request. For testing purposes, I will use a Metamask wallet. In order for you to properly test this, I advise using a wallet and giving yourself some test Sepolia ETH from a faucet like Google. If you really want to check out what happens to your funds, create two accounts in your wallet. We’ll be using Request Network to move funds from one to another.

Setup

We’ll be using Vite to create a simple React app. Move to the root directory in the created project and run npm create vite@latest rn-test-frontend -- --template react-ts in the terminal. Then move to the created directory rn-test-frontend, run npm install. NOTE: We are not going to be using any advanced patterns or libraries here, we’ll try to keep it as simple as possible and let you build in your own way.
Vite setup
Next up, let’s scaffold our app. Create a folder called components, and then create two files CreatePayment.tsx and ViewPayments.tsx.
Next up, let’s modify our App.tsx file to display two tabs.
The final result should look something like this:
Initial UI

Connecting the user’s wallet

We’ll be using wagmi to enable wallet connection. To do that we need to do a few things:
  1. Install wagmi and its dependencies npm install wagmi viem @tanstack/react-query --save
  2. Create a wagmi config at src/config/wagmi.ts
  1. Update main.tsx to include the new providers
  1. Create a new component at src/components/wallet-connect/index.tsx
  1. Render this component from our App component
The final result should look something like this with the wallet connection working.
Wallet connected
Wallet disconnected

Viewing payments

Since we have created a few payments via cURL before, we can implement viewing of payments first. Let’s create a .env file and add the following to it:
Next up, let’s modify the ViewPayments component.
It should look something like this:
View payments

Creating payments

Let’s update our CreatePayment component. It’s going to do the following:
  1. The user inputs payment information - the payee address, amount, invoice currency and payment currency
  2. After submitting the form, we create a payment on the API, receive the response and use the transactions property to execute the payment with our connected wallet.
  3. Immediately after that succeeds, we update the payment status on the backend to in-progress
The end result is a form that looks like the following:
Create payment form

Trying everything out

We recommend using two different Metamask accounts you own. That way you will be able to confirm that the funds were moved on your very own. NOTE: For this demo, we recommend inputting your second account for the Payee address value and use the same invoice and payment currencies.
  1. Let’s create a payment from the client, moving 0.02 Sepolia ETH to our second account
Create payment step 1
  1. Create the payment and sign the transaction
Sign transaction 1
Sign transaction 2
  1. Navigate to the View payments tab , verify that the last payment is In progress and let’s wait for the transaction to go through. You can patiently watch your server’s logs to check when the webhook is called.
Payment in progress
  1. In a few moments the payment’s status should be set to Confirmed .
Payment confirmed
This is it, you have successfully built a basic application integrating our API to move actual test funds between two wallets. Happy building 🎉