From 5acc26fd9bae823920862eff65f5f5f2845cdc64 Mon Sep 17 00:00:00 2001
From: samuelea <batonenbois@gmail.com>
Date: Thu, 2 May 2024 11:15:28 -0400
Subject: [PATCH] added sardine integration

---
 examples/react/src/components/Homepage.tsx    | 103 +++++++-
 examples/react/src/utils/helpers.ts           |  36 +++
 examples/react/src/utils/index.ts             |   1 -
 examples/react/src/utils/settings.ts          |  30 ---
 packages/checkout/src/api/data.ts             | 227 +++++++++++++-----
 .../checkout/src/contexts/CheckoutModal.tsx   |  31 +--
 packages/checkout/src/contexts/Navigation.tsx |   3 +-
 .../shared/components/KitCheckoutProvider.tsx |  30 +--
 .../shared/components/NavigationHeader.tsx    |   2 +-
 .../shared/components/PaperTransaction.tsx    | 190 ---------------
 .../component/OrderSummaryItem.tsx            |   2 +-
 .../src/views/CheckoutSelection/index.tsx     |  79 ++++--
 .../src/views/PaperTransactionForm.tsx        |  23 --
 .../checkout/src/views/PendingTransaction.tsx |  65 +++--
 .../checkout/src/views/TransactionError.tsx   |   2 +-
 .../checkout/src/views/TransactionSuccess.tsx |  26 +-
 packages/checkout/src/views/index.ts          |   1 -
 17 files changed, 443 insertions(+), 408 deletions(-)
 delete mode 100644 examples/react/src/utils/settings.ts
 delete mode 100644 packages/checkout/src/shared/components/PaperTransaction.tsx
 delete mode 100644 packages/checkout/src/views/PaperTransactionForm.tsx

diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
index c1343b43..d588e793 100644
--- a/examples/react/src/components/Homepage.tsx
+++ b/examples/react/src/components/Homepage.tsx
@@ -5,7 +5,8 @@ import {
   validateEthProof,
   useTheme as useKitTheme,
   useWaasFeeOptions,
-  useIndexerClient
+  useIndexerClient,
+  getModalPositionCss
 } from '@0xsequence/kit'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { useCheckoutModal } from '@0xsequence/kit-checkout'
@@ -36,9 +37,12 @@ import {
   Switch,
   Select,
   IconButton,
-  CheckmarkIcon
+  CheckmarkIcon,
+  Modal,
+  TextInput
 } from '@0xsequence/design-system'
 import { allNetworks } from '@0xsequence/network'
+import { AnimatePresence } from 'framer-motion'
 import { Footer } from './Footer'
 import { messageToSign } from '../constants'
 import { delay, formatAddress, getCheckoutSettings } from '../utils'
