docs(wcp): custom theming for data collection form + structure cleanup by ignaciosantise · Pull Request #74 · WalletConnect/docs

ignaciosantise · 2026-06-23T17:27:52Z

What

Adds custom theming for the WalletConnect Pay data collection form, plus a consistency/clarity pass across the wallet integration docs.

Feature: themeable data collection form

Wallets can now style the embedded (WebView/iframe) data collection form via two optional URL query params:

theme=light|dark — base color mode
themeVariables=<base64url> — design-token overrides (font, font size, some colors, button/input border radius), generated and exported from the WalletConnect Pay Dashboard and appended verbatim

Documented via a shared "Form URL parameters" reference table + a "Customizing the form appearance" section in the overview snippet, theme params in every per-tech code example, and a theme FAQ on the wallet overview.

Clarity cleanup (done alongside)

Standardized prefill encoding to base64url across all SDKs
Deduped the web iframe copy into the shared overview snippet; rendered the previously-unused best-practices snippet
Renamed buildPrefillUrl → buildFormUrl (now takes theme params)
Made data collection consistently per-option: added collectData to the PaymentOption type and switched examples/prose to selectedOption.collectData on the 4 pages that used the deprecated top-level field
Updated the WalletKit AI-prompt files to match

Structure & navigation

Unified section names and ordering across all 10 SDK pages (consistent API Reference → Data Models → Error Handling → Best Practices tail)
Nav: ordered React Native above Flutter in the WalletKit group
Synced Flutter's Payment Flow steps with the rest (added "Sign Actions", renamed "Get Required Actions"); removed Flutter's duplicate "Examples" section
Merged Swift's deep-link + QR handling into "Payment Link Detection"
WalletKit Swift "Configuration" → "Initialization"
Folded the WCP ID prerequisite under "Requirements" (dropped "Pre-Requisites")
Trimmed the in-page TOC: demoted per-item Data Models / Error Handling / API Reference sub-headings and redundant install/config sub-headings to bold

Verification

mint validate (strict) and mint broken-links both pass.

Notes

A UX-copy review against the WalletConnect UX Writing Guidelines was run; the only transferable findings (em dashes, Title-Case headings) are site-wide docs conventions, intentionally not addressed here to avoid inconsistency with the surrounding docs.

🤖 Generated with Claude Code

Add themeVariables/theme query params for the embedded data collection form (generated from the Pay Dashboard), documented via a shared "Form URL parameters" reference table and "Customizing the form appearance" section in the overview snippet. Cleanup done alongside: - Standardize prefill encoding to base64url across all SDKs - Dedupe the web iframe copy into the shared overview snippet; render the previously-imported-but-unused best-practices snippet - Rename buildPrefillUrl -> buildFormUrl (now takes theme params) - Make data collection consistently per-option: add collectData to the PaymentOption type and switch examples/prose to selectedOption.collectData across the 4 pages that used the deprecated top-level field - Add a theming FAQ to the wallet overview - Update the WalletKit ai-prompt files to match Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Cross-platform consistency pass on the wallet integration docs: - Unify section names and ordering across all 10 SDK pages (Data Collection Implementation, Data Models, Payment Link Detection; consistent API Reference -> Error Handling -> Best Practices tail) - Nav: order React Native above Flutter in the WalletKit group - Sync Flutter Payment Flow steps with the rest (add Sign Actions, rename to Get Required Actions); remove Flutter's duplicate Examples - Merge Swift deep-link + QR handling into Payment Link Detection - Rename WalletKit Swift "Configuration" -> "Initialization" - Fold the WCP ID prerequisite under Requirements (drop Pre-Requisites) - Trim the in-page TOC: demote per-item Data Models / Error Handling / API Reference sub-headings and redundant install/config sub-headings to bold so only meaningful sections remain Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mintlify · 2026-06-23T17:28:56Z

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated (UTC)
wc-pay-docs	🟢 Ready	View Preview	Jun 23, 2026, 5:29 PM

💡 Tip: Enable Workflows to automatically generate PRs for you.

Copilot

Pull request overview

