Guides

How to Generate Calldata for NFT Checkout

Generate the smart contract call data required for Transak NFT Checkout
View as Markdown

What is calldata?

Calldata is the encoded hex data for the smart contract function that Transak will execute during NFT Checkout.

It tells the contract:

  • which function to call
  • which arguments to pass
  • the exact order and format of those arguments

For NFT Checkout, you generate this calldata from your contract ABI and function inputs, then pass it to Transak as the calldata parameter.

Prerequisite: Partner setup before you start

Before you generate calldata, make sure you already have:

  • The ABI for the contract function that should be executed
  • The exact function name
  • The exact arguments in the correct order
  • The Transak NFT Checkout smart contract address for the target chain if your function accepts a recipient wallet address such as to, recipient, or buyer

If you use a proxy contract, encode the calldata with the ABI of the implementation contract, not the proxy.

If your function accepts a wallet parameter such as to, recipient, or buyer, pass Transak’s NFT Checkout smart contract address for that chain instead of the end user’s wallet address.

Use NFT Checkout smart contract addresses to get the correct chain-specific address.

How to generate calldata

1

Declare the ABI

1const getSupplyCalldata = (contributor: string, amount: number | null) => {
2  if (!amount) return;
3
4  /**
5   * ABI for Supply function on AAVE SmartContract
6   * You can find ABI of AAVE contract here:
7   * https://mumbai.polygonscan.com/address/0xbadd48c3eb42a10db791d7b02e3c07fbf95b3155#code
8   */
9  let ABI = [
10    {
11      inputs: [
12        {
13          internalType: "contract IPoolAddressesProvider",
14          name: "provider",
15          type: "address",
16        },
17      ],
18      stateMutability: "nonpayable",
19      type: "constructor",
20    },
21    {
22      anonymous: false,
23      inputs: [
24        {
25          indexed: true,
26          internalType: "address",
27          name: "reserve",
28          type: "address",
29        },
30        {
31          indexed: true,
32          internalType: "address",
33          name: "backer",
34          type: "address",
35        },
36        {
37          indexed: false,
38          internalType: "uint256",
39          name: "amount",
40          type: "uint256",
41        },
42        {
43          indexed: false,
44          internalType: "uint256",
45          name: "fee",
46          type: "uint256",
47        },
48      ],
49      name: "BackUnbacked",
50      type: "event",
51    },
52    {
53      anonymous: false,
54      inputs: [
55        {
56          indexed: true,
57          internalType: "address",
58          name: "reserve",
59          type: "address",
60        },
61        {
62          indexed: false,
63          internalType: "address",
64          name: "user",
65          type: "address",
66        },
67        // ABI shortened here for practical purposes
68      ],
69      name: "BalanceTransfer",
70      type: "event",
71    },
72  ];
73};
2

Contructing the calldata

1let parsedAmmount = parseUnits(amount.toString(), 8);
2// Constructing the CallData
3return new Interface(ABI).encodeFunctionData("supply", [
4  "0x2Fa2e7a6dEB7bb51B625336DBe1dA23511914a8A", // asset contract address for WBTC as an example on mumbai testnet
5  parsedAmmount, // amount user wants to buy
6  contributor, // address of the user who is depositing the funds
7  0, // referal code. Will be 0 in case of aave
8]);
3

Get the calldata

1export default function App() {
2  useEffect(() => {
3    const depositAmount = 0.0008; // amount user want to deposit to protocol
4
5    const calldata = getSupplyCalldata(
6      USER_WALLET_ADDRESS, // user wallet address
7      depositAmount // amount user want to deposit. Transak will convert it to the fiat equivalent and display it to the user
8    );
9  }
10}
4

Pass the calldata to Transak

If you are passing calldata through a widget URL or through createWidgetUrl, pass the raw hex string directly as the calldata value.

Create Widget URL
$curl --request POST \
> --url https://api-gateway-stg.transak.com/api/v2/auth/session \
> --header 'accept: application/json' \
> --header 'access-token: YOUR_ACCESS_TOKEN' \
> --header 'content-type: application/json' \
> --data '{
>"widgetParams": { 
>  "apiKey": "API_KEY", 
>  "walletAddress": "USER_WALLET_ADDRESS", 
>  "isNFT": true, 
>  "calldata": "0xsdad....", 
>  "nftData": [
>    {
>      imageURL: "https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/1.png", // string
>      nftName: "Pokemon Metadata Legends",                                            // string
>      collectionAddress: "0x8a20e9e8e736643161ce6a2fe8dd8dd62050cd1e",               // string
>      tokenID: ["6", "7", "8"],                                                      // string[]
>      price: [15, 15, 15],                                                           // number[]
>      quantity: 3,                                                                   // number
>      nftType: "ERC721"                                                              // "ERC721" | "ERC1155"
>    }
>  ],
>  "contractId": "6965438baf941bf38cd", 
>}

If you use the SDK, pass the raw calldata directly in the SDK configuration.

Full Example To Generate Calldata

1const getSupplyCalldata = (contributor: string, amount: number | null) => {
2  if (!amount) return;
3
4  /**
5   * ABI for Supply function on AAVE SmartContract
6   * You can find ABI of AAVE contract here:
7   * https://mumbai.polygonscan.com/address/0xbadd48c3eb42a10db791d7b02e3c07fbf95b3155#code
8   */
9  let ABI = [
10    {
11      inputs: [
12        {
13          internalType: "contract IPoolAddressesProvider",
14          name: "provider",
15          type: "address",
16        },
17      ],
18      stateMutability: "nonpayable",
19      type: "constructor",
20    },
21    {
22      anonymous: false,
23      inputs: [
24        {
25          indexed: true,
26          internalType: "address",
27          name: "reserve",
28          type: "address",
29        },
30        {
31          indexed: true,
32          internalType: "address",
33          name: "backer",
34          type: "address",
35        },
36        {
37          indexed: false,
38          internalType: "uint256",
39          name: "amount",
40          type: "uint256",
41        },
42        {
43          indexed: false,
44          internalType: "uint256",
45          name: "fee",
46          type: "uint256",
47        },
48      ],
49      name: "BackUnbacked",
50      type: "event",
51    },
52    {
53      anonymous: false,
54      inputs: [
55        {
56          indexed: true,
57          internalType: "address",
58          name: "reserve",
59          type: "address",
60        },
61        {
62          indexed: false,
63          internalType: "address",
64          name: "user",
65          type: "address",
66        },
67        // ABI shortened here for practical purposes
68      ],
69      name: "BalanceTransfer",
70      type: "event",
71    },
72  ];
73
74  let parsedAmount = parseUnits(amount.toString(), 8);
75
76  return new Interface(ABI).encodeFunctionData("supply", [
77    "0x2Fa2e7a6dEB7bb51B625336DBe1dA23511914a8A", // asset contract address for WBTC on Mumbai testnet
78    parsedAmount, // amount user wants to buy
79    contributor, // address of the user who is depositing the funds
80    0, // referral code. Will be 0 in case of AAVE
81  ]);
82};
83
84// Create Widget URL API
85
86const calldata = getSupplyCalldata(USER_WALLET_ADDRESS, 0.0008);
87
88console.log("Use this in the SDK config:", calldata);
89console.log(
90  "Or pass it in the widget URL:",
91  `"widgetParams": { calldata: ${calldata} }`
92);