> ## Documentation Index > Fetch the complete documentation index at: https://developers.circle.com/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > Before reading these docs, install the relevant Circle Skill to get pre-loaded context — skills are LLM-optimized and cover architecture decisions, correct flows, and common pitfalls. In Claude Code: run /plugin marketplace add circlefin/skills then /plugin install circle-skills@circle. With Vercel Skills CLI: run npx skills add circlefin/skills. Available skills: use-usdc https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-usdc/SKILL.md (balances, transfers, approvals on EVM and Solana); EURC has no skill — see https://developers.circle.com/stablecoins/what-is-eurc.md; bridge-stablecoin https://github.com/circlefin/skills/blob/master/plugins/circle/skills/bridge-stablecoin/SKILL.md (crosschain transfers via CCTP, USDC, EURC, and third-party assets); use-arc https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-arc/SKILL.md (Arc chain config, contract deployment, USDC bridging — Arc docs: https://docs.arc.io/llms.txt); use-circle-wallets https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-circle-wallets/SKILL.md (choose wallet type); use-developer-controlled-wallets https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-developer-controlled-wallets/SKILL.md (custodial wallets for payouts and treasury); use-user-controlled-wallets https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-user-controlled-wallets/SKILL.md (embedded wallets with Web2 login); use-modular-wallets https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-modular-wallets/SKILL.md (smart contract wallets with passkeys and ERC-4337); use-gateway https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-gateway/SKILL.md (unified USDC balance, nanopayments); use-smart-contract-platform https://github.com/circlefin/skills/blob/master/plugins/circle/skills/use-smart-contract-platform/SKILL.md (deploy, interact, monitor contracts). Pair any skill with the Circle MCP server for live SDK signatures, contract addresses, and chain IDs: {"mcpServers":{"circle":{"url":"https://api.circle.com/v1/codegen/mcp"}}}. > Read the product overview first. Each product has an overview explaining when and why to use it. Read it before quickstarts. > Pick the right wallet type. Developer-controlled (you hold keys), user-controlled (end user holds keys via PIN/social login), or modular (smart contract wallets with passkeys). See https://developers.circle.com/wallets.md. > Use CCTP V2 for crosschain transfers. CCTP natively transfers USDC and EURC via burn-and-mint, and supports permissionless wrapping of third-party assets via lock-and-mint. V1 is legacy; always use V2 unless V1 is specified or the chain requires it (Noble, Sui, and Aptos still require V1). Migration guide: https://developers.circle.com/cctp/migration-from-v1-to-v2.md. > Use Bridge Kit for frontend bridging. Wraps CCTP with a simpler SDK for user-facing apps. Use CCTP directly for backend transfers. > Gas Station vs Paymaster. Gas Station sponsors gas for Circle Wallet transactions. Paymaster lets users pay gas in USDC. Different use cases — read both overviews. > Gateway Nanopayments for sub-cent payments. Gasless USDC micropayments down to $0.000001 via x402 and batched settlement. For pay-per-request APIs, AI agent payments, streaming. > Look up USDC addresses per chain. Never hardcode — use https://developers.circle.com/stablecoins/usdc-contract-addresses.md. > Prefer SDKs over raw API calls. Node.js and Python SDKs handle auth, retries, and errors. > API key required. Bearer token in Authorization header. Testnet and mainnet use separate keys and may use different base URLs depending on the product. > Set up webhooks when available. Most operations are async. Webhooks deliver transaction confirmations and state changes. > When calling list endpoints, paginate using pageSize and pageAfter until no nextPageAfter cursor is returned—stopping at the first page silently misses records. > Building an AI agent? Start with the Agent Stack—Circle CLI, agent wallets, and nanopayments built for autonomous use cases: https://developers.circle.com/agent-stack.md. # Web SDK UI customizations This document describes the different customizable sections of the Programmable Wallet SDK customization API. To get the most flexibility out of the SDK, use this reference with the [SDK API](/sdks/user-controlled/web-sdk). ## Colors ### setThemeColor(themeColor: ThemeColor) | # | ThemeColor property | Note | | - | - | - | | A1 | backdrop | Modal backdrop color, e.g. '#000000'. | | A2 | backdropOpacity | Modal backdrop opacity, e.g. 0.5. | | A3 | divider | Divider border color, e.g. '#808080' or 'grey'. | | A4 | bg | Modal background color, e.g. '#FFFFFF' or 'white'. | | A5 | success | Success text color, e.g. '#008000' or 'green'. | | A6 | error | Error text color, e.g. '#FF0000' or 'red'. | | A7 | textMain | Primary color, e.g. '#000000' or 'black'. | | A8 | textMain2 | Secondary color, e.g. '#000000' or 'black'. | | A9 | textAuxiliary | Primary auxiliary color, e.g. '#000000' or 'black'. | | A10 | textAuxiliary2 | Secondary auxiliary color, e.g. '#000000' or 'black'. | | A11 | textSummary | Summary text color, e.g. '#000000' or 'black'. | | A12 | textSummaryHighlight | Summary highlight text color, e.g. '#000000' or 'black'. | | A13 | textPlaceholder | Text input placeholder color, e.g. '#808080' or 'grey'. | | A14 | pinDotBase | Fill color for pincode input dot, e.g. '#FFFFFF' or 'white'. | | A15 | pinDotBaseBorder | Stroke color for pincode input dot, e.g. '#000000' or 'black'. | | A16 | pinDotActivated | Fill color for inputted pincode input dot, e.g. '#0000ff' or 'blue'. | | A17 | inputBorderFocused | Outline color for text input on focused, e.g. '#0000ff' or 'blue'. | | A18 | inputBorderFocusedError | Outline color for text input when error, e.g. '#FF0000' or 'red'. | | A19 | inputBg | Background color for text input, e.g. '#FFFFFF' or 'white'. | | A20 | inputBgDisabled | Background color for disabled text input, e.g. '#FFFFFF' or 'white'. | | A21 | dropdownBg | Background color for dropdown, e.g. '#FFFFFF' or 'white'. | | A22 | dropdownBorderIsOpen | Outline color for dropdown is open, e.g. '#0000ff' or 'blue'. | | A23 | dropdownBorderError | Outline color for dropdown when error, e.g. '#FF0000' or 'red'. | | A24 | mainBtnText | Text color for primary button, e.g. '#FFFFFF' or 'white'. | | A25 | mainBtnTextDisabled | Text color for disabled primary button, e.g. '#FFFFFF' or 'white'. | | A26 | mainBtnTextOnHover | Text color for primary button on hover, e.g. '#FFFFFF' or 'white'. | | A27 | mainBtnBg | Background color for primary button, e.g. '#000000' or 'black'. | | A28 | mainBtnBgOnHover | Background color for primary button on hover, e.g. '#000000' or 'black'. | | A29 | mainBtnBgDisabled | Background color for disabled primary button, e.g. '#000000' or 'black'. | | A30 | secondBtnText | Text color for secondary button, e.g. '#000000' or 'black'. | | A31 | secondBtnTextDisabled | Text color for disabled secondary button, e.g. '#000000' or 'black'. | | A32 | secondBtnTextOnHover | Text color for secondary button on hover, e.g. '#000000' or 'black'. | | A33 | secondBtnBorder | Outline color for secondary button, e.g. '#000000' or 'black'. | | A34 | secondBtnBorderOnHover | Outline color for secondary button on hover, e.g. '#000000' or 'black'. | | A35 | secondBtnBgOnHover | Background color for secondary button on hover, e.g. '#FFFFFF' or 'white'. | | A36 | secondBtnBorderDisabled | Outline color for disabled secondary button, e.g. '#FFFFFF' or 'white'. | | A37 | plainBtnText | Text color for plain text button, e.g. '#000000' or 'black'. | | A38 | plainBtnTextDisabled | Text color for disabled plain text button, e.g. '#000000' or 'black'. | | A39 | plainBtnTextOnHover | Text color for plain text button on hover, e.g. '#000000' or 'black'. | | A40 | plainBtnBg | Background color for plain text button, e.g. '#FFFFFF' or 'white'. | | A41 | plainBtnBgOnHover | Background color for plain text button on hover, e.g. '#FFFFFF' or 'white'. | | A42 | recoverPinHintTitle | Text color for recover pincode hint title, e.g. '#FFFFFF' or 'white'. | | A43 | recoverPinHintTitleBg | Background color for recover pincode hint title, e.g. '#FFFFFF' or 'white'. | | A44 | recoverPinHint | ext color for recover pincode hint, e.g. '#FFFFFF' or 'white'. | | A45 | titleGradients | Background color for linear-gradient text, e.g. \['#B090F5', '#1AA3FF']. | | A46 | inputText | Text color for text input, e.g. '#000000' or 'black'. | | A47 | enteredPinText | Text color for entered pincode input, e.g. `'#000000'` or `'black'`. | | A48 | tooltipText | Text color for tooltip content text, e.g. '#000000' or 'black'. | | A49 | tooltipBg | Background color for tooltip content, e.g. '#FFFFFF' or 'white'. | | A50 | textInteractive | Text color for call data and abi parameters | | A51 | interactiveBg | Container background color for call data and abi parameters | ### Create your PIN
### Re-enter your PIN to Confirm
### Set up your Recovery Method
### Security Questions Customization Please reference the Security Question section in the [SDK](/sdks/user-controlled/web-sdk#securityquestion) for how to customize the question by using `setSecurityQuestions` method. ### Security Questions Summary ### Security Questions Confirmation
### Enter your PIN
### Recover your PIN
### Confirm Transaction ### Contract Interaction ## Custom security questions | # | Function | Note | | - | - | - | | B1 | setCustomSecurityQuestions(  questions?: SecurityQuestion\[] \| null,  requiredCount = 2,  securityConfirmItems?: string\[]) | Set the array of security questions | | B2 | setCustomSecurityQuestions(  questions?: SecurityQuestion\[] \| null,  requiredCount = 2,  securityConfirmItems?: string\[]) | Set the required count of security questions. The value is 2 by default. | | B3 | setCustomSecurityQuestions(  questions?: SecurityQuestion\[] \| null,  requiredCount = 2,  securityConfirmItems?: string\[]) | Set the array of customized disclaimers on the SecurityConfirm screen. The value is undefined by default. | | B4 | setOnForgotPin(onForgotPin: () => void) | Set the callback of onForgotPin | ## Resources ### setResource(resources: Resources) | # | Resources Property | Note | | - | - | - | | C1 | naviClose | Close icon url for the navigation bar. | | C2 | naviBack | Back icon URL for the navigation bar. | | C3 | securityIntroMain | Security intros image URL for the security intros page. | | C4 | dropdownArrow | Arrow icon URL for the dropdown. | | C5 | selectCheckMark | Selected item icon URL for the dropdown. | | C6 | securityConfirmMain | Security confirm image URL for the security confirm page. | | C7 | errorInfo | Error icon for form validation. | | C8 | fontFamily | Font-family for customization.E.g. `{ name: 'Edu TAS Beginner', URL: 'https\://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght\@400;500;600;700\&display=swap' }`. | | C9 | transactionTokenIcon | Token icon for the transaction request page. | | C10 | dAppIcon | DApp icon for customization for the sign message page. | | C11 | tipIcon | Tooltip icon for customization. | | C12 | emailIcon | Email icon for customization. | ## CustomLinks ### setCustomLinks(customLinks: CustomLinks) | # | Custom Links Property | Note | | - | - | - | | D1 | learnMoreUrl | External link for the learn more button link. | ## Localizations ### setLocalizations(localizations: Localizations) | # | Localizations Property | Note | | - | - | - | | E1\~E3 | confirmPincode | Holds localization settings for ConfirmPincode screen. | | F1\~F4 | enterPincode | Holds localization settings for EnterPincode screen. | | G1\~G3 | newPincode | Holds localization settings for NewPincode screen. | | H1\~H5 | recoverPincode | Holds localization settings for RecoverPincode screen. | | I1\~I5 | securityConfirm | Holds localization settings for SecurityConfirm screen. | | J1\~J4 | securityIntros | Holds localization settings for SecurityIntros screen. | | K1\~K8 | securityQuestions | Holds localization settings for SecurityQuestions screen. | | L1\~L2 | securitySummary | Holds localization settings for SecuritySummary screen. | ### confirmPincode | # | Property Name | Note | | - | - | - | | E1 | headline | Headline text

