From abd7148f044c7bb84dd33de6a50f06e1c3269ceb Mon Sep 17 00:00:00 2001
From: Brendan Ryan <brendan@brendanjryan.com>
Date: Tue, 7 Apr 2026 11:04:41 -0700
Subject: [PATCH] feat: add interactive payment demo to accounts SDK getting
 started page

---
 src/pages/accounts/index.mdx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/pages/accounts/index.mdx b/src/pages/accounts/index.mdx
index ab782166..d1ec23e1 100644
--- a/src/pages/accounts/index.mdx
+++ b/src/pages/accounts/index.mdx
@@ -5,6 +5,8 @@ description: Set up the Tempo Accounts SDK to create, manage, and interact with
 
 import { Cards, Card } from 'vocs'
 import { AccountsSignIn } from '../../components/guides/AccountsSignIn'
+import * as Demo from '../../components/guides/Demo.tsx'
+import * as Step from '../../components/guides/steps'
 
 # Getting Started
 
@@ -12,10 +14,21 @@ import { AccountsSignIn } from '../../components/guides/AccountsSignIn'
 
 The Tempo Accounts SDK is a TypeScript library for applications and wallets to create, manage, and interact with accounts on Tempo.
 
+### Demo: Sign in
+
 Try it out by logging into Tempo Wallet below:
 
 <AccountsSignIn />
 
+### Demo: Make a payment
+
+Sign in, fund your account, and send a payment on Tempo.
+
+<Demo.Container name="Make a Payment" footerVariant="source" src="tempoxyz/examples/tree/main/examples/payments">
+  <Step.AddFunds stepNumber={1} />
+  <Step.SendPayment stepNumber={2} last />
+</Demo.Container>
+
 ## Quick Prompt
 
 Prompt your agent: