Upgrading Web 3.0 UX with Router Pay: A Guide for Developers

Web 3.0 transactions today are riddled with unnecessary friction like wallet connections and approvals. Router Pay changes this by bringing Web 2.0-like simplicity to Web 3.0 transactions. With QR-code-based payments, users can now complete transactions across multiple chains without manually connecting wallets or approving transactions. This article explores Router Pay’s developer tooling — how it works, how you can integrate it into your dApp, and how it’s already being used in production.

Legacy Flow vs Router Pay Flow

Traditionally, to interact with a DApp, users need to first connect their wallet, then sign an approval transaction, and only then can they perform their actual action. This flow not only introduces unnecessary friction for the user, it also exposes them to approval-related vulnerabilities and phishing risks.

With Router Pay, the process is much simpler. The user only needs to declare their intent on a DApp (swap, stake, lend, borrow, etc.), following which, the DApp can generate a single-use address for the user using the Router Pay API/SDK. The user then only needs to send the required funds to this single-use address. This address will be monitored by Router relayers; as soon as the funds arrive on the address, they will trigger the action/intent mapped against this address.

Router Pay Tooling

Router Pay API

The Router Pay API features a “quote” endpoint that allows DApps to generate single-use addresses based on the user-requested actions. The quote endpoint takes the following as parameters:

• The call data for user’s intent, i.e., the blockchain-executable data for the desired user action such as token swaps, staking, or other DeFi activities.
• The source chain and source address.
• The destination chain and destination address where the funds will be received.

Based on these parameters, the quote endpoint generates an Instruction Specific Address (ISA) and sends it as a response along with the amount to be transferred to the address. After the quote is generated, it is stored in the database for future monitoring.

Transaction Execution Process: The relayer continuously monitors ISA addresses to check whether the required amount has been deposited to them. Once the correct amount is deposited, the relayer initiates the transaction mapped against that ISA.

Tracking Transaction Status: You can monitor the progress of the transaction at different stages through the “status” endpoint. The “status” endpoint provides provide real-time transaction status by querying the database:

• “FUND DEPOSITED”: This status is returned when the required funds have been successfully deposited into the address, confirming that the transaction is ready for execution.
• “EXPIRED”: This status indicates that the ISA has expired, meaning the deadline to send funds to the address has passed.
• “COMPLETED”: When the transaction is fully completed, i.e. when the user’s specified action is completed, this status will be shared. In case of cross-chain requests, this status will be shown as soon as the source chain action is complete.
• “REFUNDED”: If the transaction exceeds the allowed time window or if no relayer is willing to execute the transaction due to its non-profitable nature, the user has to go on the Router Pay explorer and initiate the refund. Once the refund is complete, the status will update to “REFUNDED”.

Check out the Router Pay API docs here: https://docs.routerprotocol.com/router-pay/integrate-router-pay/

Router Pay SDK

The Router Pay SDK is a JavaScript SDK that simplifies the integration of Router Pay by abstracting the Router API into easy-to-use JavaScript functions. This allows developers to easily write scripts and build UIs without having to deal with API calls. This is currently under development. We will share more details around it once it is production-ready.

DApps Using Router Pay

1. Router Nitro: Nitro was the first DApp featuring the Router Pay integration. Users on Nitro can use Router Pay for frictionless cross-chain transfers from Arbitrum, Polygon, Base, Optimism, BSC, and Avalanche to over 40+ chains including non-EVMs like Solana and Sui.
2. StakeEase Telegram Mini App: StakeEase has integrated Router Pay to enable one-click staking in its BNB vault directly from its Telegram mini app. Check it out here.
3. Token Presale Intent Application: A Router intent application that is currently in the staging phase is using Router Pay to enable users to participate in a token presale taking place on Ethereum from any chain.

Ready to Integrate?

If you’re ready to start adopting the new standard for Web 3.0 payments, head over to our documentation and get started with Router Pay today.