> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polygon.technology/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK quickstart

> Install the SDK and drop in a payment widget in under five minutes.

<Note>
  Cross-chain payments use a separate API key from the OMS Payments API. Get yours from the [Trails Dashboard](https://dashboard.trails.build) while the two systems share authentication.
</Note>

The SDK is a React component library that handles funding flows, cross-chain routing, and fiat on-ramps. You drop in a component; the SDK handles routing, execution, and state.

## Install

<CodeGroup>
  ```bash npm theme={null}
  npm install 0xtrails
  ```

  ```bash pnpm theme={null}
  pnpm add 0xtrails
  ```

  ```bash yarn theme={null}
  yarn add 0xtrails
  ```
</CodeGroup>

React 18 or later is required. React 19.1+ is recommended for best compatibility.

## Drop in a component

The `Fund` component opens a payment widget that accepts card, bank, exchange, and wallet funding. Import it directly and pass the destination plus an optional callback. There is no provider to set up.

```tsx FundButton.tsx theme={null}
import { Fund } from "0xtrails";

export function FundButton() {
  return (
    <Fund
      apiKey="YOUR_API_KEY"
      to={{
        recipient: "0xYOUR_PRODUCT_WALLET",
        token: "USDC",
        chain: "polygon",
      }}
      onFundingSuccess={(result) => {
        console.log("Funded:", result);
      }}
    />
  );
}
```

The widget renders inline or as a modal depending on your layout. See [Configuration](/cross-chain/sdk/configuration) for the full props reference.

## Fund directly into a product action

Pass `to.calldata` to encode a destination action that executes automatically when funds arrive. A customer can fund from a debit card and deposit into a yield vault in one step. Use `dynamic()` in the encoded args wherever the arrived amount should appear:

```tsx VaultFundButton.tsx theme={null}
import { Fund, dynamic } from "0xtrails";
import { encodeFunctionData } from "viem";

const calldata = encodeFunctionData({
  abi: VAULT_ABI,
  functionName: "deposit",
  args: [dynamic(), "0xCUSTOMER_ADDRESS"],
});

export function VaultFundButton() {
  return (
    <Fund
      apiKey="YOUR_API_KEY"
      to={{
        recipient: "0xYOUR_VAULT_CONTRACT",
        token: "USDC",
        chain: "polygon",
        calldata,
      }}
      onFundingSuccess={(result) => {
        console.log("Deposited:", result);
      }}
    />
  );
}
```

See [Dynamic values](/cross-chain/sdk/composable-actions/dynamic-values) for how `dynamic()` resolves at execution time.

## Non-React sites

For pages without React, load the widget via CDN:

```html theme={null}
<div id="trails-widget"></div>
<script src="https://cdn.trails.build/widget.js"></script>
<script>
  TrailsWidget.init({
    containerId: "trails-widget",
    accessKey: "YOUR_ACCESS_KEY",
    mode: "fund",
    destinationChainId: 137,
    destinationTokenAddress: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
    destinationToAddress: "0xYOUR_PRODUCT_WALLET",
  });
</script>
```

<Note>
  For direct server-side control without a UI layer, use the [direct API](/cross-chain/api-reference/overview) instead.
</Note>