> ## 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.

# Pay component

> Accept exact-output payments where the recipient receives a precise amount regardless of the sender's source token.

The `Pay` component handles exact-output payment flows. You specify the precise amount the recipient receives; the SDK figures out how much the sender needs to send based on their chosen token, chain, and current rates.

## Basic usage

```tsx theme={null}
import { Pay } from "0xtrails";

<Pay
  apiKey="YOUR_API_KEY"
  to={{
    recipient: "0xMERCHANT_ADDRESS",
    token: "USDC",
    chain: "polygon",
    amount: "49.99",
  }}
  onPaymentSuccess={(result) => console.log("Paid:", result)}
/>
```

## Fund into a contract action

Pass `to.calldata` to execute a contract call alongside the payment. Use `dynamic()` in the encoded args wherever the arrived amount should appear:

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

const calldata = encodeFunctionData({
  abi: NFT_ABI,
  functionName: "mint",
  args: [dynamic(), "0xBUYER_ADDRESS"],
});

<Pay
  apiKey="YOUR_API_KEY"
  to={{
    recipient: "0xNFT_CONTRACT",
    token: "ETH",
    chain: "ethereum",
    amount: "0.05",
    calldata,
  }}
/>
```

## Props reference

| Prop | Type | Required | Description |
| - | - | - | - |
| `apiKey` | string | Yes | Your API key |
| `to.recipient` | string | Yes | Destination wallet or contract address |
| `to.token` | string | Yes | ERC20 symbol or address the recipient receives |
| `to.chain` | string \| number | Yes | Destination chain |
| `to.amount` | string | Yes | Exact amount the recipient receives (human-readable) |
| `to.calldata` | string | No | ABI-encoded calldata to execute at the destination |
| `from.token` | string | No | Pre-select the sender's source ERC20 |
| `from.currency` | string | No | Pre-select the sender's source fiat currency (for fiat funding flows) |
| `from.chain` | string \| number | No | Pre-select the sender's source chain |
| `paymentMethod` | string | No | Pre-select funding method: `"CONNECTED_WALLET"`, `"CRYPTO_TRANSFER"`, `"CREDIT_DEBIT_CARD"`, `"EXCHANGE"` |
| `onPaymentStart` | function | No | Called when the user begins the flow |
| `onPaymentSuccess` | function | No | Called on completion |
| `onPaymentError` | function | No | Called on failure |

For appearance and wallet options, see [SDK configuration](/cross-chain/sdk/configuration).