How to Generate Calldata for NFT Checkout

Generate the smart contract call data required for Transak NFT Checkout

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

Declare the ABI

1 const 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 };

Contructing the calldata

1 let parsedAmmount = parseUnits(amount.toString(), 8);
2 // Constructing the CallData
3 return 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 ]);

Get the calldata

1 export 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 }

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

1 const 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 
86 const calldata = getSupplyCalldata(USER_WALLET_ADDRESS, 0.0008);
87 
88 console.log("Use this in the SDK config:", calldata);
89 console.log(
90   "Or pass it in the widget URL:",
91   `"widgetParams": { calldata: ${calldata} }`
92 );

1	const 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	};

1	let parsedAmmount = parseUnits(amount.toString(), 8);
2	// Constructing the CallData
3	return 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	]);

1	export 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	}

$	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",
>	}