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