diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
index 6567c134..cdcdc025 100644
--- a/examples/react/src/components/Connected.tsx
+++ b/examples/react/src/components/Connected.tsx
@@ -27,7 +27,7 @@ import {
 } from 'wagmi'
 
 import { messageToSign, abi } from '../constants'
-import { delay, getCheckoutSettings } from '../utils'
+import { delay, getCheckoutSettings, getOrderbookCalldata } from '../utils'
 
 import { Header } from './Header'
 
@@ -242,22 +242,36 @@ export const Connected = () => {
     })
   }
 
-  // const onClickCheckout = () => {
-  //   setIsCheckoutInfoModalOpen(true)
-  // }
+  const onClickCheckout = () => {
+    setIsCheckoutInfoModalOpen(true)
+  }
 
   const onCheckoutInfoConfirm = () => {
     setIsCheckoutInfoModalOpen(false)
     if (checkoutOrderId !== '' && checkoutTokenContractAddress !== '' && checkoutTokenId !== '') {
-      const checkoutSettings = getCheckoutSettings(
-        checkoutOrderId,
-        address || '',
-        checkoutTokenContractAddress,
-        checkoutTokenId,
-        ChainId.POLYGON,
-        1,
-        true
-      )
+      const chainId = 137
+      const orderbookAddress = '0xB537a160472183f2150d42EB1c3DD6684A55f74c'
+      const recipientAddress = address || ''
+      const nftQuantity = '1'
+
+      const checkoutSettings = getCheckoutSettings({
+        chainId,
+        contractAddress: orderbookAddress,
+        recipientAddress,
+        currencyQuantity: '100000',
+        currencySymbol: 'USDC',
+        currencyAddress: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359',
+        currencyDecimals: '6',
+        nftId: checkoutTokenId,
+        nftAddress: checkoutTokenContractAddress,
+        nftQuantity, 
+        isDev: true,
+        calldata: getOrderbookCalldata({
+          orderId: checkoutOrderId,
+          quantity: nftQuantity,
+          recipient: recipientAddress
+        }),
+      })
       triggerCheckout(checkoutSettings)
     }
   }
@@ -363,13 +377,17 @@ export const Connected = () => {
               )}
 
             {isDebugMode && (
-              <CardButton title="Generate EthAuth proof" description="Generate EthAuth proof" onClick={generateEthAuthProof} />
+              <>
+                <CardButton title="Generate EthAuth proof" description="Generate EthAuth proof" onClick={generateEthAuthProof} />
+
+                <CardButton
+                  title="NFT Checkout"
+                  description="Set orderbook order id, token contract address and token id to test checkout (on Polygon)"
+                  onClick={onClickCheckout}
+                />
+              </>
             )}
-            {/* <CardButton
-        title="NFT Checkout"
-        description="Set orderbook order id, token contract address and token id to test checkout (on Polygon)"
-        onClick={onClickCheckout}
-      /> */}
+
             <CardButton
               title="Switch network"
               description={`Current network: ${networkForCurrentChainId.title}`}