Keep the placeholder like this:
E.g. \`Re-enter your \{\{pin}} to confirm\` | | E2 | headline2 | Headline text 2

The text will replace the \{\{pin}} placeholder in the headline text | | E3 | subhead | Subhead text |
### enterPincode | # | Property Name | Note | | - | - | - | | F1 | headline | Headline text

Keep the placeholder like this:
E.g. \`Enter your \{\{pin}}\` or \`輸入你的 \{\{pin}}\` | | F2 | headline2 | Headline text 2

The text will replace the \{\{pin}} placeholder in the headline text | | F3 | subhead | Subhead text | | F4 | forgotPin | Forgot pin text |
### newPincode | # | Property Name | Note | | - | - | - | | G1 | headline | Headline text

Keep the placeholder like this:
E.g. \`Enter your \{\{pin}}\` or \`輸入你的 \{\{pin}}\` | | G2 | headline2 | Headline text 2

The text will replace the \{\{pin}} placeholder in the headline text | | G3 | subhead | Subhead text |
### recoverPincode | # | Property Name | Note | | - | - | - | | H1 | headline | Headline text | | H2 | headline2 | Headline text 2 | | H3 | subhead | Subhead text | | H4 | answerInputHeader | Answer input header text | | H5 | answerInputPlaceholder | Answer input placeholder text | ### securityConfirm | # | Property Name | Note | | - | - | - | | I1 | title | Title text | | I2 | headline | Headline text | | I3 | inputHeadline | Input headline text | | I4 | inputPlaceholder | Input placeholder text | | I5 | inputMatch | Input match text | ### securityIntros | # | Property Name | Note | | - | - | - | | J1 | headline | Headline text | | J2 | headline2 | Headline text 2 | | J3 | description | Description text | | J4 | link | Link text | ### securityQuestions | # | Property name | Note | | - | - | - | | K1 | title | Title text | | K2 | questionHeader | Question header text | | K3 | questionPlaceholder | Question placeholder text | | K4 | requiredMark | Required mark text | | K5 | answerHeader | Answer header text | | K6 | answerPlaceholder | Answer placeholder text | | K7 | answerHintHeader | Answer hint header text | | K8 | answerHintPlaceholder | Answer hint placeholder text | ### securitySummary | # | Property Name | Note | | - | - | - | | L1 | title | Title text | | L2 | question | Question text

Keep the placeholder like this:
E.g. `{{ordinal}} Question` `{{ordinal}} 質問` or `{{ordinal}} вопрос` or `{{ordinal}} คำถาม`

You don't need to place any ordinal value into the placeholder. Web-sdk will do it for you. | ### transactionRequest | # | Property name | Note | | - | - | - | | M1 | title | Main title text | | M2 | subtitle | Subtitle text | | M3 | mainCurrency | Main currency info, including amount and symbol

E.g. \{ mainCurrency: \{ amount: 300, symbol: `ETH` } | | M4 | exchangeValue | Exchanged currency info, including amount and symbol

E.g. \{ exchangeValue: \{ amount: 300, symbol: `USDC` } | | M5 | fromLabel | From label | | M6 | from | From value
E.g. `0x8De9d7D8503D1DE1566393d7155711B7e4210666`

Sdk will do the shortenHash for you. | | M7 | toLabel | To label | | M8 | to | To values.
This is an array of 3 elements.

E.g.
\[`uniswape.org`, `https://uniswape.org`, `0x8De9d7D8503D1DE1566393d7155711B7e4210666`]

