<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Base Account Quick-start</title>
</head>
<body>
<h1>Base Account Demo</h1>
<button id="signin">Sign in with Base</button>
<button id="pay">Pay with Base</button>
<div id="status"></div>
<!-- Load Base Account SDK via CDN -->
<script src="https://unpkg.com/@base-org/account/dist/base-account.min.js"></script>
<script>
// Initialize Base Account SDK with app configuration
const provider = window
.createBaseAccountSDK({
appName: "Base Account Quick-start",
appLogoUrl: "https://base.org/logo.png",
})
.getProvider();
const statusDiv = document.getElementById("status");
let userAddress = null;
function showStatus(message, type = "success") {
statusDiv.innerHTML = message;
}
// Generate a fresh nonce for authentication
function generateNonce() {
return window.crypto.randomUUID().replace(/-/g, "");
}
// Sign in with Base using wallet_connect method
document.getElementById("signin").onclick = async () => {
try {
showStatus("Connecting to Base Account...", "success");
// Generate a fresh nonce
const nonce = generateNonce();
// Connect and authenticate using the new wallet_connect method
const { accounts } = await provider.request({
method: "wallet_connect",
params: [
{
version: "1",
capabilities: {
signInWithEthereum: {
nonce,
chainId: "0x2105", // Base Mainnet - 8453
},
},
},
],
});
const { address } = accounts[0];
const { message, signature } =
accounts[0].capabilities.signInWithEthereum;
userAddress = address;
showStatus(
`✅ Successfully signed in! Address: ${address.slice(
0,
6
)}...${address.slice(-4)}`
);
// In a real app, you would send the message and signature to your backend for verification
console.log("Authentication data:", { address, message, signature });
} catch (error) {
console.error("Sign-in error:", error);
showStatus(`❌ Sign-in failed: ${error.message}`, "error");
}
};
// One-tap USDC payment using window.base API (works with or without sign-in)
document.getElementById("pay").onclick = async () => {
try {
showStatus("Processing payment...", "success");
const result = await window.base.pay({
amount: "5.00", // USD – SDK quotes equivalent USDC
to: "0x2211d1D0020DAEA8039E46Cf1367962070d77DA9",
testnet: true, // set to false or omit for Mainnet
});
const status = await window.base.getPaymentStatus({
id: result.id,
testnet: true,
});
showStatus(`🎉 Payment completed! Status: ${status.status}`);
} catch (error) {
showStatus(`❌ Payment failed: ${error.message}`, "error");
}
};
</script>
</body>
</html>
