AlgoPayAlgoPay Docs
HomeAppGitHub

Checkout with AlgoPay

Accept USDC payments on Algorand with a drop-in checkout experience.

How it works

1

Create a session

A checkout session is created with an amount, description, and optional webhook URL.

2

Show the checkout

Embed the checkout UI using the React SDK — inline, as a popup, or via redirect.

3

Buyer pays

The buyer chooses a payment method and completes the transaction.

4

You get notified

AlgoPay confirms the payment on-chain and fires a webhook to your server.

Install

npm install @algodev-studio/checkout-react

Embed Checkout

import { AlgoPayCheckout } from "@algodev-studio/checkout-react";

function CheckoutPage({ sessionId }) {
  return (
    <AlgoPayCheckout
      sessionId={sessionId}
      mode="embedded"
      onSuccess={(data) => {
        console.log("Paid!", data.txHash);
      }}
      onCancel={() => {
        console.log("Buyer cancelled");
      }}
    />
  );
}

Payment Methods

AlgoPay Wallet

One-click payment for users with an AlgoPay account. No wallet popups, no gas fees.

External Wallet

Pera, Defly, or any WalletConnect-compatible Algorand wallet.

AI Agent

Agents with AlgoPay can create and pay checkout sessions programmatically.

Session Lifecycle

StatusMeaning
PENDINGSession is active and awaiting payment
PAIDPayment confirmed on-chain
EXPIREDNo payment received before expiration
CANCELLEDThe seller cancelled the session

Webhooks

When a session is paid or expires, AlgoPay sends a POST request to your webhook URL.

{
  "event": "checkout.session.paid",
  "data": {
    "sessionId": "SESSION_ID",
    "amount": "25.00",
    "currency": "USDC",
    "paymentTxHash": "...",
    "payerAddress": "ALGO...",
    "paidAt": "2026-03-01T12:00:00.000Z"
  }
}