Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Payment Gateway Web3 Block for Svelte

A token checkout: a sample order, three tokens each quoted at a typed rate with its network fee, a pay-to address with QR code and a quote that can be refreshed, and a confirmation tracker that moves one block at a time.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Take a payment in tokens and show when it is final, with this checkout panel for Svelte with Ark UI. It's the gateway of Paygarden, a checkout for token payments, pricing one 124 USD order in USDC on Base, ETH and DAI at typed sample rates. A Radio Group lists the three tokens, each with the amount due and its network fee. Below it the pay-to address sits in a read-only Input with a copy button, next to a QR code, and a line says when the quote is valid until; Refresh quote swaps in a second set of rates. The order is a short list in the side cell. The foot's Shine Button, I have paid, starts a Steps tracker, from waiting to seen, confirming and confirmed, with a Progress bar of 12 confirmations that Simulate next block advances by one, and a receipt appears when it is done. For shops, invoices and any flow that waits for a chain.

FAQ

How is the amount due worked out?

It is the order total in cents times 1,000,000 divided by the token's sample rate, rounded to a whole number of millionths of a token. Each token has two typed rates, so Refresh quote changes the figures and the valid-until time (14:35 UTC, then 14:50 UTC). The network fee is a typed amount of ETH shown beside each token with its sample dollar value, and it is paid on top.

Why does the tracker only move when I press a button?

Nothing is watched. Pressing I have paid marks the sample payment as sent and shows it as seen; each Simulate next block adds one confirmation, and the twelfth completes the steps and shows the receipt. Once paid, the token choice and the quote are locked. New order starts again. In your app poll your node or a webhook for the transaction and drive the same steps from its confirmations.

What stays local, and how do I wire it?

All of it. The address is a sample that would receive nothing, the rates and fees are typed, and the copy button copies a real string to the clipboard but nothing else is real. In your app create a fresh address or payment intent per order on the server, show its expiry from your quote service and confirm payment from the chain, never from the page.

Is the status announced?

Yes. The foot has one polite status line (Pick a token, Waiting: 3 of 12 blocks, Confirmed in this demo). The steps are a list with a title and a plain sentence each, and the receipt only becomes visible and reachable once the payment is confirmed.

Is it accessible from the keyboard?

Yes. The tokens are a radio group with arrow keys, the buttons are real buttons and the address field is read-only but focusable so it can be selected. Disabled buttons stay in the page, and I have paid becomes inert after it is pressed.

How does it look on a phone?

The columns stack: the tokens first, then the pay-to block with the QR code above the address, then the order, then the steps over the confirmations. The foot is pinned to the bottom of the screen with I have paid and New order side by side.

All 100 web3 blocks