diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
index be814a76..fc19e713 100644
--- a/examples/react/src/components/Connected.tsx
+++ b/examples/react/src/components/Connected.tsx
@@ -27,9 +27,8 @@ import {
   useWriteContract
 } from 'wagmi'
 
-import { messageToSign } from '../constants'
-import { abi } from '../constants/nft-abi'
-import { delay, getCheckoutSettings } from '../utils'
+import { messageToSign, abi } from '../constants'
+import { delay, getCheckoutSettings, getOrderbookCalldata } from '../utils'
 
 // append ?debug to url to enable debug mode
 const searchParams = new URLSearchParams(location.search)
@@ -242,22 +241,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 = ChainId.POLYGON
+      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 +376,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}`}
diff --git a/examples/react/src/constants/orderbook-abi.ts b/examples/react/src/constants/orderbook-abi.ts
new file mode 100644
index 00000000..93409fe2
--- /dev/null
+++ b/examples/react/src/constants/orderbook-abi.ts
@@ -0,0 +1 @@
+export const orderbookAbi = [{"inputs":[{"internalType":"uint256","name":"requestId","type":"uint256"},{"internalType":"uint256","name":"quantity","type":"uint256"},{"internalType":"address","name":"recipient","type":"address"},{"internalType":"uint256[]","name":"additionalFees","type":"uint256[]"},{"internalType":"address[]","name":"additionalFeeRecipients","type":"address[]"}],"name":"acceptRequest","outputs":[],"stateMutability":"nonpayable","type":"function"}]
\ No newline at end of file
diff --git a/examples/react/src/utils/helpers.ts b/examples/react/src/utils/helpers.ts
index 8fe98230..62cfa435 100644
--- a/examples/react/src/utils/helpers.ts
+++ b/examples/react/src/utils/helpers.ts
@@ -1,5 +1,7 @@
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
-import { Address } from 'viem'
+import { Hex, encodeFunctionData } from 'viem'
+
+import { orderbookAbi } from '../constants/orderbook-abi'
 
 export const truncateAtMiddle = (text: string, truncateAt: number) => {
   let finalText = text
@@ -19,35 +21,65 @@ export const delay = (ms: number) => {
   return new Promise(resolve => setTimeout(resolve, ms))
 }
 
-export const getCheckoutSettings = (
-  blockchainNftId: string,
-  recipientAddress: string | Address,
-  tokenContractAddress: string,
-  tokenId: string,
-  chainId: number,
-  quantity: number,
+export interface GetCheckoutSettings {
+  chainId: number
+  contractAddress: string
+  recipientAddress: string
+  currencyQuantity: string
+  currencySymbol: string
+  currencyAddress: string
+  currencyDecimals: string
+  nftId: string
+  nftAddress: string
+  nftQuantity: string
+  calldata: string
+  nftDecimals?: string
   isDev?: boolean
-) => {
+}
+
+export const getCheckoutSettings = (args: GetCheckoutSettings) => {
   const checkoutSettings: CheckoutSettings = {
-    sardineCheckout: {
-      chainId,
+    creditCardCheckout: {
       defaultPaymentMethodType: 'us_debit',
-      platform: 'horizon',
-      contractAddress: '0xB537a160472183f2150d42EB1c3DD6684A55f74c',
-      blockchainNftId: blockchainNftId,
-      recipientAddress: recipientAddress,
-      quantity,
-      isDev
+      onSuccess: (hash) => { console.log('credit card checkout success', hash) },
+      onError: (e) => { console.log('credit card checkout error', e) },
+      ...args
     },
     orderSummaryItems: [
       {
-        chainId,
-        contractAddress: tokenContractAddress,
-        tokenId,
-        quantityRaw: String(quantity)
+        chainId: args.chainId,
+        contractAddress: args.nftAddress,
+        tokenId: args.nftId,
+        quantityRaw: String(args.nftQuantity)
       }
     ]
   }
 
   return checkoutSettings
 }
+
+export interface GetOrderbookCalldata {
+  orderId: string,
+  quantity: string,
+  recipient: string,
+}
+
+export const getOrderbookCalldata = ({
+  orderId,
+  quantity,
+  recipient,
+}: GetOrderbookCalldata) => {
+  const calldata = encodeFunctionData({
+    abi: orderbookAbi,
+    functionName: 'acceptRequest',
+    args: [
+      BigInt(orderId),
+      BigInt(quantity),
+      recipient as Hex,
+      [],
+      []
+    ]
+  })
+
+  return calldata
+}
\ No newline at end of file
diff --git a/packages/checkout/src/api/data.ts b/packages/checkout/src/api/data.ts
index f9fd658b..2d1c2586 100644
--- a/packages/checkout/src/api/data.ts
+++ b/packages/checkout/src/api/data.ts
@@ -1,7 +1,7 @@
 import { TokenMetadata } from '@0xsequence/metadata'
 import { ChainId, networks } from '@0xsequence/network'
 
-import { SardineCheckout } from '../contexts/CheckoutModal'
+import { CreditCardCheckout } from '../contexts'
 
 export interface FetchSardineClientTokenReturn {
   token: string
@@ -13,7 +13,7 @@ export interface MethodArguments {
 }
 
 export const fetchSardineClientToken = async (
-  order: SardineCheckout,
+  order: CreditCardCheckout,
   isDev: boolean,
   projectAccessKey: string,
   tokenMetadata?: TokenMetadata
@@ -46,12 +46,17 @@ export const fetchSardineClientToken = async (
         imageUrl: tokenMetadata?.image || 'https://www.sequence.market/images/placeholder.png',
         network: networks[order.chainId as ChainId].name,
         recipientAddress: order.recipientAddress,
-        platform: 'horizon',
-        blockchainNftId: order.blockchainNftId,
         contractAddress: order.contractAddress,
+        platform: "calldata_execution",
         executionType: 'smart_contract',
-        quantity: Number(order.quantity),
-        decimals: Number(order.decimals)
+        blockchainNftId: order.nftId,
+        quantity: Number(order.nftQuantity),
+        decimals: Number(order?.nftDecimals || 0),
+        tokenAmount: order.currencyQuantity,
+        tokenAddress: order.currencyAddress,
+        tokenSymbol: order.currencySymbol,
+        tokenDecimals: Number(order.currencyDecimals),
+        callData: order.calldata,
       }
     })
   })
diff --git a/packages/checkout/src/contexts/CheckoutModal.ts b/packages/checkout/src/contexts/CheckoutModal.ts
index 7f018c87..9d383dda 100644
--- a/packages/checkout/src/contexts/CheckoutModal.ts
+++ b/packages/checkout/src/contexts/CheckoutModal.ts
@@ -16,22 +16,27 @@ interface OrderSummaryItem {
   tokenId: string
 }
 
-export interface SardineCheckout {
+export interface CreditCardCheckout {
   defaultPaymentMethodType: 'us_debit' | 'us_credit' | 'international_debit' | 'international_credit' | 'ach'
   chainId: number
-  platform: string
   contractAddress: string
-  blockchainNftId: string
   recipientAddress: string
-  quantity: number
-  decimals?: number
-  onSuccess?: (transactionHash: string, settings: SardineCheckout) => void
-  onError?: (error: Error, settings: SardineCheckout) => void
+  currencyQuantity: string
+  currencySymbol: string
+  currencyAddress: string
+  currencyDecimals: string
+  nftId: string
+  nftAddress: string
+  nftQuantity: string
+  nftDecimals?: string
+  calldata: string
+  onSuccess?: (transactionHash: string, settings: CreditCardCheckout) => void
+  onError?: (error: Error, settings: CreditCardCheckout) => void
   isDev?: boolean
 }
 
 export interface CheckoutSettings {
-  sardineCheckout?: SardineCheckout
+  creditCardCheckout?: CreditCardCheckout
   cryptoCheckout?: {
     chainId: number
     triggerTransaction: () => void
diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
index ec4681e0..91ca2b7a 100644
--- a/packages/checkout/src/views/CheckoutSelection/index.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -31,7 +31,7 @@ export const CheckoutSelection = () => {
   const projectAccessKey = useProjectAccessKey()
 
   const cryptoCheckoutSettings = settings?.cryptoCheckout
-  const creditCardCheckoutSettings = settings?.sardineCheckout
+  const creditCardCheckoutSettings = settings?.creditCardCheckout
   const displayCreditCardCheckout = !!creditCardCheckoutSettings
   const displayCryptoCheckout = !!cryptoCheckoutSettings
 
@@ -64,7 +64,7 @@ export const CheckoutSelection = () => {
 
   const orderSummaryItems = settings?.orderSummaryItems || []
 
-  const chainId = settings?.cryptoCheckout?.chainId || settings?.sardineCheckout?.chainId || 1
+  const chainId = settings?.cryptoCheckout?.chainId || settings?.creditCardCheckout?.chainId || 1
 
   const { data: tokensMetadata } = useTokenMetadata(chainId, orderSummaryItems[0].contractAddress, [orderSummaryItems[0].tokenId])
   const tokenMetadata = tokensMetadata ? tokensMetadata[0] : undefined
@@ -72,9 +72,9 @@ export const CheckoutSelection = () => {
   const triggerSardineTransaction = async () => {
     console.log('trigger sardine transaction')
 
-    if (settings?.sardineCheckout) {
-      const isDev = settings?.sardineCheckout?.isDev || false
-      const { token, orderId } = await fetchSardineClientToken(settings.sardineCheckout, isDev, projectAccessKey, tokenMetadata)
+    if (settings?.creditCardCheckout) {
+      const isDev = settings?.creditCardCheckout?.isDev || false
+      const { token, orderId } = await fetchSardineClientToken(settings.creditCardCheckout, isDev, projectAccessKey, tokenMetadata)
 
       setNavigation({
         location: 'transaction-pending',
@@ -84,7 +84,7 @@ export const CheckoutSelection = () => {
   }
 
   const onClickPayWithCard = () => {
-    if (settings?.sardineCheckout) {
+    if (settings?.creditCardCheckout) {
       triggerSardineTransaction()
     } else {
       setNavigation({
diff --git a/packages/checkout/src/views/PendingTransaction.tsx b/packages/checkout/src/views/PendingTransaction.tsx
index 28494966..05673b41 100644
--- a/packages/checkout/src/views/PendingTransaction.tsx
+++ b/packages/checkout/src/views/PendingTransaction.tsx
@@ -17,7 +17,7 @@ export const PendingTransaction = () => {
   const { setNavigation } = nav
   const projectAccessKey = useProjectAccessKey()
 
-  const isDev = settings?.sardineCheckout?.isDev || false
+  const isDev = settings?.creditCardCheckout?.isDev || false
   const url = isDev
     ? `https://crypto.sandbox.sardine.ai/?client_token=${authToken}&show_features=true`
     : `https://crypto.sardine.ai/?client_token=${authToken}&show_features=true`