Adds themeable URL parameters for the embedded data-collection form (WebView/iframe) across WalletConnect Pay wallet integration docs, while also standardizing structure and per-option collectData guidance across SDK pages.

Changes:

Documented and propagated theme + themeVariables (and standardized prefill as base64url) via shared “Form URL parameters” + “Customizing the form appearance” sections and updated SDK examples.
Refactored docs to consistently use per-option selectedOption.collectData and updated utility naming (buildPrefillUrl → buildFormUrl) in examples/prompts.
Cleaned up navigation/structure: unified section ordering, reduced TOC noise by demoting subheadings, and reordered WalletKit nav entries.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
snippets/webview-message-types.mdx	Formatting cleanup for the bridge names section.
snippets/webview-data-collection-overview.mdx	Central “embedded form” overview, URL parameter reference, and theming guidance.
snippets/webview-data-collection-best-practices.mdx	Shared best-practices snippet updated for “form” wording + theming guidance.
snippets/app-id.mdx	Requirements copy updated and condensed for WCP ID guidance.
payments/wallets/walletkit/web.mdx	Uses shared form overview/best practices; updates examples to per-option `collectData` + theme params + `buildFormUrl`.
payments/wallets/walletkit/swift.mdx	Imports shared snippets; adds link detection examples; updates data-collection examples for base64url + theming.
payments/wallets/walletkit/react-native.mdx	Imports shared snippets; updates per-option `collectData`, base64url prefill, theming params, and `buildFormUrl`.
payments/wallets/walletkit/kotlin.mdx	Imports shared snippets; updates prefill to base64url no-padding + theming params; embeds best practices.
payments/wallets/walletkit/flutter.mdx	Imports shared snippets; aligns flow steps; adds signing step; updates data-collection example + theming params.
payments/wallets/walletkit/ai-prompts/swift.mdx	Updates prompt guidance to per-option `collectData` + theming params and `buildFormUrl`.
payments/wallets/walletkit/ai-prompts/react-native.mdx	Adds `buildFormUrl` guidance including theme params for the prompt.
payments/wallets/walletkit/ai-prompts/kotlin.mdx	Updates prompt to per-option `collectData` and adds theme param guidance + `buildFormUrl`.
payments/wallets/walletkit/ai-prompts/flutter.mdx	Updates prompt to per-option `collectData` and adds theme param guidance + `buildFormUrl`.
payments/wallets/standalone/web.mdx	Uses shared form overview/best practices; updates per-option `collectData`, base64url prefill, theming, and URL builder.
payments/wallets/standalone/swift.mdx	Uses shared form overview/best practices; updates link detection and data-collection URL building + theming params.
payments/wallets/standalone/react-native.mdx	Uses shared form overview/best practices; updates per-option `collectData`, base64url prefill, theming, and URL builder.
payments/wallets/standalone/kotlin.mdx	Uses shared form overview/best practices; updates base64url no-padding + theme params; updates URL builder.
payments/wallets/standalone/flutter.mdx	Uses shared form overview/best practices; aligns flow steps; updates data-collection + adds `buildFormUrl`.
payments/wallets/overview.mdx	Adds theming FAQ and updates prefill encoding wording.
docs.json	Reorders WalletKit nav entries (React Native above Flutter).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…ection-docs # Conflicts: # payments/wallets/standalone/flutter.mdx # payments/wallets/standalone/kotlin.mdx # payments/wallets/standalone/react-native.mdx # payments/wallets/standalone/swift.mdx # payments/wallets/standalone/web.mdx # payments/wallets/walletkit/flutter.mdx # payments/wallets/walletkit/kotlin.mdx # payments/wallets/walletkit/react-native.mdx # payments/wallets/walletkit/swift.mdx # payments/wallets/walletkit/web.mdx

Fold "Accessing the Pay Client" into Initialization and remove the redundant "Direct Access" section (both just showed `walletKit.pay`). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Unify the SDK-setup section heading across standalone and WalletKit pages (all now "Initialization"). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

ignaciosantise · 2026-06-23T17:54:01Z

-## Examples
+9. **WebView Data Collection**: When `selectedOption.collectData.url` is present, display the URL in a WebView using `webview_flutter` rather than building native forms. The WebView handles form rendering, validation, and T&C acceptance.

