Component

Solana Pay Checkout

Renders a Solana Pay transfer-request checkout with a wallet deep link, scannable QR code, reconciliation reference support, and externally verified payment states.

Preview

Connect a devnet wallet to test checkout

The preview creates a real 0.001 SOL self-transfer, so only the devnet network fee is spent.

Installation

terminal

$npx shadcn@latest add https://uxdotsol.xyz/r/solana-pay-checkout.json

Usage

solana-pay-checkout.tsx

import { SolanaProvider } from "@/components/uxdotsol/components/solana-provider";
import { SolanaPayCheckout } from "@/components/uxdotsol/components/solana-pay-checkout";
 
export default function Checkout({ order }) {
  return (
    <SolanaProvider>
      <SolanaPayCheckout
        recipient={order.merchantAddress}
        amount={order.total}
        reference={order.paymentReference}
        merchantName="Acme Store"
        message={"Order " + order.id}
        memo={"ORDER:" + order.id}
        orderId={order.id}
        status={order.paymentStatus}
      />
    </SolanaProvider>
  );
}

Props / Arguments

Name	Type	Default	Description
recipient	string	required	Merchant wallet address. For SPL payments, pass the wallet owner address rather than an associated token account.
amount	number	required	Positive payment amount in SOL or the selected token's display units.
splToken	string	undefined	Optional SPL token mint address. Omit it for native SOL payments.
reference	string \| string[]	undefined	Unique reference address used to discover and reconcile this payment. A unique value per order is strongly recommended.
merchantName	string	'Solana Pay'	Merchant label encoded into the payment request and displayed in the card.
description	string	'Secure wallet checkout'	Short supporting text displayed below the merchant name.
message	string	undefined	Human-readable payment context encoded for the wallet to display.
memo	string	undefined	Public onchain memo. Never include private or sensitive information.
orderId	string	undefined	Optional order identifier shown in the checkout summary.
tokenSymbol	string	'SOL' or 'Token'	Display symbol for the requested asset.
network	'mainnet' \| 'devnet' \| 'testnet'	'mainnet'	Network label displayed for payment context. Solana Pay transfer URLs do not encode the cluster.
status	'ready' \| 'processing' \| 'confirmed' \| 'expired'	'ready'	Externally controlled payment state. Set confirmed only after merchant-side onchain validation.
walletLaunchUrl	string	generated Solana Pay URL	Optional wallet-specific universal or deep link used by the launch button. By default the button explicitly navigates to the generated solana: payment URI.
className	string	''	Optional classes applied to the outer checkout card.
onOpenWallet	(paymentUrl: string) => void	undefined	Called when the customer opens the Solana Pay wallet deep link.
onCopy	(paymentUrl: string) => void	undefined	Called after the payment URL is copied successfully.
onTransactionSubmitted	(signature: string) => void	undefined	Called after a connected browser wallet signs and submits the transfer. The payment must still be verified by the merchant.
onPaymentError	(error: Error) => void	undefined	Called when browser-wallet transaction construction or submission fails.