> For the complete documentation index, see [llms.txt](https://docs.squidrouter.exchange/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.squidrouter.exchange/api-and-sdk-integration/chain-integration-guides/xrpl-integration/payment-widget.md). # Payment Widget The Squid Deposit Widget provides a streamlined deposit and payment flow for accepting cross-chain funds into an XRPL address. Unlike the Swap Widget, the destination is fixed by you (the integrator) — users only choose their source chain and token. The widget supports two modes: * **`deposit`** — The user enters the amount to send. Use this for account funding, top-ups, and any open-ended deposit flow. * **`payment`** — You fix the amount. Use this for checkout, invoices, and pay-this-amount flows. You can prototype and customize your widget configuration interactively using the [**Widget Studio**](https://studio.squidrouter.exchange/). *** ## Installation Install the Deposit Widget package: ```bash npm install @0xsquid/deposit-widget ``` Or with yarn: ```bash yarn add @0xsquid/deposit-widget ``` For framework-specific setup (React, Next.js, Vite), see the [Deposit Widget installation guides](/widget-integration/add-a-widget/deposit-widget/installing-the-widget.md). *** ## Configuration for XRPL The Deposit Widget takes a single `config` prop, typed as `DepositConfig`. To target XRPL, set the `destinationToken.chainId` to `"xrpl-mainnet"` and the `destinationToken.address` to one of the supported XRPL token addresses. ### Supported XRPL Destination Tokens | Token | Address | | --------- | ----------------------------------------------------------------------------- | | **XRP** | `xrp` | | **RLUSD** | `524c555344000000000000000000000000000000.rmxckbedwqr76quhesumdegf4b9xj8m5de` | | **SOIL** | `534F494C00000000000000000000000000000000.rfmS3zqrQrka8wVyhXifEeyTwe8AMz2Yhw` | | **USDC** | `5553444300000000000000000000000000000000.rGm7WCVp9gb4jZHWTEtGUr4dd74z2XuWhE` | ### Config Fields | Field | Type | Required | Description | | -------------------------- | ------------------------ | --------------------- | --------------------------------------------------------------------------------------------------- | | `mode` | `"deposit" \| "payment"` | ✅ | Selects the widget flow. In `"payment"` mode, `amount` is required. | | `amount` | `string` | ✅ (payment mode only) | Fixed amount the user will pay, in destination-token units (human-readable string, e.g. `"50.00"`). | | `destinationAddress` | `string` | ✅ | The XRPL address that receives the deposit (e.g. `"rYourXRPLAddress"`). | | `destinationToken.address` | `string` | ✅ | Token address on XRPL (see table above). | | `destinationToken.chainId` | `string` | ✅ | Set to `"xrpl-mainnet"` for XRPL. | | `integrator.id` | `string` | ✅ | Your Integrator ID. | | `integrator.name` | `string` | ✅ | Displayed in the widget header. | | `integrator.logoUrl` | `string` | ✅ | URL of your logo, displayed alongside the name. | | `apiUrl` | `string` | ❌ | Override the Squid API endpoint. Defaults to Squid's production API. | | `theme` | `Theme` | ❌ | Theme object for visual customization. | | `themeType` | `"light" \| "dark"` | ❌ | Base palette. Defaults to `"light"`. | *** ## Deposit Mode — Fund an XRPL Account Use deposit mode when the user chooses how much to send. This is ideal for account funding, top-ups, or open-ended deposits. ### Deposit XRP ```tsx import { DepositWidget, type DepositConfig } from "@0xsquid/deposit-widget"; const config: DepositConfig = { mode: "deposit", destinationAddress: "rYourXRPLAddress", destinationToken: { address: "xrp", chainId: "xrpl-mainnet", }, integrator: { id: "", name: "Your App", logoUrl: "https://your.app/logo.png", }, }; function App() { return ; } ``` ### Deposit RLUSD ```tsx const config: DepositConfig = { mode: "deposit", destinationAddress: "rYourXRPLAddress", destinationToken: { address: "524c555344000000000000000000000000000000.rmxckbedwqr76quhesumdegf4b9xj8m5de", chainId: "xrpl-mainnet", }, integrator: { id: "", name: "Your App", logoUrl: "https://your.app/logo.png", }, }; ``` *** ## Payment Mode — Fixed-Amount Payments on XRPL Use payment mode when you set the exact amount. This is ideal for checkout flows, invoices, and pay-this-amount scenarios. ### Pay 50 RLUSD to an XRPL Address ```tsx import { DepositWidget, type DepositConfig } from "@0xsquid/deposit-widget"; const config: DepositConfig = { mode: "payment", amount: "50.00", destinationAddress: "rYourXRPLAddress", destinationToken: { address: "524c555344000000000000000000000000000000.rmxckbedwqr76quhesumdegf4b9xj8m5de", chainId: "xrpl-mainnet", }, integrator: { id: "", name: "Your App", logoUrl: "https://your.app/logo.png", }, }; function App() { return ; } ``` ### Pay 100 XRP ```tsx const config: DepositConfig = { mode: "payment", amount: "100", destinationAddress: "rYourXRPLAddress", destinationToken: { address: "xrp", chainId: "xrpl-mainnet", }, integrator: { id: "", name: "Your App", logoUrl: "https://your.app/logo.png", }, }; ``` *** ## Theme Customization To customize the widget's appearance: 1. Use the [Widget Studio](https://studio.squidrouter.exchange/) to generate a custom theme. 2. Copy the generated `theme` (and `themeType`) and paste them into your `config`. ```tsx const config: DepositConfig = { mode: "deposit", destinationAddress: "rYourXRPLAddress", destinationToken: { address: "xrp", chainId: "xrpl-mainnet", }, integrator: { id: "", name: "Your App", logoUrl: "https://your.app/logo.png", }, themeType: "dark", theme: { // Your custom theme overrides }, }; ``` *** ## Next Steps * For full Deposit Widget documentation (installation, theming, all config options), see the [Deposit Widget docs](/widget-integration/add-a-widget/deposit-widget.md) * Need a full swap UI where the user picks both source and destination? See the [Swap Widget](/api-and-sdk-integration/chain-integration-guides/xrpl-integration/swap-widget.md) * For programmatic control, see the [API & SDK](/api-and-sdk-integration/chain-integration-guides/xrpl-integration/api-and-sdk.md) guide --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.squidrouter.exchange/api-and-sdk-integration/chain-integration-guides/xrpl-integration/payment-widget.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.