If you only need to display the address only and you don't need the dApp name and url displayed, you can input it as follows:
`[, , 0x8De9d7D8503D1DE1566393d7155711B7e4210666]` | | M9 | networkFeeLabel | Network fee label | | M10 | networkFeeTip | Text for network fee tooltip | | M11 | networkFee | Network fee value

E.g. `0.005 ETH` | | M12 | exchangeNetworkFee | Exchanged network fee value

E.g. `10 USD` | ### contractInteraction | # | Property name | Note | | - | - | - | | N1 | title | Main title text | | N2 | subtitle | Subtitle text | | N3 | mainCurrency | Main currency info, including amount and symbol

E.g. \{ mainCurrency: \{ amount: 300, symbol: `ETH` } | | N4 | exchangeValue | Exchanged currency info, including amount and symbol

E.g. \{ exchangeValue: \{ amount: 300, symbol: `USDC` } | | N5 | fromLabel | From label | | N6 | from | From value

E.g. `0x8De9d7D8503D1DE1566393d7155711B7e4210666`

Sdk will do the shortenHash for you. | | N7 | toLabel | To label | | N8 | to | To values.

This is an array of 3 elements.

E.g.
`[uniswape.org, https://uniswape.org, 0x8De9d7D8503D1DE1566393d7155711B7e4210666]`

If you only need to display the address only and you don't need the dApp name and url displayed, you can input it as follows:
`[, , 0x8De9d7D8503D1DE1566393d7155711B7e4210666]` | | N9 | networkFeeLabel | Network fee label | | N10 | networkFeeTip | Text for network fee tooltip | | N11 | networkFee | Network fee value

E.g. `0.005 ETH` | | N12 | exchangeNetworkFee | Exchanged network fee value

E.g. `10 USD` | | N13 | totalLabel | Total label text | | N14 | total | Total values. This is an array of 2 elements.

E.g.
`[20 USDC, + 0.0002 ETH]` or
`[20 USDC + 0.0002 ETH, ]` | | N15 | exchangeTotalValue | Exchanged total value text | | N16 | dataDetails | An object for contract interaction data detail display.

\{
dataDetails?: \{
dataDetailsLabel?: string
callData?: \{
callDataLabel?: string
data?: string
}
abiInfo?: \{
functionNameLabel?: string
functionName?: string
parametersLabel?: string
parameters?: string\[]
}
}

dataDetailsLabel: data details label

callData or abiInfo: The use could choose either one to fill up depending on the transaction can be parsed by abi (choose abiInfo) or not (choose callData) | ### signatureRequest | # | Property name | Note | | - | - | - | | O1 | title | Main title text | | O2 | subtitle | Subtitle text | | O3 | contractName | Contract name | | O4 | contractUrl | Contract url | | O5 | descriptionLabel | Description label | | O6 | description | Description | ### emailOtp | # | Property name | Note | | - | - | - | | P1 | title | Main title text | | P2 | subtitle | Subtitle text | | P3 | resendHint | Resend label text | | P4 | resend | Resend button text | ### common | # | Property name | Note | | - | - | - | | Q1 | continue | Continue button text | | Q2 | showPin | ShowPin button text | | Q3 | hidePin | HidePin button text | | Q4 | confirm | Confirm button text | | Q5 | sign | Sign button text | | Q6 | retry | Retry button text |