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.

---

Installation

Install the Deposit Widget package:

npm install @0xsquid/deposit-widget

Or with yarn:

yarn add @0xsquid/deposit-widget

For framework-specific setup (React, Next.js, Vite), see the Deposit Widget installation guides.

---

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

import { DepositWidget, type DepositConfig } from "@0xsquid/deposit-widget";

const config: DepositConfig = {
  mode: "deposit",
  destinationAddress: "rYourXRPLAddress",
  destinationToken: {
    address: "xrp",
    chainId: "xrpl-mainnet",
  },
  integrator: {
    id: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};

function App() {
  return <DepositWidget config={config} />;
}

Deposit RLUSD

const config: DepositConfig = {
  mode: "deposit",
  destinationAddress: "rYourXRPLAddress",
  destinationToken: {
    address: "524c555344000000000000000000000000000000.rmxckbedwqr76quhesumdegf4b9xj8m5de",
    chainId: "xrpl-mainnet",
  },
  integrator: {
    id: "<your-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

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: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};

function App() {
  return <DepositWidget config={config} />;
}

Pay 100 XRP

const config: DepositConfig = {
  mode: "payment",
  amount: "100",
  destinationAddress: "rYourXRPLAddress",
  destinationToken: {
    address: "xrp",
    chainId: "xrpl-mainnet",
  },
  integrator: {
    id: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};

---

Theme Customization

To customize the widget's appearance:

1. Use the Widget Studio to generate a custom theme.

2. Copy the generated theme (and themeType) and paste them into your config.

const config: DepositConfig = {
  mode: "deposit",
  destinationAddress: "rYourXRPLAddress",
  destinationToken: {
    address: "xrp",
    chainId: "xrpl-mainnet",
  },
  integrator: {
    id: "<your-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

• Need a full swap UI where the user picks both source and destination? See the Swap Widget

• For programmatic control, see the API & SDK guide