Docs

useSendTransaction Customization

Learn how to customize the Pay interface when executing a transaction with useSendTransaction. You can find a selection of popular customizations below. For the full list of props, you can view the full reference.


Customize Supported Tokens

You can enable users to select your token on a given chain by passing an array of SupportedTokens. Note that this array overrides all default tokens listed for that chain.

const { mutate: sendTransaction } = useSendTransaction({
payModal: {
supportedTokens: {
"1": [
{
address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
name: "USD Coin",
symbol: "USDC",
icon: usdcIcon,
},
],
},
},
});

Prefill Destination Token

In the case you want your users to purchase your token by default in your application, you can choose to pre-fill the Pay purchase flow with prefillBuy .

For example, if you wanted users to only purchase Ethereum on Base network, you could do as follows:

import { base } from "thirdweb/chains";
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
prefillBuy: {
token: {
address: "0x866a087038f7C12cf33EF91aC5b1AcE6Ac1DA788",
name: "Base ETH",
symbol: "ETH",
icon: "...", // optional
},
chain: base,
allowEdits: {
amount: true, // allow editing buy amount
token: false, // disable selecting buy token
chain: false, // disable selecting buy chain
},
},
},
});

If you'd like to prefill a purchase with a native token, you can set the chain without passing a token:

const { mutate: sendTransaction } = useSendTransaction({
payModal: {
prefillBuy: {
chain: base,
},
},
});

Disable Payment Methods

In some cases, you may only want to show users fiat or crypto payment options for your onchain goods or services. You can do this by setting either buyWithCrypto or buyWithFiat to false.

Disable Buy With Crypto

const { mutate: sendTransaction } = useSendTransaction({
payModal: {
buyWithCrypto: false,
},
});

Disable Buy With Fiat

const { mutate: sendTransaction } = useSendTransaction({
payModal: {
buyWithFiat: false,
},
});

Theme

You can set the theme for the Pay component, which is set to "dark" by default. theme can be set to either "dark" , "light" or a custom theme object.

We have lightTheme or darkTheme providers that you can override to kickstart customization.

You can refer to our Theme page for a full view of customizable options if you’d prefer to create a custom theme from scratch.

Provided Themes

const { mutate: sendTransaction } = useSendTransaction({
payModal: {
theme: "dark", // or "light"
},
});

Custom Theme

import { darkTheme } from 'thirdweb/react';
// Using custom theme
const { mutate: sendTransaction } = useSendTransaction({
payModal: {
theme: darkTheme({ ... },
}}
);