feat(ton-pay): update documentation based on TON Pay Widget #2039
Open
an-kor wants to merge 5 commits intoton-org:mainfrom
Open
feat(ton-pay): update documentation based on TON Pay Widget #2039an-kor wants to merge 5 commits intoton-org:mainfrom
an-kor wants to merge 5 commits intoton-org:mainfrom
Conversation
…egration guides - Removed outdated payment integration examples and replaced them with the new `TonPayWidget` component. - Added a new section for legacy versions and updated the API reference to clarify package installations. - Deleted webhook documentation as this feature is not in a public access yet
Contributor
|
Skipping AI review because this PR is from a fork. A maintainer can start the review by commenting /review in this PR. |
Contributor
|
Thank you for the contribution! Unfortunately, it is too large, with over 600 added lines, excluding some generated or otherwise special files. Thus, this pull request is challenging to review and iterate on. Please split the PR into several smaller ones and consider reverting any unrelated changes, writing less, or approaching the problem in the issue from a different angle. I look forward to your next submissions. If you still intend to proceed as is, then you are at the mercy of the reviewers. |
📝 WalkthroughWalkthroughReplaces legacy TonPay React/Ton Connect docs with a hosted TonPayWidget-centered UX, adds server-side and migration pages, removes several legacy pages (webhooks, transfer, status, TON Connect), and updates API/reference and integration guides to document the widget and server-side helpers. Changes
Sequence Diagram(s)sequenceDiagram
participant App as Client App
participant Widget as TonPayWidget (iframe)
participant Wallet as User Wallet (TON Connect)
participant Server as Merchant Server (`@ton-pay/api`)
App->>Widget: createWidget/mount({amount, recipient, ...})
App->>Widget: open() / user triggers
Widget->>Wallet: request connect & sign (bootstrap)
Wallet-->>Widget: signed message / tx submission
Widget-->>App: onSuccess(payload) / onError(err) / onClose()
Widget->>Server: (optional) notify or use server-side helpers
Note right of Server: Server may later call\ngetTonPayTransferByReference or\ngetTonPayTransferByBodyHash
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (4)
ecosystem/ton-pay/ui-integration/button-js.mdx (1)
70-83: ESM import example uses named exportrenderbut CDN usesTonPay.render.The ESM example imports
{ render }from@ton-pay/ui, but there's no mention that this is the same asTonPay.renderfrom the CDN bundle. Consider adding a brief note clarifying the relationship, or using a consistent naming pattern.📝 Suggested clarification
## Option 2: use the ESM API with a bundler +The ESM build exports the same API as the CDN bundle's `window.TonPay`. + ```ts -import { render } from "@ton-pay/ui"; +import { render, createWidget } from "@ton-pay/ui";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/ui-integration/button-js.mdx` around lines 70 - 83, The ESM example imports the named export render from "@ton-pay/ui" but the CDN bundle exposes TonPay.render; update the docs to clarify they are the same API or use consistent names: either add a short note stating "ESM import { render } is equivalent to TonPay.render from the CDN" or change the example to call/create via a shared helper (e.g., reference render and createWidget) so readers understand the mapping between render and TonPay.render; mention the symbols render, createWidget and TonPay.render to make locating the example clear.ecosystem/ton-pay/legacy/react-integration.mdx (2)
183-188: Clarify thatreferenceandbodyBase64Hashare optional in the return fields table.The table documents
referenceandbodyBase64Hashwith description "Optional transfer reference..." but the Type column showsstringwithout the optional marker. For consistency with the description, consider marking these asstring | undefinedor adding "optional" to the Type column.📝 Suggested fix
-| `reference` | `string` | Optional transfer reference returned by the message factory. | -| `bodyBase64Hash` | `string` | Optional Base64 body hash returned by the message factory. | +| `reference` | `string \| undefined` | Transfer reference returned by the message factory, if provided. | +| `bodyBase64Hash` | `string \| undefined` | Base64 body hash returned by the message factory, if provided. |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/legacy/react-integration.mdx` around lines 183 - 188, Update the return-fields table so the Type column matches the Description: mark the fields reference and bodyBase64Hash as optional by changing their Type from `string` to `string | undefined` (or otherwise indicating optionality) for the entries labeled `reference` and `bodyBase64Hash` so the Type column aligns with their "Optional ..." descriptions.
92-110: Missing error handling in thehandlePayexample.The
handlePayfunction catches errors in thefinallyblock but doesn't handle or log errors from thepay()call orfetch(). This could silently fail. Consider adding error handling for a more robust example.📝 Suggested improvement
async function handlePay() { setIsLoading(true); try { const { reference } = await pay(async (senderAddr: string) => { const response = await fetch("/api/create-payment", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ orderId, senderAddr }), }); + if (!response.ok) { + throw new Error("Failed to create payment"); + } + return response.json(); }); console.log("Transfer submitted", reference); + } catch (error) { + console.error("Payment failed", error); + // Handle error appropriately (show notification, etc.) } finally { setIsLoading(false); } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/legacy/react-integration.mdx` around lines 92 - 110, The handlePay example currently only uses a finally block to clear loading state, so errors from pay() or the inner fetch() can be swallowed; update handlePay to wrap the await pay(...) call in a try/catch so any thrown errors (from pay or response.json()) are caught, call setIsLoading(false) in finally as-is, and in the catch log the error (e.g. console.error or processLogger) and surface a user-facing message or set an error state. Specifically modify the handlePay function around the pay(...) invocation and the fetch response handling to validate response.ok before returning JSON, and ensure errors are rethrown or handled in the catch block so failures are not silent.ecosystem/ton-pay/ui-integration/button-react.mdx (1)
91-97: Callback payload types should be documented or linked.The callbacks table documents
onRouteChange,onError, andonSuccessas accepting(payload) => void, but doesn't describe the payload structure. The canonical types (WidgetErrorPayload,WidgetRouteChangedPayload,WidgetSuccessPayload) are defined in the API reference. Consider either linking to the API reference or briefly noting the payload structure for developer convenience.📝 Suggested improvement
| `onRouteChange` | `(payload) => void` | Called when the iframe route changes. | -| `onError` | `(payload) => void` | Called for widget runtime errors and session bootstrap errors. | -| `onSuccess` | `(payload) => void` | Called when the widget finishes successfully. | +| `onError` | `(payload: WidgetErrorPayload) => void` | Called for widget runtime errors and session bootstrap errors. See [API reference](/ecosystem/ton-pay/api-reference#widgeterrorpayload). | +| `onSuccess` | `(payload: WidgetSuccessPayload) => void` | Called when the widget finishes successfully. See [API reference](/ecosystem/ton-pay/api-reference#widgetsuccesspayload). |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/ui-integration/button-react.mdx` around lines 91 - 97, Update the callbacks table to specify or link the canonical payload types instead of generic "(payload) => void": change the types for onRouteChange, onError, and onSuccess to the canonical names WidgetRouteChangedPayload, WidgetErrorPayload, and WidgetSuccessPayload (or add inline brief shapes) and add a hyperlink to the API reference (or a local anchor) where those types are defined so consumers of onRouteChange, onError, and onSuccess can see the exact payload structure.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ecosystem/ton-pay/api-reference.mdx`:
- Line 265: The link in the text currently points to
"/ecosystem/ton-pay/payments-integration/server-side" which is inconsistent with
the rest of the PR that uses
"/ecosystem/ton-pay/payment-integration/server-side"; update the link to use the
correct path (replace "payments-integration" with "payment-integration") and
scan the document for any other occurrences to make the link path consistent
across the files; ensure the updated link appears in the same location where the
current string is referenced.
In `@ecosystem/ton-pay/legacy/overview.mdx`:
- Around line 33-37: Update the broken server-side link in the "Next steps" list
by replacing the incorrect href string
"/ecosystem/ton-pay/payments-integration/server-side" with the correct path
"/ecosystem/ton-pay/payment-integration/payments-server-side"; locate the list
item containing the markdown link text "[Server-side integration]" in
overview.mdx and update its href accordingly so it matches the docs.json
navigation.
In `@ecosystem/ton-pay/legacy/react-integration.mdx`:
- Around line 235-236: The markdown link labeled "Server-side integration" in
react-integration.mdx points to the wrong URL
(/ecosystem/ton-pay/payments-integration/server-side); update that link target
to the correct path
(/ecosystem/ton-pay/payment-integration/payments-server-side) so the directory
uses payment-integration and the filename includes the payments- prefix.
In `@ecosystem/ton-pay/payment-integration/migration.mdx`:
- Around line 87-93: The migration page contains a self-referential link to
"/ecosystem/ton-pay/legacy/migration" which is incorrect for this file
(migration.mdx); locate the anchor or link element in this document (near the
Checkout component / TonPayWidget example) and either remove the link if it was
meant to be self-referential, or update the href to the intended destination
(e.g., the correct legacy migration path or another page) so it no longer points
to the current page; ensure any displayed link text remains consistent with the
new target.
In `@ecosystem/ton-pay/payment-integration/payments-react.mdx`:
- Around line 78-93: In the "When to use server-side integration" and "Migration
from version 0.3.2 or lower" sections update the two broken link targets:
replace the markdown link target
`/ecosystem/ton-pay/payments-integration/server-side` with
`/ecosystem/ton-pay/payment-integration/payments-server-side` for the
server-side integration link (visible under the "When to use server-side
integration" heading) and replace `/ecosystem/ton-pay/legacy/migration` with
`/ecosystem/ton-pay/payment-integration/migration` for the migration guide link
(visible under the "Migration from version 0.3.2 or lower" heading); ensure the
visible link text remains unchanged and only the URL paths are updated.
In `@ecosystem/ton-pay/quick-start.mdx`:
- Around line 130-135: The "See also" section contains a broken link: update the
incorrect path '/ecosystem/ton-pay/payments-integration/server-side' to the
correct '/ecosystem/ton-pay/payment-integration/server-side' in the
quick-start.mdx "See also" list (look for the list item text "Server-side
integration") so it matches the other TON Pay doc paths.
In `@ecosystem/ton-pay/ui-integration/button-js.mdx`:
- Around line 141-176: The options tables in button-js.mdx lack props present in
the React API; update the "Button options" table to include `disabled`,
`isLoading`, `className`, and `style` (matching types/defaults from
TonPayWidgetProps/button-react.mdx) and add `referenceId` to the "Checkout
options" table, or explicitly note in the doc that these props are intentionally
omitted for the JS widget if that is the case; reference the types/prop names
`TonPayWidgetProps`, `disabled`, `isLoading`, `className`, `style`, and
`referenceId` when making the change so the JS doc achieves parity with
button-react.mdx.
In `@ecosystem/ton-pay/ui-integration/button-react.mdx`:
- Around line 58-97: The Checkout props table is missing the referenceId prop
from the TonPayWidgetProps type; add a new row for referenceId (type: string,
default: -, description: Optional merchant reference id mapped to referenceId in
TonPayWidgetProps) into the Checkout props table immediately after the comment
row so the docs match the canonical TonPayWidgetProps definition.
- Around line 123-124: Update the broken migration link: replace the reference
string "/ecosystem/ton-pay/legacy/migration" with the correct path
"/ecosystem/ton-pay/payment-integration/migration" in the content that contains
the two bullet lines (the line that currently reads "Use the [migration
guide](/ecosystem/ton-pay/legacy/migration) for the step-by-step upgrade
plan."). Ensure the second line ("Use the [legacy React integration
guide](/ecosystem/ton-pay/legacy/react-integration) ...") remains unchanged.
---
Nitpick comments:
In `@ecosystem/ton-pay/legacy/react-integration.mdx`:
- Around line 183-188: Update the return-fields table so the Type column matches
the Description: mark the fields reference and bodyBase64Hash as optional by
changing their Type from `string` to `string | undefined` (or otherwise
indicating optionality) for the entries labeled `reference` and `bodyBase64Hash`
so the Type column aligns with their "Optional ..." descriptions.
- Around line 92-110: The handlePay example currently only uses a finally block
to clear loading state, so errors from pay() or the inner fetch() can be
swallowed; update handlePay to wrap the await pay(...) call in a try/catch so
any thrown errors (from pay or response.json()) are caught, call
setIsLoading(false) in finally as-is, and in the catch log the error (e.g.
console.error or processLogger) and surface a user-facing message or set an
error state. Specifically modify the handlePay function around the pay(...)
invocation and the fetch response handling to validate response.ok before
returning JSON, and ensure errors are rethrown or handled in the catch block so
failures are not silent.
In `@ecosystem/ton-pay/ui-integration/button-js.mdx`:
- Around line 70-83: The ESM example imports the named export render from
"@ton-pay/ui" but the CDN bundle exposes TonPay.render; update the docs to
clarify they are the same API or use consistent names: either add a short note
stating "ESM import { render } is equivalent to TonPay.render from the CDN" or
change the example to call/create via a shared helper (e.g., reference render
and createWidget) so readers understand the mapping between render and
TonPay.render; mention the symbols render, createWidget and TonPay.render to
make locating the example clear.
In `@ecosystem/ton-pay/ui-integration/button-react.mdx`:
- Around line 91-97: Update the callbacks table to specify or link the canonical
payload types instead of generic "(payload) => void": change the types for
onRouteChange, onError, and onSuccess to the canonical names
WidgetRouteChangedPayload, WidgetErrorPayload, and WidgetSuccessPayload (or add
inline brief shapes) and add a hyperlink to the API reference (or a local
anchor) where those types are defined so consumers of onRouteChange, onError,
and onSuccess can see the exact payload structure.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f5540b26-a3bb-4d90-bee1-d1b9a6d1e20e
📒 Files selected for processing (16)
docs.jsonecosystem/ton-pay/api-reference.mdxecosystem/ton-pay/legacy/overview.mdxecosystem/ton-pay/legacy/react-integration.mdxecosystem/ton-pay/on-ramp.mdxecosystem/ton-pay/overview.mdxecosystem/ton-pay/payment-integration/migration.mdxecosystem/ton-pay/payment-integration/payments-react.mdxecosystem/ton-pay/payment-integration/payments-server-side.mdxecosystem/ton-pay/payment-integration/payments-tonconnect.mdxecosystem/ton-pay/payment-integration/status-info.mdxecosystem/ton-pay/payment-integration/transfer.mdxecosystem/ton-pay/quick-start.mdxecosystem/ton-pay/ui-integration/button-js.mdxecosystem/ton-pay/ui-integration/button-react.mdxecosystem/ton-pay/webhooks.mdx
💤 Files with no reviewable changes (4)
- ecosystem/ton-pay/webhooks.mdx
- ecosystem/ton-pay/payment-integration/transfer.mdx
- ecosystem/ton-pay/payment-integration/payments-tonconnect.mdx
- ecosystem/ton-pay/payment-integration/status-info.mdx
Comment on lines
+141
to
+176
| ## Options | ||
|
|
||
| Execute a payment transaction. | ||
| ### Checkout options | ||
|
|
||
| ```js | ||
| const result = await tonPay.pay(async (senderAddr) => { | ||
| const message = { | ||
| address: "<RECIPIENT_ADDR>", | ||
| amount: "1000000" | ||
| }; | ||
| return { message }; | ||
| }); | ||
| | Option | Type | Default | Description | | ||
| | --- | --- | --- | --- | | ||
| | `amount` | `number \| string` | required | Payment amount in asset units. | | ||
| | `recipientWalletAddress` | `string` | required | Recipient wallet address. | | ||
| | `chain` | `"mainnet" \| "testnet"` | `"mainnet"` | TON Pay environment used for session bootstrap. | | ||
| | `currency` | `string` | - | Asset symbol shown to the user. | | ||
| | `asset` | `string` | `currency ?? "TON"` | Exact asset identifier, including jettons. | | ||
| | `itemTitle` | `string` | - | UI label shown in the widget flow. | | ||
| | `comment` | `string` | - | Payment comment sent to the backend flow. It maps to `commentToRecipient`. | | ||
|
|
||
| console.log(result.txResult); | ||
| ``` | ||
| ### Button options | ||
|
|
||
| - `disconnect(): Promise<void>` | ||
| | Option | Type | Default | | ||
| | --- | --- | --- | | ||
| | `variant` | `"long" \| "short"` | `"long"` | | ||
| | `text` | `string` | - | | ||
| | `bgColor` | `string` | `"#0098EA"` | | ||
| | `textColor` | `string` | `"#FFFFFF"` | | ||
| | `borderRadius` | `number \| string` | `8` | | ||
| | `width` | `number \| string` | `"100%"` | | ||
| | `height` | `number \| string` | `44` | | ||
| | `fontFamily` | `string` | `"inherit"` | | ||
|
|
||
| Disconnect the current wallet. | ||
| ### Lifecycle callbacks | ||
|
|
||
| ```js | ||
| await tonPay.disconnect(); | ||
| ``` | ||
| | Option | Type | Description | | ||
| | --- | --- | --- | | ||
| | `onReady` | `() => void` | Called when the visible widget is ready. | | ||
| | `onClose` | `() => void` | Called when the widget closes. | | ||
| | `onRouteChange` | `(payload) => void` | Called when the iframe route changes. | | ||
| | `onError` | `(payload) => void` | Called for session bootstrap and runtime widget errors. | | ||
| | `onSuccess` | `(payload) => void` | Called when the widget finishes successfully. | |
There was a problem hiding this comment.
JS widget options tables are missing several props compared to React version.
Comparing the options tables to TonPayWidgetProps and the React documentation in button-react.mdx:
Missing from Button options (Lines 155-166):
disabledisLoadingclassNamestyle
Missing from Checkout options (Lines 143-153):
referenceId
These props are documented in the React version and should be included for API parity, or the omission should be noted if intentional.
📝 Suggested additions to Button options table
| `fontFamily` | `string` | `"inherit"` |
+| `disabled` | `boolean` | `false` |
+| `isLoading` | `boolean` | `false` |
+| `className` | `string` | - |
+| `style` | `object` | - |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ## Options | |
| Execute a payment transaction. | |
| ### Checkout options | |
| ```js | |
| const result = await tonPay.pay(async (senderAddr) => { | |
| const message = { | |
| address: "<RECIPIENT_ADDR>", | |
| amount: "1000000" | |
| }; | |
| return { message }; | |
| }); | |
| | Option | Type | Default | Description | | |
| | --- | --- | --- | --- | | |
| | `amount` | `number \| string` | required | Payment amount in asset units. | | |
| | `recipientWalletAddress` | `string` | required | Recipient wallet address. | | |
| | `chain` | `"mainnet" \| "testnet"` | `"mainnet"` | TON Pay environment used for session bootstrap. | | |
| | `currency` | `string` | - | Asset symbol shown to the user. | | |
| | `asset` | `string` | `currency ?? "TON"` | Exact asset identifier, including jettons. | | |
| | `itemTitle` | `string` | - | UI label shown in the widget flow. | | |
| | `comment` | `string` | - | Payment comment sent to the backend flow. It maps to `commentToRecipient`. | | |
| console.log(result.txResult); | |
| ``` | |
| ### Button options | |
| - `disconnect(): Promise<void>` | |
| | Option | Type | Default | | |
| | --- | --- | --- | | |
| | `variant` | `"long" \| "short"` | `"long"` | | |
| | `text` | `string` | - | | |
| | `bgColor` | `string` | `"#0098EA"` | | |
| | `textColor` | `string` | `"#FFFFFF"` | | |
| | `borderRadius` | `number \| string` | `8` | | |
| | `width` | `number \| string` | `"100%"` | | |
| | `height` | `number \| string` | `44` | | |
| | `fontFamily` | `string` | `"inherit"` | | |
| Disconnect the current wallet. | |
| ### Lifecycle callbacks | |
| ```js | |
| await tonPay.disconnect(); | |
| ``` | |
| | Option | Type | Description | | |
| | --- | --- | --- | | |
| | `onReady` | `() => void` | Called when the visible widget is ready. | | |
| | `onClose` | `() => void` | Called when the widget closes. | | |
| | `onRouteChange` | `(payload) => void` | Called when the iframe route changes. | | |
| | `onError` | `(payload) => void` | Called for session bootstrap and runtime widget errors. | | |
| | `onSuccess` | `(payload) => void` | Called when the widget finishes successfully. | | |
| ## Options | |
| ### Checkout options | |
| | Option | Type | Default | Description | | |
| | --- | --- | --- | --- | | |
| | `amount` | `number \| string` | required | Payment amount in asset units. | | |
| | `recipientWalletAddress` | `string` | required | Recipient wallet address. | | |
| | `chain` | `"mainnet" \| "testnet"` | `"mainnet"` | TON Pay environment used for session bootstrap. | | |
| | `currency` | `string` | - | Asset symbol shown to the user. | | |
| | `asset` | `string` | `currency ?? "TON"` | Exact asset identifier, including jettons. | | |
| | `itemTitle` | `string` | - | UI label shown in the widget flow. | | |
| | `comment` | `string` | - | Payment comment sent to the backend flow. It maps to `commentToRecipient`. | | |
| ### Button options | |
| | Option | Type | Default | | |
| | --- | --- | --- | | |
| | `variant` | `"long" \| "short"` | `"long"` | | |
| | `text` | `string` | - | | |
| | `bgColor` | `string` | `"#0098EA"` | | |
| | `textColor` | `string` | `"#FFFFFF"` | | |
| | `borderRadius` | `number \| string` | `8` | | |
| | `width` | `number \| string` | `"100%"` | | |
| | `height` | `number \| string` | `44` | | |
| | `fontFamily` | `string` | `"inherit"` | | |
| | `disabled` | `boolean` | `false` | | |
| | `isLoading` | `boolean` | `false` | | |
| | `className` | `string` | - | | |
| | `style` | `object` | - | | |
| ### Lifecycle callbacks | |
| | Option | Type | Description | | |
| | --- | --- | --- | | |
| | `onReady` | `() => void` | Called when the visible widget is ready. | | |
| | `onClose` | `() => void` | Called when the widget closes. | | |
| | `onRouteChange` | `(payload) => void` | Called when the iframe route changes. | | |
| | `onError` | `(payload) => void` | Called for session bootstrap and runtime widget errors. | | |
| | `onSuccess` | `(payload) => void` | Called when the widget finishes successfully. | |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@ecosystem/ton-pay/ui-integration/button-js.mdx` around lines 141 - 176, The
options tables in button-js.mdx lack props present in the React API; update the
"Button options" table to include `disabled`, `isLoading`, `className`, and
`style` (matching types/defaults from TonPayWidgetProps/button-react.mdx) and
add `referenceId` to the "Checkout options" table, or explicitly note in the doc
that these props are intentionally omitted for the JS widget if that is the
case; reference the types/prop names `TonPayWidgetProps`, `disabled`,
`isLoading`, `className`, `style`, and `referenceId` when making the change so
the JS doc achieves parity with button-react.mdx.
Comment on lines
+58
to
+97
| ## Props | ||
|
|
||
| ### Checkout props | ||
|
|
||
| | Prop | Type | Default | Description | | ||
| | --- | --- | --- | --- | | ||
| | `amount` | `number \| string` | required | Payment amount in asset units. | | ||
| | `recipientWalletAddress` | `string` | required | Recipient wallet address. | | ||
| | `chain` | `"mainnet" \| "testnet"` | `"mainnet"` | TON Pay environment used for session bootstrap. | | ||
| | `currency` | `string` | - | Asset symbol shown to the user. | | ||
| | `asset` | `string` | `currency ?? "TON"` | Asset identifier, including jetton master addresses. | | ||
| | `itemTitle` | `string` | - | UI label shown in the widget flow. | | ||
| | `comment` | `string` | - | Payment comment sent to the backend flow. It maps to `commentToRecipient`. | | ||
|
|
||
| ### Button props | ||
|
|
||
| | Prop | Type | Default | Description | | ||
| | --- | --- | --- | --- | | ||
| | `variant` | `"long" \| "short"` | `"long"` | Button label variant. | | ||
| | `text` | `string` | - | Override the default button label. | | ||
| | `bgColor` | `string` | `"#0098EA"` | Button background color. | | ||
| | `textColor` | `string` | `"#FFFFFF"` | Button text color. | | ||
| | `borderRadius` | `number \| string` | `8` | Button border radius. | | ||
| | `width` | `number \| string` | `"100%"` | Button width. | | ||
| | `height` | `number \| string` | `44` | Button height. | | ||
| | `fontFamily` | `string` | `"inherit"` | Button font family. | | ||
| | `disabled` | `boolean` | `false` | Disable the button. | | ||
| | `isLoading` | `boolean` | `false` | Force a loading state from the host app. | | ||
| | `className` | `string` | - | Extra button class name. | | ||
| | `style` | `CSSProperties` | - | Extra inline styles for the button. | | ||
|
|
||
| ### Callbacks | ||
|
|
||
| | Prop | Type | Description | | ||
| | --- | --- | --- | | ||
| | `onReady` | `() => void` | Called when the visible widget is ready. | | ||
| | `onClose` | `() => void` | Called when the widget closes. | | ||
| | `onRouteChange` | `(payload) => void` | Called when the iframe route changes. | | ||
| | `onError` | `(payload) => void` | Called for widget runtime errors and session bootstrap errors. | | ||
| | `onSuccess` | `(payload) => void` | Called when the widget finishes successfully. | |
There was a problem hiding this comment.
Props table is missing referenceId from TonPayWidgetProps.
Comparing the props tables (Lines 62-87, 91-97) against the canonical TonPayWidgetProps in ecosystem/ton-pay/api-reference.mdx (Lines 41-71), the referenceId prop is not documented in any of the three tables. This prop appears in the type definition and should be included in the Checkout props table.
📝 Suggested fix
Add referenceId to the Checkout props table after comment:
| `comment` | `string` | - | Payment comment sent to the backend flow. It maps to `commentToRecipient`. |
+| `referenceId` | `string` | - | Optional merchant-provided reference identifier for tracking. |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ## Props | |
| ### Checkout props | |
| | Prop | Type | Default | Description | | |
| | --- | --- | --- | --- | | |
| | `amount` | `number \| string` | required | Payment amount in asset units. | | |
| | `recipientWalletAddress` | `string` | required | Recipient wallet address. | | |
| | `chain` | `"mainnet" \| "testnet"` | `"mainnet"` | TON Pay environment used for session bootstrap. | | |
| | `currency` | `string` | - | Asset symbol shown to the user. | | |
| | `asset` | `string` | `currency ?? "TON"` | Asset identifier, including jetton master addresses. | | |
| | `itemTitle` | `string` | - | UI label shown in the widget flow. | | |
| | `comment` | `string` | - | Payment comment sent to the backend flow. It maps to `commentToRecipient`. | | |
| ### Button props | |
| | Prop | Type | Default | Description | | |
| | --- | --- | --- | --- | | |
| | `variant` | `"long" \| "short"` | `"long"` | Button label variant. | | |
| | `text` | `string` | - | Override the default button label. | | |
| | `bgColor` | `string` | `"#0098EA"` | Button background color. | | |
| | `textColor` | `string` | `"#FFFFFF"` | Button text color. | | |
| | `borderRadius` | `number \| string` | `8` | Button border radius. | | |
| | `width` | `number \| string` | `"100%"` | Button width. | | |
| | `height` | `number \| string` | `44` | Button height. | | |
| | `fontFamily` | `string` | `"inherit"` | Button font family. | | |
| | `disabled` | `boolean` | `false` | Disable the button. | | |
| | `isLoading` | `boolean` | `false` | Force a loading state from the host app. | | |
| | `className` | `string` | - | Extra button class name. | | |
| | `style` | `CSSProperties` | - | Extra inline styles for the button. | | |
| ### Callbacks | |
| | Prop | Type | Description | | |
| | --- | --- | --- | | |
| | `onReady` | `() => void` | Called when the visible widget is ready. | | |
| | `onClose` | `() => void` | Called when the widget closes. | | |
| | `onRouteChange` | `(payload) => void` | Called when the iframe route changes. | | |
| | `onError` | `(payload) => void` | Called for widget runtime errors and session bootstrap errors. | | |
| | `onSuccess` | `(payload) => void` | Called when the widget finishes successfully. | | |
| ## Props | |
| ### Checkout props | |
| | Prop | Type | Default | Description | | |
| | --- | --- | --- | --- | | |
| | `amount` | `number \| string` | required | Payment amount in asset units. | | |
| | `recipientWalletAddress` | `string` | required | Recipient wallet address. | | |
| | `chain` | `"mainnet" \| "testnet"` | `"mainnet"` | TON Pay environment used for session bootstrap. | | |
| | `currency` | `string` | - | Asset symbol shown to the user. | | |
| | `asset` | `string` | `currency ?? "TON"` | Asset identifier, including jetton master addresses. | | |
| | `itemTitle` | `string` | - | UI label shown in the widget flow. | | |
| | `comment` | `string` | - | Payment comment sent to the backend flow. It maps to `commentToRecipient`. | | |
| | `referenceId` | `string` | - | Optional merchant-provided reference identifier for tracking. | | |
| ### Button props | |
| | Prop | Type | Default | Description | | |
| | --- | --- | --- | --- | | |
| | `variant` | `"long" \| "short"` | `"long"` | Button label variant. | | |
| | `text` | `string` | - | Override the default button label. | | |
| | `bgColor` | `string` | `"#0098EA"` | Button background color. | | |
| | `textColor` | `string` | `"#FFFFFF"` | Button text color. | | |
| | `borderRadius` | `number \| string` | `8` | Button border radius. | | |
| | `width` | `number \| string` | `"100%"` | Button width. | | |
| | `height` | `number \| string` | `44` | Button height. | | |
| | `fontFamily` | `string` | `"inherit"` | Button font family. | | |
| | `disabled` | `boolean` | `false` | Disable the button. | | |
| | `isLoading` | `boolean` | `false` | Force a loading state from the host app. | | |
| | `className` | `string` | - | Extra button class name. | | |
| | `style` | `CSSProperties` | - | Extra inline styles for the button. | | |
| ### Callbacks | |
| | Prop | Type | Description | | |
| | --- | --- | --- | | |
| | `onReady` | `() => void` | Called when the visible widget is ready. | | |
| | `onClose` | `() => void` | Called when the widget closes. | | |
| | `onRouteChange` | `(payload) => void` | Called when the iframe route changes. | | |
| | `onError` | `(payload) => void` | Called for widget runtime errors and session bootstrap errors. | | |
| | `onSuccess` | `(payload) => void` | Called when the widget finishes successfully. | |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@ecosystem/ton-pay/ui-integration/button-react.mdx` around lines 58 - 97, The
Checkout props table is missing the referenceId prop from the TonPayWidgetProps
type; add a new row for referenceId (type: string, default: -, description:
Optional merchant reference id mapped to referenceId in TonPayWidgetProps) into
the Checkout props table immediately after the comment row so the docs match the
canonical TonPayWidgetProps definition.
…ions - Updated the on-ramp documentation to clarify the integration process with MoonPay, enhancing user guidance. - Removed outdated legacy version sections from the documentation to focus on current practices. - Added details on regional availability and wallet funding processes to improve clarity for developers.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
ecosystem/ton-pay/quick-start.mdx (1)
135-135:⚠️ Potential issue | 🟡 MinorFix broken “Server-side integration” link.
Line 135 points to a non-existent path (
/ecosystem/ton-pay/payments-integration/server-side). The target should match the existing doc route.🔗 Proposed fix
-- [Server-side integration](/ecosystem/ton-pay/payments-integration/server-side) +- [Server-side integration](/ecosystem/ton-pay/payment-integration/payments-server-side)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/quick-start.mdx` at line 135, The markdown link target for "[Server-side integration]" in ecosystem/ton-pay/quick-start.mdx currently points to a non-existent path (/ecosystem/ton-pay/payments-integration/server-side); update that link target to the correct existing doc route by finding the actual file/route under the payments-integration docs and replacing the URL in the "[Server-side integration]" link accordingly, then verify the link resolves correctly in the built site.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ecosystem/ton-pay/quick-start.mdx`:
- Around line 6-136: Run the project formatter (e.g., npm run format or prettier
--write) on the MDX file to fix whitespace/MDX formatting issues causing the
check:fmt:some failure; re-format the file that contains the Steps/Step/Aside
blocks and the TonPayWidget example (the App component example) and commit the
updated file so the linter passes.
- Line 127: The doc uses two different meanings for the `comment` prop (one
saying it is a "recipient/blockchain transaction comment" and another saying it
is "sent to the backend flow"); pick one consistent definition and update both
occurrences so they match (e.g., change the sentence that currently states
"`comment` - payment comment sent to the backend flow" to the earlier wording
describing it as the recipient/blockchain transaction comment, or vice versa),
ensuring the `comment` prop description is identical and unambiguous across the
file.
---
Duplicate comments:
In `@ecosystem/ton-pay/quick-start.mdx`:
- Line 135: The markdown link target for "[Server-side integration]" in
ecosystem/ton-pay/quick-start.mdx currently points to a non-existent path
(/ecosystem/ton-pay/payments-integration/server-side); update that link target
to the correct existing doc route by finding the actual file/route under the
payments-integration docs and replacing the URL in the "[Server-side
integration]" link accordingly, then verify the link resolves correctly in the
built site.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1d424d19-528a-482c-ba30-c7c8a0674211
📒 Files selected for processing (4)
docs.jsonecosystem/ton-pay/on-ramp.mdxecosystem/ton-pay/overview.mdxecosystem/ton-pay/quick-start.mdx
🚧 Files skipped from review as they are similar to previous changes (2)
- ecosystem/ton-pay/on-ramp.mdx
- docs.json
Contributor
|
/review |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Comment on lines
+36
to
+74
| - preloads the hosted iframe; | ||
| - maps merchant checkout props to widget intent; | ||
| - opens the checkout UI; | ||
| - forwards widget lifecycle callbacks. | ||
|
|
||
| ### `TonPayWidgetProps` | ||
|
|
||
| ```ts | ||
| type TonPayWidgetProps = { | ||
| amount: number | string; | ||
| recipientWalletAddress: string; | ||
| asset?: string; | ||
| bgColor?: string; | ||
| borderRadius?: number | string; | ||
| chain?: "mainnet" | "testnet"; | ||
| className?: string; | ||
| comment?: string; | ||
| currency?: string; | ||
| disabled?: boolean; | ||
| fontFamily?: string; | ||
| height?: number | string; | ||
| isLoading?: boolean; | ||
| itemTitle?: string; | ||
| onClose?: () => void; | ||
| onError?: (payload: WidgetErrorPayload) => void; | ||
| onReady?: () => void; | ||
| onRouteChange?: (payload: WidgetRouteChangedPayload) => void; | ||
| onSuccess?: (payload: WidgetSuccessPayload) => void; | ||
| referenceId?: string; | ||
| style?: React.CSSProperties; | ||
| text?: string; | ||
| textColor?: string; | ||
| variant?: "long" | "short"; | ||
| width?: number | string; | ||
| }; | ||
| ``` | ||
|
|
||
| <Aside type="note"> | ||
| `chain` defaults to `mainnet`. `TonPayWidget` selects the TON Pay base URL internally, so the host app does not need to pass it as a prop. |
Contributor
There was a problem hiding this comment.
[HIGH] Ambiguous currency and asset prop behavior in widget API reference
The TonPayWidgetProps type defines both asset?: string; and currency?: string; as optional props without explaining their relationship or precedence. Elsewhere in the documentation, asset is presented as the primary way to select the token, which makes the additional undocumented currency prop ambiguous and potentially conflicting. This can confuse readers about which prop to use, and may lead to misuse or incorrect assumptions when passing values into the widget.
Please leave a reaction 👍/👎 to this suggestion to improve future reviews for everyone!
Contributor
|
Thanks for the updates to the TON Pay docs; I’ve left several suggestions across Per-comment submission: 12 posted, 1 failed. Unposted inline comments (raw text):
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
ecosystem/ton-pay/ui-integration/button-js.mdx (1)
141-163:⚠️ Potential issue | 🟡 MinorDocument the missing JS options (still out of parity with widget props).
Line 143+ checkout options still omit
referenceId, and Line 153+ button options still omitdisabled,isLoading,className, andstyle. If unsupported in JS, explicitly say so; otherwise add them for parity to prevent integration confusion.📌 Suggested doc patch
| `comment` | `string` | - | Payment comment added to the blockchain transaction. It maps to `commentToRecipient`. | +| `referenceId` | `string` | - | Merchant-defined identifier for reconciliation and tracking. | | Option | Type | Default | | -------------- | ------------------- | ----------- | | `variant` | `"long" \| "short"` | `"long"` | | `text` | `string` | - | | `bgColor` | `string` | `"#0098EA"` | | `textColor` | `string` | `"#FFFFFF"` | | `borderRadius` | `number \| string` | `8` | | `width` | `number \| string` | `"100%"` | | `height` | `number \| string` | `44` | | `fontFamily` | `string` | `"inherit"` | +| `disabled` | `boolean` | `false` | +| `isLoading` | `boolean` | `false` | +| `className` | `string` | - | +| `style` | `object` | - |#!/bin/bash # Verify whether docs/types mention the options claimed to be missing. rg -n -C2 'referenceId|disabled|isLoading|className|style|TonPayWidgetProps' ecosystem/ton-pay🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/ui-integration/button-js.mdx` around lines 141 - 163, The docs' options tables are missing parity with the widget props: add a `referenceId` entry under the checkout options and add `disabled`, `isLoading`, `className`, and `style` entries under the Button options (match types and defaults to the TonPayWidgetProps definitions), or if any of these are intentionally unsupported in the JS integration explicitly state "unsupported" next to the option; update the option names and default values to match TonPayWidgetProps and ensure the docs/types (e.g., TonPayWidgetProps) are referenced for consistency.
🧹 Nitpick comments (2)
ecosystem/ton-pay/ui-integration/button-js.mdx (1)
176-180: Reduce repeated sentence starts in fullscreen bullets.Lines 178–180 start three consecutive bullets with “It”, which reads repetitive. Small wording tweak would improve flow.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/ui-integration/button-js.mdx` around lines 176 - 180, The three bullets under the paragraph starting "The hosted widget always renders as a fullscreen overlay under `document.body`" repetitively start with "It"; rephrase those bullet sentences to vary sentence openings and improve flow (for example, start bullets with "Not clipped by...", "Not limited by...", "Consistent on...") while preserving the original meanings about clipping, layout limits, and behavior on Telegram Mini Apps; update the three lines in ecosystem/ton-pay/ui-integration/button-js.mdx accordingly.ecosystem/ton-pay/payment-integration/migration.mdx (1)
113-117: Consider varying repeated “Verify …” bullets for readability.The rollout validation list is good, but rephrasing a few items to avoid repeated sentence openings would read cleaner.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/payment-integration/migration.mdx` around lines 113 - 117, The repeated "Verify ..." sentence starters make the checklist monotonous—reword some bullets to vary sentence structure while preserving meaning; for example, change one to an imperative without "Verify" (e.g., "Confirm the hosted widget opens and closes correctly on testnet"), another to a noun phrase ("Handler payloads for onSuccess and onError are validated"), and another to a passive/contrast form ("Ensure no payment screen relies on TonConnectUIProvider, useTonPay, or direct TON Connect send logic"); update the remaining bullets similarly so each line remains a clear rollout check but uses varied phrasing for readability.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ecosystem/ton-pay/on-ramp.mdx`:
- Line 33: Replace the vague phrase "MoonPay-related helper calls" with concrete
documented capabilities provided by `@ton-pay/api`: list the exported functions
createTonPayTransfer, getTonPayTransferByBodyHash, and
getTonPayTransferByReference and briefly describe each (e.g.,
createTonPayTransfer — creates and signs a TON transfer for MoonPay payouts;
getTonPayTransferByBodyHash — fetches transfer metadata by request body hash;
getTonPayTransferByReference — retrieves transfer by provider reference id).
Update the sentence to point readers to these specific functions so developers
can find MoonPay-related helpers directly in the API reference.
---
Duplicate comments:
In `@ecosystem/ton-pay/ui-integration/button-js.mdx`:
- Around line 141-163: The docs' options tables are missing parity with the
widget props: add a `referenceId` entry under the checkout options and add
`disabled`, `isLoading`, `className`, and `style` entries under the Button
options (match types and defaults to the TonPayWidgetProps definitions), or if
any of these are intentionally unsupported in the JS integration explicitly
state "unsupported" next to the option; update the option names and default
values to match TonPayWidgetProps and ensure the docs/types (e.g.,
TonPayWidgetProps) are referenced for consistency.
---
Nitpick comments:
In `@ecosystem/ton-pay/payment-integration/migration.mdx`:
- Around line 113-117: The repeated "Verify ..." sentence starters make the
checklist monotonous—reword some bullets to vary sentence structure while
preserving meaning; for example, change one to an imperative without "Verify"
(e.g., "Confirm the hosted widget opens and closes correctly on testnet"),
another to a noun phrase ("Handler payloads for onSuccess and onError are
validated"), and another to a passive/contrast form ("Ensure no payment screen
relies on TonConnectUIProvider, useTonPay, or direct TON Connect send logic");
update the remaining bullets similarly so each line remains a clear rollout
check but uses varied phrasing for readability.
In `@ecosystem/ton-pay/ui-integration/button-js.mdx`:
- Around line 176-180: The three bullets under the paragraph starting "The
hosted widget always renders as a fullscreen overlay under `document.body`"
repetitively start with "It"; rephrase those bullet sentences to vary sentence
openings and improve flow (for example, start bullets with "Not clipped by...",
"Not limited by...", "Consistent on...") while preserving the original meanings
about clipping, layout limits, and behavior on Telegram Mini Apps; update the
three lines in ecosystem/ton-pay/ui-integration/button-js.mdx accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 088181ff-9322-4237-9171-3ef6ae94e012
📒 Files selected for processing (9)
ecosystem/ton-pay/api-reference.mdxecosystem/ton-pay/on-ramp.mdxecosystem/ton-pay/overview.mdxecosystem/ton-pay/payment-integration/migration.mdxecosystem/ton-pay/payment-integration/payments-react.mdxecosystem/ton-pay/payment-integration/payments-server-side.mdxecosystem/ton-pay/quick-start.mdxecosystem/ton-pay/ui-integration/button-js.mdxecosystem/ton-pay/ui-integration/button-react.mdx
✅ Files skipped from review due to trivial changes (3)
- ecosystem/ton-pay/payment-integration/payments-server-side.mdx
- ecosystem/ton-pay/quick-start.mdx
- ecosystem/ton-pay/ui-integration/button-react.mdx
🚧 Files skipped from review as they are similar to previous changes (3)
- ecosystem/ton-pay/overview.mdx
- ecosystem/ton-pay/payment-integration/payments-react.mdx
- ecosystem/ton-pay/api-reference.mdx
| No additional on-ramp setup is required for the default hosted flow. Render [`TonPayWidget`](/ecosystem/ton-pay/ui-integration/button-react) with the checkout parameters, and TON Pay determines whether to show the MoonPay top-up step. | ||
|
|
||
| Merchants using `TonPayButton` do not need to handle these events manually. | ||
| For [custom server-side flows](/ecosystem/ton-pay/payment-integration/payments-server-side) instead of the hosted widget, use `@ton-pay/api`, including MoonPay-related helper calls outside the widget flow. |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether public docs in this repo explicitly document MoonPay helper calls in `@ton-pay/api`.
rg -n -C3 'MoonPay|moonpay' ecosystem/ton-pay
rg -n -C3 '@ton-pay/api|createTonPayTransfer|getTonPayTransferByReference|getTonPayTransferByBodyHash' ecosystem/ton-payRepository: ton-org/docs
Length of output: 21078
🏁 Script executed:
# Check if there are any MoonPay-specific function signatures or details in api-reference.mdx
sed -n '127,250p' ecosystem/ton-pay/api-reference.mdx | head -100Repository: ton-org/docs
Length of output: 2425
Replace vague "MoonPay-related helper calls" with actual documented capabilities.
Line 33 references "MoonPay-related helper calls" as part of @ton-pay/api, but the API reference lists this only as a generic bullet point with no concrete function names or documentation. The three exported functions (createTonPayTransfer, getTonPayTransferByBodyHash, getTonPayTransferByReference) do not mention MoonPay in their descriptions. Developers searching for MoonPay-specific helpers will find nothing. Replace with concrete, documented capabilities:
✏️ Suggested rewording
-For [custom server-side flows](/ecosystem/ton-pay/payment-integration/payments-server-side) instead of the hosted widget, use `@ton-pay/api`, including MoonPay-related helper calls outside the widget flow.
+For [custom server-side flows](/ecosystem/ton-pay/payment-integration/payments-server-side) instead of the hosted widget, use `@ton-pay/api` for transfer creation, status lookups, and merchant-side reconciliation.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| For [custom server-side flows](/ecosystem/ton-pay/payment-integration/payments-server-side) instead of the hosted widget, use `@ton-pay/api`, including MoonPay-related helper calls outside the widget flow. | |
| For [custom server-side flows](/ecosystem/ton-pay/payment-integration/payments-server-side) instead of the hosted widget, use `@ton-pay/api` for transfer creation, status lookups, and merchant-side reconciliation. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@ecosystem/ton-pay/on-ramp.mdx` at line 33, Replace the vague phrase
"MoonPay-related helper calls" with concrete documented capabilities provided by
`@ton-pay/api`: list the exported functions createTonPayTransfer,
getTonPayTransferByBodyHash, and getTonPayTransferByReference and briefly
describe each (e.g., createTonPayTransfer — creates and signs a TON transfer for
MoonPay payouts; getTonPayTransferByBodyHash — fetches transfer metadata by
request body hash; getTonPayTransferByReference — retrieves transfer by provider
reference id). Update the sentence to point readers to these specific functions
so developers can find MoonPay-related helpers directly in the API reference.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
ecosystem/ton-pay/ui-integration/button-js.mdx (1)
153-163:⚠️ Potential issue | 🟡 MinorDocument button option parity (or explicitly mark unsupported fields).
The JS button options table still omits
disabled,isLoading,className, andstyle, while the React widget docs list them for the same widget surface. Please add them or explicitly state JS limitations.#!/bin/bash set -euo pipefail echo "=== JS docs: button options ===" rg -n -A20 -B2 '^### Button options' ecosystem/ton-pay/ui-integration/button-js.mdx echo echo "=== React docs: button props ===" rg -n -A35 -B2 '^### Button props' ecosystem/ton-pay/ui-integration/button-react.mdx🧩 Suggested table patch
| `height` | `number \| string` | `44` | | `fontFamily` | `string` | `"inherit"` | +| `disabled` | `boolean` | `false` | +| `isLoading` | `boolean` | `false` | +| `className` | `string` | - | +| `style` | `object` | - |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/ui-integration/button-js.mdx` around lines 153 - 163, The JS button options table is missing the fields present in the React widget (disabled, isLoading, className, style); update the "Button options" table so it either adds `disabled: boolean` (default `false`), `isLoading: boolean` (default `false`), `className: string` (default `-`), and `style: object|string` (default `-`) alongside existing entries like `variant`, `text`, `bgColor`, `textColor`, `borderRadius`, `width`, `height`, `fontFamily`, or, if those options are intentionally unsupported in the JS integration, add an explicit note under the table stating that `disabled`, `isLoading`, `className`, and `style` are not available in the JS button API and point readers to the React props for comparison.
🧹 Nitpick comments (1)
ecosystem/ton-pay/payment-integration/migration.mdx (1)
40-40: Keep checklist and “After” example aligned ononClose.Line 40 includes
onClosein the migration target callbacks, but the “After” sample only demonstratesonErrorandonSuccess. Either add a minimalonCloseexample or soften checklist wording.Also applies to: 93-99
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ecosystem/ton-pay/payment-integration/migration.mdx` at line 40, The checklist and the “After” example are out of sync: the checklist mentions an onClose callback but the After sample only shows onSuccess and onError; update the After example to include a minimal onClose callback (e.g., onClose: () => { /* handle modal close */ }) so the sample demonstrates the same three callbacks (onSuccess, onError, onClose) referenced in the checklist and matches the migration target; alternatively, if you prefer softer wording, change the checklist text to remove or make onClose optional so it matches the current After example.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@ecosystem/ton-pay/ui-integration/button-js.mdx`:
- Around line 153-163: The JS button options table is missing the fields present
in the React widget (disabled, isLoading, className, style); update the "Button
options" table so it either adds `disabled: boolean` (default `false`),
`isLoading: boolean` (default `false`), `className: string` (default `-`), and
`style: object|string` (default `-`) alongside existing entries like `variant`,
`text`, `bgColor`, `textColor`, `borderRadius`, `width`, `height`, `fontFamily`,
or, if those options are intentionally unsupported in the JS integration, add an
explicit note under the table stating that `disabled`, `isLoading`, `className`,
and `style` are not available in the JS button API and point readers to the
React props for comparison.
---
Nitpick comments:
In `@ecosystem/ton-pay/payment-integration/migration.mdx`:
- Line 40: The checklist and the “After” example are out of sync: the checklist
mentions an onClose callback but the After sample only shows onSuccess and
onError; update the After example to include a minimal onClose callback (e.g.,
onClose: () => { /* handle modal close */ }) so the sample demonstrates the same
three callbacks (onSuccess, onError, onClose) referenced in the checklist and
matches the migration target; alternatively, if you prefer softer wording,
change the checklist text to remove or make onClose optional so it matches the
current After example.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6428994b-f287-400c-9980-ef800db8f665
📒 Files selected for processing (7)
ecosystem/ton-pay/overview.mdxecosystem/ton-pay/payment-integration/migration.mdxecosystem/ton-pay/payment-integration/payments-react.mdxecosystem/ton-pay/payment-integration/payments-server-side.mdxecosystem/ton-pay/quick-start.mdxecosystem/ton-pay/ui-integration/button-js.mdxecosystem/ton-pay/ui-integration/button-react.mdx
✅ Files skipped from review due to trivial changes (2)
- ecosystem/ton-pay/payment-integration/payments-react.mdx
- ecosystem/ton-pay/payment-integration/payments-server-side.mdx
🚧 Files skipped from review as they are similar to previous changes (2)
- ecosystem/ton-pay/ui-integration/button-react.mdx
- ecosystem/ton-pay/quick-start.mdx
Contributor
|
@an-kor, CI is failing because the old TON Pay pages were removed but no redirects were added: Should we redirect all of them to the migration guide (/ecosystem/ton-pay/payment-integration/migration)? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TonPayWidgetcomponent.Closes [Ecosystem > TON Pay] New docs based on TON Pay Widget #2038
Summary by CodeRabbit
New Features
Documentation
Removed