@@ -63,6 +67,12 @@ export const Homepage = () => {
   const { data: walletClient } = useWalletClient()
   const { switchChain } = useSwitchChain()
 
+  const [isCheckoutInfoModalOpen, setIsCheckoutInfoModalOpen] = React.useState(false)
+
+  const [checkoutOrderId, setCheckoutOrderId] = React.useState('')
+  const [checkoutTokenContractAddress, setCheckoutTokenContractAddress] = React.useState('')
+  const [checkoutTokenId, setCheckoutTokenId] = React.useState('')
+
   const connections = useConnections()
 
   const isWaasConnection = connections.find(c => c.connector.id.includes('waas')) !== undefined
@@ -324,7 +334,23 @@ export const Homepage = () => {
   }
 
   const onClickCheckout = () => {
-    triggerCheckout(getCheckoutSettings(address))
+    setIsCheckoutInfoModalOpen(true)
+  }
+
+  const onCheckoutInfoConfirm = () => {
+    setIsCheckoutInfoModalOpen(false)
+    if (checkoutOrderId !== '' && checkoutTokenContractAddress !== '' && checkoutTokenId !== '') {
+      const checkoutSettings = getCheckoutSettings(
+        checkoutOrderId,
+        address || '',
+        checkoutTokenContractAddress,
+        checkoutTokenId,
+        137,
+        1,
+        true
+      )
+      triggerCheckout(checkoutSettings)
+    }
   }
 
   const SwitchThemeButton = () => {
@@ -370,11 +396,11 @@ export const Homepage = () => {
                 description="Connect a Sequence wallet to view, swap, send, and receive collections"
                 onClick={() => setOpenWalletModal(true)}
               />
-              {/* <ClickableCard
-                title="Checkout"
-                description="Checkout screen before placing a purchase on coins or collections"
+              <ClickableCard
+                title="Sardine Checkout"
+                description="Set orderbook order id, token contract address and token id to test checkout (on Polygon)"
                 onClick={onClickCheckout}
-              /> */}
+              />
               <ClickableCard
                 title="Send transaction"
                 description="Send a transaction with your wallet"
@@ -615,6 +641,69 @@ export const Homepage = () => {
       </Box>
 
       {!isMobile && <Footer />}
+
+      <AnimatePresence>
+        {isCheckoutInfoModalOpen && (
+          <Modal
+            contentProps={{
+              style: {
+                maxWidth: '400px',
+                height: 'auto',
+                ...getModalPositionCss('center')
+              }
+            }}
+            scroll={false}
+            backdropColor="backgroundBackdrop"
+            onClose={() => setIsCheckoutInfoModalOpen(false)}
+          >
+            <Box id="sequence-kit-checkout-info-modal">
+              <Box paddingTop="16" paddingBottom="8" paddingX="6" gap="2" flexDirection="column">
+                <Text variant="medium" color="text50">
+                  Order ID
+                </Text>
+                <TextInput
+                  autoFocus
+                  name="orderId"
+                  value={checkoutOrderId}
+                  onChange={ev => setCheckoutOrderId(ev.target.value)}
+                  placeholder="Order Id"
+                  data-1p-ignore
+                />
+                <Text variant="medium" color="text50">
+                  Token Contract Address
+                </Text>
+                <TextInput
+                  autoFocus
+                  name="tokenContractAddress"
+                  value={checkoutTokenContractAddress}
+                  onChange={ev => setCheckoutTokenContractAddress(ev.target.value)}
+                  placeholder="Token Contract Address"
+                  data-1p-ignore
+                />
+                <Text variant="medium" color="text50">
+                  Token ID
+                </Text>
+                <TextInput
+                  autoFocus
+                  name="tokenId"
+                  value={checkoutTokenId}
+                  onChange={ev => setCheckoutTokenId(ev.target.value)}
+                  placeholder="Token Id"
+                  data-1p-ignore
+                />
+
+                <Button
+                  marginTop="4"
+                  onClick={() => {
+                    onCheckoutInfoConfirm()
+                  }}
+                  label="Trigger checkout"
+                />
+              </Box>
+            </Box>
+          </Modal>
+        )}
+      </AnimatePresence>
     </Box>
   )
 }
diff --git a/examples/react/src/utils/helpers.ts b/examples/react/src/utils/helpers.ts
index fda8355a..0d50adf0 100644
--- a/examples/react/src/utils/helpers.ts
+++ b/examples/react/src/utils/helpers.ts
@@ -1,3 +1,6 @@
+import { Address } from 'viem'
+import { CheckoutSettings } from '@0xsequence/kit-checkout'
+
 export const truncateAtMiddle = (text: string, truncateAt: number) => {
   let finalText = text
 
@@ -15,3 +18,36 @@ export const formatAddress = (text: string) => {
 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,
+  isDev?: boolean
+) => {
+  const checkoutSettings: CheckoutSettings = {
+    sardineCheckout: {
+      chainId,
+      defaultPaymentMethodType: 'us_debit',
+      platform: 'horizon',
+      contractAddress: '0xB537a160472183f2150d42EB1c3DD6684A55f74c',
+      blockchainNftId: blockchainNftId,
+      recipientAddress: recipientAddress,
+      quantity,
+      isDev
+    },
+    orderSummaryItems: [
+      {
+        chainId,
+        contractAddress: tokenContractAddress,
+        tokenId,
+        quantityRaw: String(quantity)
+      }
+    ]
+  }
+
+  return checkoutSettings
+}
\ No newline at end of file
diff --git a/examples/react/src/utils/index.ts b/examples/react/src/utils/index.ts
index 0311a684..b2a4c751 100644
--- a/examples/react/src/utils/index.ts
+++ b/examples/react/src/utils/index.ts
@@ -1,2 +1 @@
-export * from './settings'
 export * from './helpers'
diff --git a/examples/react/src/utils/settings.ts b/examples/react/src/utils/settings.ts
deleted file mode 100644
index bf7df637..00000000
--- a/examples/react/src/utils/settings.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { CheckoutSettings } from '@0xsequence/kit-checkout'
-
-export const getCheckoutSettings = (address?: string) => {
-  const checkoutSettings: CheckoutSettings = {
-    cryptoCheckout: {
-      chainId: 137,
-      triggerTransaction: async () => {
-        console.log('triggered transaction')
-      },
-      coinQuantity: {
-        contractAddress: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174',
-        amountRequiredRaw: '10000000000'
-      }
-    },
-    orderSummaryItems: [
-      {
-        contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
-        tokenId: '66597',
-        quantityRaw: '100'
-      },
-      {
-        contractAddress: '0x624e4fa6980afcf8ea27bfe08e2fb5979b64df1c',
-        tokenId: '1741',
-        quantityRaw: '100'
-      }
-    ]
-  }
-
-  return checkoutSettings
-}
diff --git a/packages/checkout/src/api/data.ts b/packages/checkout/src/api/data.ts
index 5a1091a4..2f4a35a6 100644
--- a/packages/checkout/src/api/data.ts
+++ b/packages/checkout/src/api/data.ts
@@ -1,72 +1,189 @@
 import { getNetwork } from '@0xsequence/kit'
+import { SequenceAPIClient, Token, TokenPrice, GetCoinPricesReturn } from '@0xsequence/api'
+import { TokenMetadata } from '@0xsequence/metadata'
+import { ChainId, networks } from '@0xsequence/network'
+
 import { getPaperNetworkName } from '../utils'
-import { SequenceAPIClient } from '@0xsequence/api'
+import { SardineCheckout } from '..'
 
-export interface FetchPaperSecretArgs {
-  apiClient: SequenceAPIClient
-  chainId: number
-  email: string
-  abi: string
-  contractAddress: string
-  recipientAddress: string
-  receiptTitle: string
-  collectionContractAddress?: string
-  methodArguments: MethodArguments
-  currency: string
-  currencyAmount: string
-  methodName: string
+export interface FetchSardineClientTokenReturn {
+  token: string,
+  orderId: string,
 }
 
 export interface MethodArguments {
   [key: string]: any
 }
 
-export const fetchPaperSecret = async ({
-  apiClient,
-  chainId,
-  email,
-  contractAddress,
-  abi,
-  receiptTitle,
-  collectionContractAddress,
-  methodArguments,
-  currency,
-  currencyAmount,
-  methodName,
-  recipientAddress
-}: FetchPaperSecretArgs) => {
-  const network = getNetwork(chainId)
-  const chainName = getPaperNetworkName(network)
+export const fetchSardineClientToken = async (order: SardineCheckout, isDev: boolean, projectAccessKey: string, tokenMetadata?: TokenMetadata): Promise<FetchSardineClientTokenReturn> => {
+  const randomNumber = Math.floor(Math.random() * 1000000)
+  const timestamp = new Date().getTime()
+  const referenceId = `sequence-kit-${randomNumber}-${timestamp}-${order.recipientAddress}-${networks[order.chainId as ChainId].name}-${order.contractAddress}-${order.contractAddress}-${order.recipientAddress}`
+
 
-  const paramsJson = JSON.stringify({
-    title: receiptTitle,
-    email,
-    limitPerTransaction: 1,
-    quantity: 1,
-    mintMethod: {
-      args: methodArguments,
-      payment: {
-        currency,
-        value: `${currencyAmount} * $QUANTITY`
-      },
-      name: methodName
+  // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials
+  const accessKey = isDev ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' : projectAccessKey
+  const url = isDev ? 'https://dev-api.sequence.app/rpc/API/GetSardineNFTCheckoutToken' : 'https://api.sequence.app/rpc/API/GetSardineNFTCheckoutToken'
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Access-Key': `${accessKey || ''}`
     },
-    walletAddress: recipientAddress,
-    ...(collectionContractAddress
-      ? {
-          contractArgs: {
-            collectionContractAddress
-          }
+    body: JSON.stringify(
+      { 
+        params: {
+          referenceId,
+          expiresIn: 3600,
+          paymentMethodTypeConfig: {
+            enabled: ['us_debit', 'us_credit', 'international_debit', 'international_credit', 'ach'],
+            default: order.defaultPaymentMethodType
+          },
+          name: tokenMetadata?.name || 'Unknown',
+          imageUrl: tokenMetadata?.image || '',
+          network: networks[order.chainId as ChainId].name,
+          recipientAddress: order.recipientAddress,
+          platform: 'horizon',
+          blockchainNftId: order.blockchainNftId,
+          contractAddress: order.contractAddress,
+          executionType: 'smart_contract',
+          quantity: Number(order.quantity),
+          decimals: Number(order.decimals),
         }
-      : {})
+      }
+    )
   })
 
-  const { secret } = await apiClient.paperSessionSecret2({
-    chainName,
-    contractAddress,
-    abi,
-    paramsJson
+  const { resp: { orderId, token } } = await res.json()
+
+  return ({
+    token,
+    orderId,
   })
+}
+
 
-  return secret
+export const fetchSardineOrderStatus = async (orderId: string, isDev: boolean, projectAccessKey: string) => {
+  // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials
+  const accessKey = isDev ? '17xhjK4yjRf1fr0am8kgKfICAAAAAAAAA' :  projectAccessKey
+  const url = isDev ? 'https://dev-api.sequence.app/rpc/API/GetSardineNFTCheckoutOrderStatus' : 'https://api.sequence.app/rpc/API/GetSardineNFTCheckoutOrderStatus'
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Access-Key': `${accessKey}`
+    },
+    body: JSON.stringify({
+      orderId,
+    })
+  })
+
+  const json = await response.json()
+  console.log('json:', json)
+  return json
+}
+
+export interface Country {
+  code: string,
 }
+
+export const fetchSupportedCountryCodes = async (): Promise<Country[]> => {
+  // Can also be fetches from sardine api
+  const supportedCountries = [
+    'AL',
+    'AO',
+    'AT',
+    'BB',
+    'BE',
+    'BZ',
+    'BJ',
+    'BO',
+    'BR',
+    'BG',
+    'KH',
+    'KY',
+    'CL',
+    'CO',
+    'KM',
+    'CR',
+    'HR',
+    'CY',
+    'CZ',
+    'DK',
+    'DM',
+    'DO',
+    'EC',
+    'EG',
+    'SV',
+    'GQ',
+    'EE',
+    'FO',
+    'FI',
+    'FR',
+    'GF',
+    'DE',
+    'GR',
+    'GN',
+    'GW',
+    'GY',
+    'HT',
+    'HN',
+    'HU',
+    'IS',
+    'ID',
+    'IE',
+    'IL',
+    'IT',
+    'JM',
+    'JP',
+    'KG',
+    'LA',
+    'LV',
+    'LI',
+    'LT',
+    'LU',
+    'MG',
+    'MY',
+    'MV',
+    'MT',
+    'MR',
+    'MX',
+    'MN',
+    'MZ',
+    'NL',
+    'NO',
+    'OM',
+    'PA',
+    'PY',
+    'PE',
+    'PH',
+    'PL',
+    'PT',
+    'RO',
+    'KN',
+    'MF',
+    'SA',
+    'SC',
+    'SG',
+    'SK',
+    'SI',
+    'KR',
+    'ES',
+    'LK',
+    'SE',
+    'CH',
+    'TZ',
+    'TH',
+    'TT',
+    'TR',
+    'AE',
+    'GB',
+    'UY',
+    'UZ',
+    'VU',
+    'VN',
+  ]
+
+  return supportedCountries.map(countryCode => ({ code: countryCode }))
+}
\ No newline at end of file
diff --git a/packages/checkout/src/contexts/CheckoutModal.tsx b/packages/checkout/src/contexts/CheckoutModal.tsx
index 2e3cbe9f..0ed4e9e3 100644
--- a/packages/checkout/src/contexts/CheckoutModal.tsx
+++ b/packages/checkout/src/contexts/CheckoutModal.tsx
@@ -8,27 +8,28 @@ interface CoinQuantity {
 }
 
 interface OrderSummaryItem {
+  chainId: number
   contractAddress: string
   quantityRaw: string
   tokenId: string
 }
 
+export interface SardineCheckout {
+  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
+  isDev?: boolean
+}
+
 export interface CheckoutSettings {
-  creditCardCheckout?: {
-    chainId: number
-    abi: string
-    methodName: string
-    contractAddress: string
-    recipientAddress: string
-    receiptTitle: string
-    methodArguments: MethodArguments
-    currency: string
-    currencyAmount: string
-    collectionContractAddress?: string
-    email?: string
-    onSuccess?: (transactionHash: string) => void
-    onError?: (error: Error) => void
-  }
+  sardineCheckout?: SardineCheckout,
   cryptoCheckout?: {
     chainId: number
     triggerTransaction: () => void
diff --git a/packages/checkout/src/contexts/Navigation.tsx b/packages/checkout/src/contexts/Navigation.tsx
index 5cab25ba..6b174e61 100644
--- a/packages/checkout/src/contexts/Navigation.tsx
+++ b/packages/checkout/src/contexts/Navigation.tsx
@@ -28,7 +28,8 @@ export interface TransactionErrorNavigation {
 }
 
 export interface TransactionPendingParams {
-  transactionId: string
+  orderId: string
+  authToken: string
 }
 
 export interface TransactionPendingNavigation {
diff --git a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
index 004baa55..3a327417 100644
--- a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
+++ b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
@@ -5,7 +5,7 @@ import { AnimatePresence } from 'framer-motion'
 
 import { getModalPositionCss, useTheme } from '@0xsequence/kit'
 
-import { PaperTransactionForm, PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelection } from '../../views'
+import { PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelection } from '../../views'
 import { History, Navigation, NavigationContextProvider, CheckoutModalContextProvider, CheckoutSettings } from '../../contexts'
 
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
@@ -21,31 +21,6 @@ export const DEFAULT_LOCATION: Navigation = {
   location: 'select-method-checkout'
 }
 
-// export const DEFAULT_LOCATION: Navigation = {
-//   location: 'transaction-form',
-// }
-
-// export const DEFAULT_LOCATION: Navigation = {
-//   location: 'transaction-pending',
-//   params: {
-//     transactionId: '48a47f94-475b-41f2-8370-7b3d279ba662'
-//   }
-// }
-
-// export const DEFAULT_LOCATION: Navigation = {
-//   location: 'transaction-success',
-//   params: {
-//     transactionHash: '0x48a47f94-475b-41f2-8370-7b3d279ba662'
-//   }
-// }
-
-// export const DEFAULT_LOCATION: Navigation = {
-//   location: 'transaction-error',
-//   params: {
-//     error: new Error('an error occurred'),
-//   }
-// }
-
 export const KitCheckoutProvider = (props: KitCheckoutProvider) => {
   const queryClient = new QueryClient()
 
@@ -85,7 +60,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
         return <TransactionError />
       case 'transaction-form':
       default:
-        return <PaperTransactionForm />
+        return <CheckoutSelection />
     }
   }
 
@@ -126,6 +101,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
                     }
                   }}
                   scroll={false}
+                  isDismissible={navigation.location !== 'transaction-pending'}
                   backdropColor="backgroundBackdrop"
                   onClose={() => setOpenCheckoutModal(false)}
                 >
diff --git a/packages/checkout/src/shared/components/NavigationHeader.tsx b/packages/checkout/src/shared/components/NavigationHeader.tsx
index 6b883684..b8a38289 100644
--- a/packages/checkout/src/shared/components/NavigationHeader.tsx
+++ b/packages/checkout/src/shared/components/NavigationHeader.tsx
@@ -44,7 +44,7 @@ export const NavigationHeader = ({ secondaryText, primaryText, disableBack = fal
       ) : (
         <Box />
       )}
-      <Box>
+      <Box width="full" alignItems="center" justifyContent="center" style={{ marginLeft: '40px' }}>
         <Text fontWeight="medium" variant="small" color="text50">
           {secondaryText}
         </Text>
diff --git a/packages/checkout/src/shared/components/PaperTransaction.tsx b/packages/checkout/src/shared/components/PaperTransaction.tsx
deleted file mode 100644
index 5b2379e1..00000000
--- a/packages/checkout/src/shared/components/PaperTransaction.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import React, { useState, useEffect, ChangeEvent } from 'react'
-import { Box, Button, Card, Spinner, Text, TextInput, EditIcon, CheckmarkIcon } from '@0xsequence/design-system'
-import { CheckoutWithCard } from '@paperxyz/react-client-sdk'
-import { useNavigation } from '../../hooks'
-import { fetchPaperSecret } from '../../api'
-import { CheckoutSettings } from '../../contexts/CheckoutModal'
-import { useAPIClient } from '@0xsequence/kit'
-export interface PaperTransactionProps {
-  settings: CheckoutSettings
-}
-
-export const PaperTransaction = ({ settings }: PaperTransactionProps) => {
-  const apiClient = useAPIClient()
-  const [emailEditState, setEmailEditState] = useState(true)
-  const [email, setEmail] = useState<string>(settings.creditCardCheckout?.email || '')
-  const [inputEmailAddress, setInputEmailAddress] = useState<string | undefined>(email)
-  const [paperSecret, setPaperSecret] = useState<string | null>(null)
-  const [paperSecretLoading, setPaperSecretLoading] = useState(false)
-  const { setNavigation } = useNavigation()
-
-  const onClickEditEmail = () => {
-    if (emailEditState) {
-      setEmail(inputEmailAddress || '')
-    }
-    if (!emailEditState) {
-      setInputEmailAddress(email)
-    }
-    setEmailEditState(!emailEditState)
-  }
-
-  const fetchSecret = async () => {
-    setPaperSecretLoading(true)
-
-    try {
-      if (!email) {
-        throw new Error('No email address found')
-      }
-
-      if (!settings.creditCardCheckout) {
-        throw new Error('No credit card checkout settings found')
-      }
-
-      const secret = await fetchPaperSecret({
-        apiClient,
-        email,
-        ...settings.creditCardCheckout
-      })
-
-      setPaperSecret(secret)
-    } catch (e) {
-      console.error('Failed to fetch paper secret', e)
-      setNavigation({
-        location: 'transaction-error',
-        params: {
-          error: e as Error
-        }
-      })
-    }
-
-    setPaperSecretLoading(false)
-  }
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      // This is a workaround for the KYC modal not becoming clickable
-      // The alternative of using the onReview callback does not work due
-      // to race conditions
-      const paperJsSdkModal = document.getElementById('paper-js-sdk-modal')
-      if (paperJsSdkModal) {
-        paperJsSdkModal.style.pointerEvents = 'visible'
-      }
-    }, 100)
-    return () => {
-      clearInterval(timer)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (email !== '') {
-      fetchSecret()
-    }
-  }, [email])
-
-  const isValidEmailAddress = () => {
-    const emailRegEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/
-    const isValidEmail = emailRegEx.test(inputEmailAddress || '')
-    return isValidEmail
-  }
-
-  const emailAddressOnChange = (ev: ChangeEvent<HTMLInputElement>) => {
-    setInputEmailAddress(ev.target.value)
-  }
-
-  const onPending = (transactionId: string) => {
-    setNavigation({
-      location: 'transaction-pending',
-      params: {
-        transactionId
-      }
-    })
-  }
-
-  const onError = (error: Error) => {
-    setNavigation({
-      location: 'transaction-error',
-      params: {
-        error
-      }
-    })
-  }
-
-  const getEmailInput = () => {
-    if (emailEditState) {
-      return (
-        <Box as="form" flexDirection="row" justifyContent="space-between" alignItems="flex-start" onSubmit={onClickEditEmail}>
-          <Box flexDirection="column" justifyContent="center" alignItems="flex-start" gap="2">
-            <Text fontSize="normal" fontWeight="normal" color="text50">
-              Receipt email address
-            </Text>
-            <TextInput
-              autoFocus
-              name="email"
-              type="email"
-              placeholder="Email Address"
-              value={inputEmailAddress}
-              onChange={emailAddressOnChange}
-              data-1p-ignore
-            />
-          </Box>
-          <Button size="xs" label={'Save'} leftIcon={CheckmarkIcon} disabled={!isValidEmailAddress()} type="submit" />
-        </Box>
-      )
-    }
-
-    return (
-      <Box flexDirection="row" justifyContent="space-between" alignItems="flex-start">
-        <Box flexDirection="column" justifyContent="center" alignItems="flex-start" gap="2">
-          <Text fontSize="normal" fontWeight="normal" color="text50">
-            Receipt email address
-          </Text>
-          <Text fontSize="normal" fontWeight="bold" color="text100">
-            {email}
-          </Text>
-        </Box>
-        <Button size="xs" label={'Edit'} leftIcon={EditIcon} onClick={onClickEditEmail} />
-      </Box>
-    )
-  }
-
-  return (
-    <Box>
-      {getEmailInput()}
-      {paperSecretLoading && (
-        <Box
-          width="full"
-          height="full"
-          flexDirection="column"
-          alignItems="center"
-          justifyContent="center"
-          style={{ height: '200px' }}
-        >
-          <Spinner size="lg" style={{ width: '60px', height: '60px' }} />
-        </Box>
-      )}
-      {paperSecret && !paperSecretLoading && (
-        <Card marginY="4" flexDirection="column">
-          <CheckoutWithCard
-            sdkClientSecret={paperSecret}
-            appName={settings?.creditCardCheckout?.receiptTitle}
-            onReview={() => {}}
-            onPaymentSuccess={result => {
-              // @ts-ignore-next-line
-              onPending(result.id)
-            }}
-            onError={error => {
-              console.error('Payment error:', error)
-              onError(error.error)
-            }}
-            options={{
-              // colorBackground: '#cce3de',
-              colorPrimary: '#447dd1',
-              colorText: '#ffffff',
-              borderRadius: 12
-            }}
-          />
-        </Card>
-      )}
-    </Box>
-  )
-}
diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
index d9394dea..93561578 100644
--- a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
@@ -36,7 +36,7 @@ export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainI
     <Card flexDirection="row" alignItems="flex-start" justifyContent="space-between">
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="2">
         <Box aspectRatio="1/1" height="full" justifyContent="center" alignItems="center" style={{ width: '80px' }}>
-          <Image src={image} borderRadius="md" style={{ height: '80px' }} />
+          <Image src={image} borderRadius="md" style={{ maxWidth: '80px', height: '80px', objectFit: 'cover' }} />
         </Box>
         <Box flexDirection="column" alignItems="flex-start" justifyContent="center" gap="2">
           <Box gap="1" alignItems="center">
diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
index 627ed463..0f546488 100644
--- a/packages/checkout/src/views/CheckoutSelection/index.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -1,13 +1,19 @@
 import React from 'react'
 import { ethers } from 'ethers'
-import { Box, Button, ChevronRightIcon, Divider, Text, PaymentsIcon, vars } from '@0xsequence/design-system'
-
-import { getNativeTokenInfoByChainId, useBalances, useContractInfo } from '@0xsequence/kit'
+import { Box, Button, ChevronRightIcon, Divider, HelpIcon, Text, TooltipPrimitive, Tooltip, PaymentsIcon, vars } from '@0xsequence/design-system'
+import {
+  getNativeTokenInfoByChainId,
+  useBalances,
+  useContractInfo,
+  useTokenMetadata,
+  useProjectAccessKey
+} from '@0xsequence/kit'
 
 import { useAccount, useConfig } from 'wagmi'
 
 import { OrderSummaryItem } from './component/OrderSummaryItem'
 
+import { fetchSardineClientToken, fetchSardineOrderStatus } from '../../api'
 import { CoinIcon } from '../../shared/components/CoinIcon'
 import { Skeleton } from '../../shared/components/Skeleton'
 import { HEADER_HEIGHT } from '../../constants'
@@ -20,15 +26,16 @@ export const CheckoutSelection = () => {
   const { setNavigation } = useNavigation()
   const { closeCheckout, settings } = useCheckoutModal()
   const { address: accountAddress } = useAccount()
+  const projectAccessKey = useProjectAccessKey()
 
   const cryptoCheckoutSettings = settings?.cryptoCheckout
-  // const creditCardCheckoutSettings = settings?.creditCardCheckout
+  const creditCardCheckoutSettings = settings?.sardineCheckout
+  const displayCreditCardCheckout = !!creditCardCheckoutSettings
   const displayCryptoCheckout = !!cryptoCheckoutSettings
-  // const displayCreditCardCheckout = !!creditCardCheckoutSettings
 
-  const { data: contractInfoData, isPending: isPendingContractInfo } = useContractInfo(
+  const { data: contractInfoData, isLoading: isPendingContractInfo } = useContractInfo(
     cryptoCheckoutSettings?.chainId || 1,
-    cryptoCheckoutSettings?.coinQuantity?.contractAddress || ''
+    cryptoCheckoutSettings?.coinQuantity?.contractAddress || '',
   )
 
   const { data: balancesData, isPending: isPendingBalances } = useBalances({
@@ -55,12 +62,37 @@ export const CheckoutSelection = () => {
 
   const orderSummaryItems = settings?.orderSummaryItems || []
 
-  const chainId = settings?.cryptoCheckout?.chainId || 1
+  const chainId = settings?.cryptoCheckout?.chainId || settings?.sardineCheckout?.chainId || 1
+
+  const { data: tokensMetadata, isLoading: isTokenMetadataLoading } = useTokenMetadata(
+    chainId,
+    orderSummaryItems[0].contractAddress,
+    [orderSummaryItems[0].tokenId]
+  )
+  const tokenMetadata = tokensMetadata ? tokensMetadata[0] : undefined
+
+  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)
+
+      setNavigation({
+        location: 'transaction-pending',
+        params: { orderId, authToken: token }
+      })
+    }
+  }
 
   const onClickPayWithCard = () => {
-    setNavigation({
-      location: 'transaction-form'
-    })
+    if (settings?.sardineCheckout) {
+      triggerSardineTransaction()
+    } else {
+      setNavigation({
+        location: 'transaction-form'
+      })
+    }
   }
 
   const onClickPayWithCrypto = () => {
@@ -82,9 +114,24 @@ export const CheckoutSelection = () => {
     >
       {orderSummaryItems.length > 0 && (
         <>
-          <Text fontWeight="normal" fontSize="normal" color="text50">
-            Order summary
-          </Text>
+          <Box flexDirection="row" gap="2" alignItems="center">
+            <Text fontWeight="normal" fontSize="normal" color="text50">
+              Order summary
+            </Text>
+            <Tooltip
+              vOffset={-2}
+              side="bottom"
+              message={
+                <>
+                  Please note that NFTs are digital assets<br/> and as such cannot delivered physically.
+                </>
+              }
+            >
+              <Box width="5" height="5">
+                <HelpIcon color="text80" />
+              </Box>
+            </Tooltip>
+          </Box>
           <Box flexDirection="column" gap="2">
             {orderSummaryItems.map((orderSummaryItem, index) => {
               return <OrderSummaryItem key={index} {...orderSummaryItem} chainId={chainId} />
@@ -120,7 +167,7 @@ export const CheckoutSelection = () => {
       )}
 
       <Box flexDirection="column" alignItems="center" justifyContent="center" gap="2">
-        {/* {displayCreditCardCheckout && (
+        {displayCreditCardCheckout && (
           <Button
             style={{
               borderRadius: vars.radii.md,
@@ -134,7 +181,7 @@ export const CheckoutSelection = () => {
             rightIcon={ChevronRightIcon}
             onClick={onClickPayWithCard}
           />
-        )} */}
+        )}
         {displayCryptoCheckout && !isInsufficientBalance && !isPending && (
           <Button
             style={{
diff --git a/packages/checkout/src/views/PaperTransactionForm.tsx b/packages/checkout/src/views/PaperTransactionForm.tsx
deleted file mode 100644
index de9bf244..00000000
--- a/packages/checkout/src/views/PaperTransactionForm.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { useState } from 'react'
-import { Box, Text } from '@0xsequence/design-system'
-import { useCheckoutModal } from '../hooks/useCheckoutModal'
-import { PaperTransaction } from '../shared/components/PaperTransaction'
-import { HEADER_HEIGHT } from '../constants'
-
-export const PaperTransactionForm = () => {
-  const { settings } = useCheckoutModal()
-
-  return (
-    <Box
-      paddingX="4"
-      paddingBottom="8"
-      gap="4"
-      flexDirection="column"
-      style={{
-        marginTop: HEADER_HEIGHT
-      }}
-    >
-      {settings && <PaperTransaction settings={settings} />}
-    </Box>
-  )
-}
diff --git a/packages/checkout/src/views/PendingTransaction.tsx b/packages/checkout/src/views/PendingTransaction.tsx
index 62808393..44db9ed2 100644
--- a/packages/checkout/src/views/PendingTransaction.tsx
+++ b/packages/checkout/src/views/PendingTransaction.tsx
@@ -1,38 +1,42 @@
 import React, { useEffect } from 'react'
 import { Box, Spinner, Text } from '@0xsequence/design-system'
+import { useProjectAccessKey } from '@0xsequence/kit'
 
 import { useNavigation, useCheckoutModal } from '../hooks'
 import { TransactionPendingNavigation } from '../contexts'
+import { fetchSardineOrderStatus } from '../api'
 
 const POLLING_TIME = 10 * 1000
 
 export const PendingTransaction = () => {
   const nav = useNavigation()
+  const { settings } = useCheckoutModal()
   const {
-    params: { transactionId }
+    params: { authToken, orderId }
   } = nav.navigation as TransactionPendingNavigation
   const { setNavigation } = nav
+  const projectAccessKey = useProjectAccessKey()
 
-  const paperGetStatusUrl = `https://withpaper.com/api/v1/transaction-status/${transactionId}`
+  const isDev = settings?.sardineCheckout?.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`
 
-  const pollForTxStatus = async () => {
-    try {
-      console.log('Polling for transaction status')
-      const pollResponse = await fetch(paperGetStatusUrl, {
-        method: 'GET',
-        headers: {
-          accept: 'application/json'
-        }
-      }).then(res => res.json())
-      const status = pollResponse.result.status
-      const transactionHash = pollResponse.result.transactionHash
+    const pollForOrderStatus = async () => {
+      try {
+        console.log('Polling for transaction status')
+        const isDev = settings?.sardineCheckout?.isDev || false
+
+        const pollResponse = await fetchSardineOrderStatus(orderId, isDev, projectAccessKey)
+        const status = pollResponse.resp.status
+        const transactionHash = pollResponse.resp?.transactionHash
 
       console.log('transaction status poll response:', status)
 
-      if (status === 'PENDING') {
+      if (status === 'Draft') {
         return
       }
-      if (status === 'TRANSFER_SUCCEEDED') {
+      if (status === 'Complete') {
         setNavigation &&
           setNavigation({
             location: 'transaction-success',
@@ -42,7 +46,7 @@ export const PendingTransaction = () => {
           })
         return
       }
-      if (status === 'TRANSFER_FAILED' || status === 'PAYMENT_FAILED') {
+      if (status === 'Declined' || status === 'Cancelled') {
         setNavigation &&
           setNavigation({
             location: 'transaction-error',
@@ -66,7 +70,7 @@ export const PendingTransaction = () => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      pollForTxStatus()
+      pollForOrderStatus()
     }, POLLING_TIME)
 
     return () => {
@@ -75,23 +79,16 @@ export const PendingTransaction = () => {
   }, [])
 
   return (
-    <Box style={{ height: '500px' }}>
-      <Box
-        position="absolute"
-        top="0"
-        left="0"
-        width="full"
-        height="full"
-        flexDirection="column"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Spinner size="lg" style={{ width: '60px', height: '60px' }} />
-        <Text variant="medium" color="text50" textAlign="center" marginTop="8">
-          Transaction in progress. <br />
-          This may take a few minutes.
-        </Text>
-      </Box>
+    <Box alignItems="center" justifyContent="center" style={{ height: '620px' }}>
+      <iframe
+        src={url}
+        style={{
+          maxHeight: '500px',
+          height: '100%',
+          maxWidth: '380px',
+          width: '100%'
+        }}
+      />
     </Box>
   )
 }
diff --git a/packages/checkout/src/views/TransactionError.tsx b/packages/checkout/src/views/TransactionError.tsx
index e4de24ab..360cc25f 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?.creditCardCheckout?.onError && settings?.creditCardCheckout?.onError(navigation.params.error)
+      settings?.sardineCheckout?.onError && settings?.sardineCheckout?.onError(navigation.params.error, settings?.sardineCheckout)
     }, 3000)
   }, [])
 
diff --git a/packages/checkout/src/views/TransactionSuccess.tsx b/packages/checkout/src/views/TransactionSuccess.tsx
index cbca6a7e..39e19dc5 100644
--- a/packages/checkout/src/views/TransactionSuccess.tsx
+++ b/packages/checkout/src/views/TransactionSuccess.tsx
@@ -1,3 +1,4 @@
+import { sequence } from '0xsequence'
 import React, { useEffect } from 'react'
 import { Box, CheckmarkIcon, Text } from '@0xsequence/design-system'
 
@@ -9,11 +10,12 @@ export const TransactionSuccess = () => {
   const nav = useNavigation()
   const navigation = nav.navigation as TransactionSuccessNavigation
 
+  const chainId = settings?.sardineCheckout?.chainId || 137
+  const network = sequence.network.allNetworks.find(n => n.chainId === chainId)
+
   useEffect(() => {
-    setTimeout(() => {
-      closeCheckout()
-      settings?.creditCardCheckout?.onSuccess && settings?.creditCardCheckout?.onSuccess(navigation.params.transactionHash)
-    }, 3000)
+    settings?.sardineCheckout?.onSuccess && settings?.sardineCheckout?.onSuccess(navigation.params.transactionHash, settings?.sardineCheckout)
+    settings?.sardineCheckout?.onSuccess && settings?.sardineCheckout?.onSuccess(navigation.params.transactionHash, settings?.sardineCheckout)
   }, [])
 
   return (
@@ -27,8 +29,22 @@ export const TransactionSuccess = () => {
         <NotificationSuccessIcon />
         <Text fontSize="xlarge">Success!</Text>
         <Text textAlign="center" variant="normal" color="text80">
-          The transaction was successful.
+          Purchase was successful, item was sent to your wallet.
         </Text>
+        {navigation.params.transactionHash && (
+          <Text
+            as="a"
+            variant="small"
+            underline
+            marginTop="6"
+            color="text100"
+            href={`${network?.blockExplorer?.rootUrl}/tx/${navigation.params.transactionHash}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            View on {network?.blockExplorer?.name}
+          </Text>
+        )}
       </Box>
     </Box>
   )
diff --git a/packages/checkout/src/views/index.ts b/packages/checkout/src/views/index.ts
index ba584db6..5110bd5a 100644
--- a/packages/checkout/src/views/index.ts
+++ b/packages/checkout/src/views/index.ts
@@ -1,4 +1,3 @@
-export * from './PaperTransactionForm'
 export * from './PendingTransaction'
 export * from './TransactionSuccess'
 export * from './TransactionError'