> For the complete documentation index, see [llms.txt](https://docs.kima.network/kima-network/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kima.network/kima-network/the-kima-sdk/add-kima-widget-to-your-app/widget-payment-mode.md).

# Payment Mode

`mode = ModeOptions.payment`

Payment mode allows your users to pay for a product or service using stablecoins from any chain supported by Kima.

* The payment details are passed into the Widget via the `transactionOption` prop (required)
* The user can choose to pay from any [chain](/kima-network/supported-assets.md) and [token](/kima-network/supported-tokens.md) supported by Kima. The funds will be transferred to the wallet and chain specified in the `transactionOption` prop
* The title and subtitle can be customized using the `titleOption` and `paymentTitleOption` props

> ⚠️ `transactionOption.currency` must be a token symbol that is currently supported by Kima for the selected environment (`mainnet` or `testnet`) and selected chain. Resolve supported symbols dynamically from `/chains` in your backend. ℹ️ The example below uses `USDC`, which is valid on mainnet for Solana. If you are testing on Sardis, replace it with a supported testnet token such as `USDK`.

```tsx
import React from "react";

import {
  KimaTransactionWidget,
  KimaProvider,
  ModeOptions,
  ChainName,
  ColorModeOptions,
} from "@kimafinance/kima-transaction-widget";
import "@kimafinance/kima-transaction-widget/index.css";

const App = () => {
  return (
    <KimaProvider
      projectId='your-project-id'
      kimaBackendUrl="http://localhost:4000"
    >
      <KimaTransactionWidget
        theme={{ colorMode: ColorModeOptions.light }}
        mode={ModeOptions.payment}
        titleOption={{
          initialTitle: "New Purchase",
        }}
        paymentTitleOption={{
          title: "Buy MyFirst NFT",
          style: {
            fontSize: "1.2em",
            fontWeight: "500",
            color: "#DDDDDD",
          },
        }}
        transactionOption={{
          targetChain: ChainName.SOLANA,
          targetAddress: "5tvyUUqPMWVGaVsRXHoQWqGw6h9uifM45BHCTQgzwSdr",
          amount: 12.34,
          currency: "USDC",
        }}
      />
    </KimaProvider>
  );
};

export default App;
```

You should see a page that looks like this:

<figure><img src="/files/RJvw0BxQdVH7pQPHcfeo" alt=""><figcaption></figcaption></figure>

The payment (target) wallet and chain will show on the next step when the user completes the authorization for the transfer amount.

<figure><img src="/files/ts3OiZy7Wxk20YPNw1j3" alt=""><figcaption></figcaption></figure>

Once the user completes the authorization step and submits the transaction, the user can see the transaction status in the next step.

<figure><img src="/files/pXGFi9Yf4yGaqI5shmvy" alt=""><figcaption></figcaption></figure>

For more details on how to get transaction status of a previous transaction, check the [Widget Status Mode Section](/kima-network/the-kima-sdk/add-kima-widget-to-your-app/widget-status-mode.md).