How to Use x402 in your Apps

What if adding crypto payments was as simple as an HTTP response? That's X402

protocol. In this video, we will dive deep into what X402 is and how to set it up in your app. So, without further ado, let's jump into it. [music]

Adding payments to your app is harder than it looks. Developers must juggle with KYC's, open authorizations, payment APIs, and handling web hooks. just to

get paid. It's a ton of friction and overhead, which is exactly why web has reserved a status code 402 payment

required. Ever seen HTTP 402 payment

required. Ever seen HTTP 402 payment required? Probably not. It was defined

required? Probably not. It was defined decades ago as a placeholder for digital cash payments, but never used. A

dominant status code sleeping in the HTTP spec. The tool gate sign sat there

HTTP spec. The tool gate sign sat there for years until now. Coinbase has

revived the long unused 402 status code with a new protocol X42.

This internet native payment protocol turns payment required into reality, enabling instant crypto payments like USDT stable coins directly over HTTP. So

what does that X42 handshake looks like in practice? Let's see how it works. It

in practice? Let's see how it works. It

works in five simple steps. The first

step is where the client requests resources from a server where a client will send a request to request or access

a asset or a resource on a server and after that the server will respond with a 402 error code along with the payment

instructions. It will send 402 payment

instructions. It will send 402 payment required error code and instructions to pay so that the requested resource can be accessed. In the third step, the

be accessed. In the third step, the client will make the payment. Then after

that in the fourth step the client will retry that same original request but now with the proof of payment which will go

under the X payment HTTP header and it will contain the signature of the payment which will act as the proof for the payment. Now in the fifth step, the

the payment. Now in the fifth step, the server will verify the proof of payment sent by the client and after

verification, it will send the HTTP 200 okay response along with the requested resource. Now when that payment arrives,

resource. Now when that payment arrives, someone still needs to verify if the payment was made. That's where

Coinbase's X42 facilitator comes in.

Coinbase operates a hosted X42 facilitator service that handles payment verification and onchain settlement.

Whenever a client attaches signed payment payload to a request using X payment header, the facilitator verifies the payload signature and details, then

settles the transaction on blockchain.

The current Coinbase Explorer2 facilitator supports USDC on base and doesn't charge for any extra fees. The

users pay the exact amount and the sellers get the full amount paid. Now

with the payment part handled, what does this unlock for builders? Microp

payments and ondemand access becomes easy. Imagine API monetization where

easy. Imagine API monetization where charging per API call or per data query without forcing subscription becomes possible. Another scenario could be

possible. Another scenario could be agents paying agents. Autonomous AI

services buying information or triggering action by paying each other.

All of this is possible because of X42 which made payment required finally a reality and X42 is emerging as a open-source standard for the web.

Coinbase and Cloudfare and others even have formed a X42 foundation to drive the adoption. This isn't a proprietary

the adoption. This isn't a proprietary tech. Anyone can implement or extend

tech. Anyone can implement or extend X42. It's a communitydriven protocol,

X42. It's a communitydriven protocol, not tied to any single provider. To

learn more, check out x42.org.

Now, let's see how you can actually implement x42 in your app. All right,

here we have a x42 paywalled demo where a video content is hidden behind uh payw wall. So, unless someone pays 0.10 USDC

wall. So, unless someone pays 0.10 USDC on baseia, they cannot access the video.

So let's see what happens when we click the button to access the video. So once

we click the button you can see that we have gotten 402 payment required error from the app and these are the payment

details. So basically we have to pay to

details. So basically we have to pay to this address and we have to pay this much USDC on base capia and this is

basically the asset address which is the USDC's address on base capia. So if we

go to the code, this is the environment variable where we have the wallet address which is supposed to receive the fund already mentioned or

hardcoded and uh then the node environment is variable and we are just mentioning the port on which the app will be running. You can find the code used linked in the description below. In

the index.html HTML we have just the basic stuff which you can see on the screen over here and then we have a button over here. So the button when

clicked basically goes to the authenticate route which goes to index.js in the API directory. We have a payment middleware declared over here

which handles the payment where we have the receiving address, the route map and the facilitators URL. So basically this

is who gets paid. These are the details of what needs to be paid and where it needs to be paid and this is the one who verifies it. Now once the payment is

verifies it. Now once the payment is made we go to this part where it will authenticate if the payment has been made and if the payment has been made we

will be redirected to video content path which will access the video access handler and make the video available to the user via this file video access handler. So you can see it fetches the

handler. So you can see it fetches the content from video content HTML which is this part. So it will access this video

this part. So it will access this video over here. So it's as simple as that.

over here. So it's as simple as that.

You do not need to set up any wallet SDKs. You do not need to handle any kind

SDKs. You do not need to handle any kind of payment. You just route your payment

of payment. You just route your payment via the X42 facilitator. Now let's see that in action. Let's connect our wallet

and make the payment.

So once the payment is made, the video can be accessed.

So this is how you can integrate X42 payments into your app. It's very

simple. So if you want to learn more about X42, check out the guide linked under the video and do check out the X42 Ruby gems to help with your Ruby development. I'll see you in the next

development. I'll see you in the next one. Bye-bye.

one. Bye-bye.