readme information

Author: SamueleA

packages/checkout/README.md

@@ -254,3 +254,56 @@ const MyComponent = () => {
   return <button onClick={onClick}>Add Funds</button>
 }
 ```
+
+## Custom Checkout UIs
+
+Fully customized checkout UIs can be created with the `useCheckoutUI` hook. The hook will return three objects `orderSummary`, `creditCardPayment` and `cryptoPayment` which serve to create the order summary section, credit card payment section and crypto payment section of a checkout UI. API calls are done within the hook and all that if left to build is placing the information and actions.
+
+Each section comes with its own loading, error and data states.
+
+```js
+import { useCheckoutUI } from '@0xsequence/checkout'
+
+const CustomCheckoutUI = () => {
+  const checkoutUIParams = {
+    collectible,
+    chain: chainId,
+    totalPriceRaw: price,
+    targetContractAddress: salesContractAddress,
+    recipientAddress: address || '',
+    currencyAddress,
+    collectionAddress,
+    creditCardProvider: 'transak' as CreditCardProviders,
+    transakConfig: {
+      contractId,
+      apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
+    },
+    onSuccess: (txnHash: string) => {
+      console.log('success!', txnHash)
+    },
+    onError: (error: Error) => {
+      console.error(error)
+    },
+    txData: purchaseTransactionData
+  }
+
+  const { orderSummary, creditCardPayment, cryptoPayment } = useCheckoutUI(checkoutUIParams)
+
+  const isLoading = orderSummary.isLoading || creditCardPayment.isLoading || cryptoPayment.isLoading
+
+  const error = orderSummary.error || creditCardPayment.error || cryptoPayment.error
+
+  if (isLoading) {
+    return <div>loading...</div>
+  }
+  if (error)  {
+    return <div>an error has occurred</div>
+  }
+
+  return (
+    <CustomOrderSummaryComponent data={orderSummary.data}>
+    <CustomCreditCardComponent data={creditCardPayment.data}>
+    <CustomCryptoPaymentComponent data={cryptoPayment.data} purchaseAction={cryptoPayment.purchaseAction}>
+  )
+}
+```

packages/checkout/src/hooks/useCheckoutUI/useOrderSummary.tsx

@@ -38,10 +38,11 @@ export interface CollectibleItem {
 export interface UseOrderSummaryData {
   formattedCryptoPrice: string
   cryptoSymbol: string
+  cryptoImageUrl?: string
   totalPriceFiat: string
   networkName: string
   networkImageUrl: string
-  networkBadge: ReactNode
+  NetworkBadge: ReactNode
   collectibleItem: CollectibleItem
 }
 
@@ -71,6 +72,7 @@ export const useOrderSummary = ({
   const isNativeCurrency = compareAddress(currencyAddress, zeroAddress)
   const currencySymbol = isNativeCurrency ? network?.nativeToken.symbol : currencyInfo?.symbol
   const currencyDecimals = isNativeCurrency ? network?.nativeToken.decimals : currencyInfo?.decimals
+  const cryptoImageUrl = isNativeCurrency ? network?.logoURI : currencyInfo?.logoURI
 
   const {
     data: dataCoinPrices,
@@ -104,9 +106,10 @@ export const useOrderSummary = ({
     data = {
       formattedCryptoPrice: displayPrice,
       cryptoSymbol: currencySymbol || 'POL',
+      cryptoImageUrl: cryptoImageUrl,
       networkName: network?.name || 'Polygon',
       networkImageUrl: networkImageUrl(network?.chainId || 137),
-      networkBadge: <NetworkBadge chainId={chainId} />,
+      NetworkBadge: <NetworkBadge chainId={chainId} />,
       totalPriceFiat: priceFiat,
       collectibleItem: {
         quantityRaw: collectible.quantity,