-For a complete example implementation, see the [reown_walletkit example](https://github.com/reown-com/reown_flutter/tree/master/packages/reown_walletkit/example/lib/walletconnect_pay).


(this was redundant with the wallet sample link at top)

ignaciosantise · 2026-06-23T17:58:16Z


 <Step title="Collect User Data (If Required)" titleSize="h3">

-Some payments require collecting additional user information. After the user selects an option, check for `collectData` on that option and complete data collection **before** fetching the required actions — the backend rejects the actions request if data collection is required but not yet captured:


the backend error info was moved to a shared snippet, still present in the docs

ignaciosantise · 2026-06-23T17:58:28Z


 <Step title="Collect User Data (If Required)" titleSize="h3">

-Some payments may require additional user data. After the user selects an option, check for `collectData` in the payment options response and run this step **before** fetching the required payment actions — the backend rejects the actions request with `400 IC data required` for options needing Information Capture if data has not yet been collected:


the backend error info was moved to a shared snippet, still present in the docs

Dart's base64Url.encode includes `=` padding; strip it so the Flutter prefill examples match the unpadded base64url used by the other SDKs. Addresses Copilot review feedback on PR #74. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

ignaciosantise and others added 2 commits June 23, 2026 12:44

Copilot AI review requested due to automatic review settings June 23, 2026 17:27

Copilot started reviewing on behalf of ignaciosantise June 23, 2026 17:28 View session

mintlify Bot deployed to staging June 23, 2026 17:29 View deployment

Copilot AI reviewed Jun 23, 2026

View reviewed changes

Comment thread payments/wallets/walletkit/flutter.mdx Outdated

Comment thread payments/wallets/standalone/flutter.mdx Outdated

Comment thread payments/wallets/standalone/flutter.mdx

Comment thread payments/wallets/walletkit/ai-prompts/flutter.mdx

mintlify Bot deployed to staging June 23, 2026 17:44 View deployment

docs(wcp): tidy WalletKit Flutter sections

be3b963

Fold "Accessing the Pay Client" into Initialization and remove the redundant "Direct Access" section (both just showed `walletKit.pay`). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mintlify Bot deployed to staging June 23, 2026 17:47 View deployment

docs(wcp): rename standalone "Configuration" to "Initialization"

1808f60

Unify the SDK-setup section heading across standalone and WalletKit pages (all now "Initialization"). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

mintlify Bot deployed to staging June 23, 2026 17:50 View deployment

ignaciosantise requested review from ganchoradkov, jakubuid and mirnab0 June 23, 2026 17:52

ignaciosantise commented Jun 23, 2026

View reviewed changes

mintlify Bot deployed to staging June 23, 2026 18:04 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(wcp): custom theming for data collection form + structure cleanup#74

docs(wcp): custom theming for data collection form + structure cleanup#74
ignaciosantise wants to merge 6 commits into
mainfrom
review-wpay-data-collection-docs

ignaciosantise commented Jun 23, 2026

Uh oh!

mintlify Bot commented Jun 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ignaciosantise Jun 23, 2026

Uh oh!

ignaciosantise Jun 23, 2026

Uh oh!

ignaciosantise Jun 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		<Step title="Collect User Data (If Required)" titleSize="h3">

		Some payments require collecting additional user information. After the user selects an option, check for `collectData` on that option and complete data collection before fetching the required actions — the backend rejects the actions request if data collection is required but not yet captured:


		<Step title="Collect User Data (If Required)" titleSize="h3">

		Some payments may require additional user data. After the user selects an option, check for `collectData` in the payment options response and run this step before fetching the required payment actions — the backend rejects the actions request with `400 IC data required` for options needing Information Capture if data has not yet been collected:

Conversation

ignaciosantise commented Jun 23, 2026

What

Feature: themeable data collection form

Clarity cleanup (done alongside)

Structure & navigation

Verification

Notes

Uh oh!

mintlify Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ignaciosantise Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

ignaciosantise Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

ignaciosantise Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mintlify Bot commented Jun 23, 2026 •

edited

Loading