@@ -25,7 +25,7 @@ export const PendingTransaction = () => {
   const pollForOrderStatus = async () => {
     try {
       console.log('Polling for transaction status')
-      const isDev = settings?.sardineCheckout?.isDev || false
+      const isDev = settings?.creditCardCheckout?.isDev || false
 
       const pollResponse = await fetchSardineOrderStatus(orderId, isDev, projectAccessKey)
       const status = pollResponse.resp.status
diff --git a/packages/checkout/src/views/TransactionError.tsx b/packages/checkout/src/views/TransactionError.tsx
index 5a5090d6..39bb8f39 100644
--- a/packages/checkout/src/views/TransactionError.tsx
+++ b/packages/checkout/src/views/TransactionError.tsx
@@ -12,7 +12,7 @@ export const TransactionError = () => {
   useEffect(() => {
     setTimeout(() => {
       closeCheckout()
-      settings?.sardineCheckout?.onError && settings?.sardineCheckout?.onError(navigation.params.error, settings?.sardineCheckout)
+      settings?.creditCardCheckout?.onError && settings?.creditCardCheckout?.onError(navigation.params.error, settings?.creditCardCheckout)
     }, 3000)
   }, [])
 
diff --git a/packages/checkout/src/views/TransactionSuccess.tsx b/packages/checkout/src/views/TransactionSuccess.tsx
index 803f9164..2f1a34d0 100644
--- a/packages/checkout/src/views/TransactionSuccess.tsx
+++ b/packages/checkout/src/views/TransactionSuccess.tsx
@@ -11,14 +11,14 @@ export const TransactionSuccess = () => {
   const nav = useNavigation()
   const navigation = nav.navigation as TransactionSuccessNavigation
 
-  const chainId = settings?.sardineCheckout?.chainId || ChainId.POLYGON
+  const chainId = settings?.creditCardCheckout?.chainId || ChainId.POLYGON
   const network = sequence.network.allNetworks.find(n => n.chainId === chainId)
 
   useEffect(() => {
-    settings?.sardineCheckout?.onSuccess &&
-      settings?.sardineCheckout?.onSuccess(navigation.params.transactionHash, settings?.sardineCheckout)
-    settings?.sardineCheckout?.onSuccess &&
-      settings?.sardineCheckout?.onSuccess(navigation.params.transactionHash, settings?.sardineCheckout)
+    settings?.creditCardCheckout?.onSuccess &&
+      settings?.creditCardCheckout?.onSuccess(navigation.params.transactionHash, settings?.creditCardCheckout)
+    settings?.creditCardCheckout?.onSuccess &&
+      settings?.creditCardCheckout?.onSuccess(navigation.params.transactionHash, settings?.creditCardCheckout)
   }, [])
 
   return (