@hanzo/commerce 2.0.0 → 2.1.0

package/components/checkout/{pay-with-crypto.tsx → payment/pay-with-crypto.tsx}

@@ -22,11 +22,9 @@ import {
 import { useAuth } from '@hanzo/auth/service'
 import { Ethereum as EthIconFromAuth }  from '@hanzo/auth/icons'
 
-import Eth from './icons/eth'
-import Btc from './icons/btc'
-import Usdt from './icons/usdt'
-import { useCommerce } from '../..'
-import { formatPrice } from '../../util'
+import Eth from '../icons/eth'
+import { useCommerce, type TransactionStatus } from '../../..'
+import { formatPrice } from '../../../util'
 
 declare global {
   interface Window{
@@ -36,10 +34,15 @@ declare global {
 
 const PayWithCrypto: React.FC<{
   setCurrentStep: (currentStep: number) => void
+  transactionStatus: TransactionStatus
+  setTransactionStatus: (status: TransactionStatus) => void
+  storePaymentInfo: (paymentInfo: any) => Promise<void>
 }> = observer(({
-  setCurrentStep
+  setCurrentStep,
+  transactionStatus,
+  setTransactionStatus,
+  storePaymentInfo
 }) => {
-
   const c = useCommerce()
   const auth = useAuth()
   const [loadingPrice, setLoadingPrice] = useState(false)
@@ -47,7 +50,6 @@ const PayWithCrypto: React.FC<{
   const [amount, setAmount] = useState<number>()
   const [availableAmount, setAvailableAmount] = useState<number>()
   const [provider, setProvider] = useState<ethers.BrowserProvider>()
-  const [transactionStatus, setTransactionStatus] = useState<'unpaid' | 'paid' | 'confirmed' | 'error'>('unpaid')
 
   //const selectedToken = 'eth'
 
@@ -126,12 +128,17 @@ const PayWithCrypto: React.FC<{
       setTransactionStatus('paid')
 
       provider.waitForTransaction(tx.hash)
-        .then((receipt) => {
+        .then(async (receipt) => {
           console.log(receipt)
+          await storePaymentInfo({
+            ether,
+            addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+            receipt
+          })
           setTransactionStatus('confirmed')
         })
         .catch((error) => {
-          console.log(error)
+          console.error(error)
           setTransactionStatus('error')
         })
     } catch (err) {
@@ -141,9 +148,20 @@ const PayWithCrypto: React.FC<{
     }
   }
 
-  const payWidget = !!!(auth.user?.walletAddress) ? (
+  const nextStep = async () => {
+    await storePaymentInfo({
+      paymentMethod: 'crypto'
+    })
+    setCurrentStep(2)
+  }
+
+  const cryptoPriceWidget = !!!(auth.user?.walletAddress) ? (
     <div className='w-full mx-auto max-w-[20rem]'>
-      <Button variant='outline' className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
+      <Button
+        variant='outline'
+        className='w-full flex items-center gap-2'
+        onClick={auth.associateWallet.bind(auth)}
+      >
         <EthIconFromAuth height={20}/>Connect your wallet
       </Button>
     </div>
@@ -165,30 +183,35 @@ const PayWithCrypto: React.FC<{
       <div>Available funds in your wallet: {availableAmount} ETH</div>
       <div>
         <Input value={amount ? amount/(10**18) : amount} contentEditable={false}/>
-        <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'><Eth height={10}/>ETH</div>
+        <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'>
+          <Eth height={10}/>
+          ETH
+        </div>
       </div>
-      {transactionStatus === 'unpaid' || transactionStatus === 'error' ? (
-        <Button
-          onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
-          disabled={!amount || loadingPrice}
-        >
-          Pay now
-        </Button>
+      {transactionStatus === 'error' ? (
+        <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>
       ) : transactionStatus === 'paid' ? (
         <h4>Waiting for transaction to be confirmed on chain.</h4>
-      ) : (
+      ) : transactionStatus === 'confirmed' ? (
         <h4>Transaction confirmed!</h4>
-      )}
+      ) : null}
     </div>
   )
 
   return (
-    <div className='flex flex-col gap-6'>
-      {payWidget}
-      <div className='flex gap-4 items-center mt-6'>
-        <Button variant='outline' onClick={() => setCurrentStep(1)} className='mx-auto w-full'>Back</Button>
-        <Button onClick={() => setCurrentStep(3)} disabled={transactionStatus !== 'confirmed'} className='mx-auto w-full'>Continue</Button>
-      </div>
+    <div className='flex flex-col gap-6 mt-6'>
+      {cryptoPriceWidget}
+      {transactionStatus === 'unpaid' ? (
+        <Button
+          onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
+          className='mx-auto w-full'
+          disabled={loadingPrice}
+        >
+          Pay
+        </Button>
+      ) : (
+        <Button onClick={nextStep} className='mx-auto w-full'>Continue</Button>
+      )}
     </div>
   )
 })

package/components/checkout/payment/payment-methods/amex.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Amex: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    viewBox="0 0 38 24"
+    aria-labelledby="pi-american_express"
+    {...props}
+  >
+    <title id="pi-american_express">American Express</title>
+    <g fill="none">
+      <path
+        fill="#000"
+        d="M35,0 L3,0 C1.3,0 0,1.3 0,3 L0,21 C0,22.7 1.4,24 3,24 L35,24 C36.7,24 38,22.7 38,21 L38,3 C38,1.3 36.6,0 35,0 Z"
+        opacity=".07"
+      />
+      <path
+        fill="#006FCF"
+        d="M35,1 C36.1,1 37,1.9 37,3 L37,21 C37,22.1 36.1,23 35,23 L3,23 C1.9,23 1,22.1 1,21 L1,3 C1,1.9 1.9,1 3,1 L35,1"
+      />
+      <path
+        fill="#FFF"
+        d="M8.971,10.268 L9.745,12.144 L8.203,12.144 L8.971,10.268 Z M25.046,10.346 L22.069,10.346 L22.069,11.173 L24.998,11.173 L24.998,12.412 L22.075,12.412 L22.075,13.334 L25.052,13.334 L25.052,14.073 L27.129,11.828 L25.052,9.488 L25.046,10.346 L25.046,10.346 Z M10.983,8.006 L14.978,8.006 L15.865,9.941 L16.687,8 L27.057,8 L28.135,9.19 L29.25,8 L34.013,8 L30.494,11.852 L33.977,15.68 L29.143,15.68 L28.065,14.49 L26.94,15.68 L10.03,15.68 L9.536,14.49 L8.406,14.49 L7.911,15.68 L4,15.68 L7.286,8 L10.716,8 L10.983,8.006 Z M19.646,9.084 L17.407,9.084 L15.907,12.62 L14.282,9.084 L12.06,9.084 L12.06,13.894 L10,9.084 L8.007,9.084 L5.625,14.596 L7.18,14.596 L7.674,13.406 L10.27,13.406 L10.764,14.596 L13.484,14.596 L13.484,10.661 L15.235,14.602 L16.425,14.602 L18.165,10.673 L18.165,14.603 L19.623,14.603 L19.647,9.083 L19.646,9.084 Z M28.986,11.852 L31.517,9.084 L29.695,9.084 L28.094,10.81 L26.546,9.084 L20.652,9.084 L20.652,14.602 L26.462,14.602 L28.076,12.864 L29.624,14.602 L31.499,14.602 L28.987,11.852 L28.986,11.852 Z"
+      />
+    </g>
+  </svg>
+
+)
+
+export default Amex

package/components/checkout/payment/payment-methods/diners-club.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const DinersClub: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg enableBackground="new 0 0 780 500" viewBox="0 0 780 500" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="m40 0h700c22.092 0 40 17.909 40 40v420c0 22.092-17.908 40-40 40h-700c-22.091 0-40-17.908-40-40v-420c0-22.091 17.909-40 40-40z" fill="#0079be"/>
+    <path d="m599.93 251.45c0-99.415-82.98-168.13-173.9-168.1h-78.242c-92.003-.033-167.73 68.705-167.73 168.1 0 90.93 75.727 165.64 167.73 165.2h78.242c90.914.436 173.9-74.294 173.9-165.2z" fill="#fff"/>
+    <path d="m348.28 97.43c-84.07.027-152.19 68.308-152.21 152.58.02 84.258 68.144 152.53 152.21 152.56 84.09-.027 152.23-68.303 152.24-152.56-.011-84.272-68.149-152.55-152.24-152.58z" fill="#0079be"/>
+    <path d="m252.07 249.6c.08-41.181 25.746-76.297 61.94-90.25v180.48c-36.194-13.948-61.861-49.045-61.94-90.23zm131 90.274v-180.53c36.207 13.92 61.914 49.057 61.979 90.257-.065 41.212-25.772 76.322-61.979 90.269z" fill="#fff"/>
+  </svg>
+)
+
+export default DinersClub

package/components/checkout/payment/payment-methods/discover.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Discover: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    viewBox="0 0 38 24"
+    aria-labelledby="pi-discover"
+    {...props}
+  >
+    <title id="pi-discover">Discover</title>
+    <path
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+      fill="#000"
+      opacity=".07"
+    />
+    <path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" fill="#FFF" />
+    <path d="M37 16.95V21c0 1.1-.9 2-2 2H23.228c7.896-1.815 12.043-4.601 13.772-6.05z" fill="#EDA024" />
+    <path fill="#494949" d="M9 11h20v2H9z" />
+    <path d="M22 12c0 1.7-1.3 3-3 3s-3-1.4-3-3 1.4-3 3-3c1.7 0 3 1.3 3 3z" fill="#EDA024" />
+  </svg>
+)
+
+export default Discover

package/components/checkout/payment/payment-methods/index.tsx

@@ -0,0 +1,24 @@
+import { LockKeyhole } from 'lucide-react'
+import Amex from './amex'
+import Discover from './discover'
+import Mastercard from './mastercard'
+import Visa from './visa'
+import DinersClub from './diners-club'
+import Jcb from './jcb'
+
+const PaymentMethods: React.FC = () => {
+  return (
+    <div className='flex gap-1 items-center'>
+      <LockKeyhole className='w-4 h-4'/>
+      <span className='hidden sm:flex text-sm'>Secure payments with</span>
+      <Amex className='w-9 h-5'/>
+      <Discover className='w-9 h-5'/>
+      <Mastercard className='w-9 h-5'/>
+      <Visa className='w-9 h-5'/>
+      <DinersClub className='w-9 h-5'/>
+      <Jcb className='w-9 h-5'/>
+    </div>
+  )
+}
+
+export default PaymentMethods

package/components/checkout/payment/payment-methods/jcb.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Jcb: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg viewBox="0 0 750 471" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <linearGradient id="a" x1=".031608%" x2="99.974315%" y1="49.999857%" y2="49.999857%">
+      <stop offset="0" stop-color="#007b40"/>
+      <stop offset="1" stop-color="#55b330"/>
+    </linearGradient>
+    <linearGradient id="b" x1=".471693%" x2="99.986009%" y1="49.999826%" y2="49.999826%">
+      <stop offset="0" stop-color="#1d2970"/><stop offset="1" stop-color="#006dba"/>
+    </linearGradient>
+    <linearGradient id="c" x1=".113881%" x2="99.986%" y1="50.000896%" y2="50.000896%">
+      <stop offset="0" stop-color="#6e2b2f"/><stop offset="1" stop-color="#e30138"/>
+    </linearGradient>
+    <g fill="none">
+      <rect fill="#0e4c96" height="471" rx="40" width="750"/>
+      <path d="m617.243183 346.766281c0 41.614606-33.728291 75.359693-75.359693 75.359693h-409.126667v-297.881058c0-41.6262334 33.733028-75.3704593 75.36486-75.3704593l409.1215-.0004307-.000431 297.892255z" fill="#fff"/>
+      <path d="m483.858874 242.044797c11.683825.253488 23.437314-.515991 35.07713.400086 11.78724 2.200795 14.627911 20.042991 4.156336 25.887628-7.141594 3.849604-15.632844 1.432185-23.379012 2.113697h-15.854454zm41.832952-32.14431c2.596665 9.164192-6.237923 17.391631-15.065909 16.130079h-26.767043c.184884-8.642125-.367529-18.021593.272179-26.208903 10.723889.301723 21.548523-.615814 32.209341.48019 4.581405 1.149705 8.413541 4.915859 9.351432 9.598634zm64.428586-135.9032616c.49746 17.5012286.071059 35.9264246.213178 53.7829666-.034453 72.596166.072352 145.193982-.054694 217.789111-.468476 27.207289-24.582372 50.844375-51.600147 51.387391-27.045829.111757-54.094452.015934-81.141353.047803v-109.751206c29.469604-.153488 58.958644.307709 88.416125-.231697 13.667199-.858825 28.632506-9.875899 29.269759-24.91422 1.610381-15.101891-12.631152-25.550189-26.152184-27.20169-5.198323-.135142-5.043964-1.514838 0-2.116712 12.891974-2.786489 23.019579-16.133185 19.22569-29.498743-3.236266-14.057855-18.772947-19.498809-31.69642-19.472461-26.351818-.179156-52.709067-.025409-79.06297-.076658.171189-20.488702-.35448-41.000457.285314-61.473746 2.087651-26.7159874 26.805893-48.7478321 53.447049-48.269708 26.283407-.0002868 52.567978.0005741 78.850653-.0004306z" fill="url(#a)"/>
+      <path d="m159.740429 125.040498c.67326-27.1638388 24.88819-50.6114681 51.874368-51.0079582 26.944696-.0825712 53.891407-.0116279 80.836874-.0353144-.074031 90.8852626.148234 181.7764466-.11137 272.6579966-1.038003 26.83358-24.989753 49.833439-51.678945 50.30707-26.996341.098665-53.995081.013782-80.992344.042205v-113.453622c26.222611 6.194616 53.722126 8.831643 80.473394 4.721367 15.992103-2.574874 33.487529-10.424216 38.901855-27.014675 3.985861-14.1913 1.741462-29.125965 2.333766-43.691102v-33.824924h-46.296781c-.20814 22.370604.426012 44.780906-.3351 67.125566-1.248296 13.734107-14.845999 22.459889-27.799718 21.994694-16.066681.168734-47.898878-11.640005-47.898878-11.640005-.080058-41.916996.466764-94.407411.692879-136.181298z" fill="url(#b)"/>
+      <path d="m309.719995 197.390136c-2.434207.517244-.490854-8.300677-1.113697-11.646172.165935-21.150327-.346253-42.323013.28342-63.458137 2.082823-26.8287443 26.991544-48.9157165 53.73903-48.288171h78.765812c-.073902 90.88469.147933 181.775284-.111154 272.656278-1.038994 26.834093-24.992062 49.833168-51.681319 50.308358-26.997482.099699-53.99738.014212-80.995789.042636v-124.297304c18.440112 15.128222 43.49944 17.484624 66.471655 17.52586 17.317057-.006029 34.533908-2.675619 51.35019-6.67055v-22.772637c-18.953485 9.446312-41.233335 15.445518-62.243398 10.017669-14.655694-3.650599-25.293855-17.811283-25.056232-32.935762-1.698503-15.72852 7.524118-32.335319 22.981724-37.011349 19.190686-6.00831 40.10755-1.412401 58.096107 6.39794 3.854182 2.018155 7.764316 4.521547 6.221799-1.920751v-17.899686c-30.084562-7.157407-62.101499-9.791953-92.328705-2.004739-8.748245 2.468155-17.271248 6.211028-24.379443 11.956517z" fill="url(#c)"/>
+    </g>
+  </svg>
+)
+
+export default Jcb

package/components/checkout/payment/payment-methods/mastercard.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Mastercard: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    viewBox="0 0 38 24"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby="pi-master"
+    {...props}
+  >
+    <title id="pi-master">Mastercard</title>
+    <path
+      opacity=".07"
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+    />
+    <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
+    <circle fill="#EB001B" cx="15" cy="12" r="7" />
+    <circle fill="#F79E1B" cx="23" cy="12" r="7" />
+    <path
+      fill="#FF5F00"
+      d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"
+    />
+  </svg>
+)
+
+export default Mastercard

package/components/checkout/payment/payment-methods/visa.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Visa: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    viewBox="0 0 38 24"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby="pi-visa"
+    {...props}
+  >
+    <title id="pi-visa">Visa</title>
+    <path
+      opacity=".07"
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+    />
+    <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
+    <path
+      d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z"
+      fill="#142688"
+    />
+  </svg>
+)
+
+export default Visa

package/components/checkout/shipping-info.tsx

@@ -40,11 +40,9 @@ const shippingFormSchema = z.object({
 
 const ShippingInfo: React.FC<{
   orderId?: string,
-  paymentMethod?: string,
   setCurrentStep: (currentStep: number) => void
 }> = ({
   orderId,
-  paymentMethod,
   setCurrentStep
 }) => { 
   const auth = useAuth()
@@ -65,10 +63,10 @@ const ShippingInfo: React.FC<{
   })
 
   const onSubmit = async (values: z.infer<typeof shippingFormSchema>) => {
-    if (auth.user && orderId && paymentMethod) {
-      await cmmc.updateOrder(orderId, auth.user.email, paymentMethod, values)
+    if (auth.user && orderId) {
+      await cmmc.updateOrderShippingInfo(orderId, values)
     }
-    setCurrentStep(4)
+    setCurrentStep(3)
   }
 
   return (
@@ -198,11 +196,7 @@ const ShippingInfo: React.FC<{
             />
           </div>
         </div>
-
-        <div className='flex gap-4 items-center mt-6'>
-          <Button variant='outline' onClick={() => setCurrentStep(2)} className='mx-auto w-full'>Back</Button>
-          <Button type='submit' className='mx-auto w-full'>Confirm order</Button>
-        </div>
+        <Button type='submit' className='mx-auto w-full mt-4'>Confirm order</Button>
       </form>
     </Form>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -29,10 +29,12 @@
   "dependencies": {
     "ethers": "^6.11.1",
     "next-usequerystate": "^1.17.0",
-    "react-mobile-picker": "^1.0.0"
+    "react-mobile-picker": "^1.0.0",
+    "react-square-web-payments-sdk": "^3.2.1",
+    "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.0.0",
+    "@hanzo/auth": "^2.0.1",
     "@hanzo/ui": "^3.0.0",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",

package/service/impls/standalone/orders/index.ts

@@ -23,9 +23,10 @@ const getDBInstance = (name: string): Firestore => {
  
 interface SavedOrder {
   email: string
-  paymentMethod: string
+  name: string
   // TODO: add shippingInfo type
   shippingInfo?: any
+  paymentInfo?: any
   status: string
   timestamp: FieldValue
   items: ActualLineItemSnapshot[]
@@ -33,16 +34,16 @@ interface SavedOrder {
 
 const createOrder = async (
   email: string,
-  paymentMethod: string,
   items: ActualLineItemSnapshot[],
   options: {
     dbName: string
     ordersTable: string
-  }
+  },
+  name?: string
 ): Promise<{
   success: boolean,
   error: any,
-  id?: string
+  id?: string,
 }> => {  
 
   let error: any | null = null
@@ -52,7 +53,7 @@ const createOrder = async (
   try {
     await setDoc(doc(ordersRef, orderId), {
       email,
-      paymentMethod,
+      name: name ?? '',
       status: 'open',
       timestamp: serverTimestamp(),
       items,
@@ -67,17 +68,13 @@ const createOrder = async (
   return { success: !error, error }  
 }
 
-const updateOrder = async (
+const updateOrderShippingInfo = async (
   orderId: string,
-  email: string,
-  paymentMethod: string,
-  // TODO: add shippingInfo type
-  items: ActualLineItemSnapshot[],
+  shippingInfo: any,
   options: {
     dbName: string
     ordersTable: string
-  },
-  shippingInfo?: any
+  }
 ): Promise<{
   success: boolean,
   error: any
@@ -88,20 +85,45 @@ const updateOrder = async (
 
   try {
     await setDoc(doc(ordersRef, orderId), {
-      email,
-      paymentMethod,
       shippingInfo,
-      status: 'open',
       timestamp: serverTimestamp(),
-      items,
-    } satisfies SavedOrder)
+    }, { merge: true })
   } 
   catch (e) {  
-      console.error('Error writing item document: ', e)
-      error = e  
+    console.error('Error writing item document: ', e)
+    error = e  
+  }  
+  
+  return { success: !error, error }  
+}
+
+const updateOrderPaymentInfo = async (
+  orderId: string,
+  paymentInfo: any,
+  options: {
+    dbName: string
+    ordersTable: string
+  }
+): Promise<{
+  success: boolean,
+  error: any
+}> => {  
+
+  let error: any | null = null
+  const ordersRef = collection(getDBInstance(options.dbName), options.ordersTable)
+
+  try {
+    await setDoc(doc(ordersRef, orderId), {
+      paymentInfo,
+      timestamp: serverTimestamp(),
+    }, { merge: true })
+  } 
+  catch (e) {  
+    console.error('Error writing item document: ', e)
+    error = e  
   }  
   
   return { success: !error, error }  
 }
 
-export { createOrder, updateOrder }
+export { createOrder, updateOrderShippingInfo, updateOrderPaymentInfo }

package/service/impls/standalone/standalone-service.ts

@@ -17,7 +17,8 @@ import type {
 
 import {
   createOrder as createOrderHelper,
-  updateOrder as updateOrderHelper
+  updateOrderShippingInfo as updateOrderShippingInfoHelper,
+  updateOrderPaymentInfo as updateOrderPaymentInfoHelper
 } from './orders'
 
 import ActualLineItem, { type ActualLineItemSnapshot } from './actual-line-item'
@@ -88,16 +89,20 @@ class StandaloneService
     })
   }
 
-  async createOrder(email: string, paymentMethod: string): Promise<string | undefined> {
+  async createOrder(email: string, name?: string): Promise<string | undefined> {
     const snapshot = this.takeSnapshot()
-    const order = await createOrderHelper(email, paymentMethod, snapshot.items, this._options) // didn't want to have two levels of 'items'
+    const order = await createOrderHelper(email, snapshot.items, this._options, name) // didn't want to have two levels of 'items'
     return order.id
   }
 
   // TODO: add shippingInfo type
-  async updateOrder(orderId: string, email: string, paymentMethod: string, shippingInfo?: any): Promise<void> {
-    const snapshot = this.takeSnapshot()
-    updateOrderHelper(orderId, email, paymentMethod, snapshot.items, this._options, shippingInfo) // didn't want to have two levels of 'items'
+  async updateOrderShippingInfo(orderId: string, shippingInfo: any): Promise<void> {
+    updateOrderShippingInfoHelper(orderId, shippingInfo, this._options)
+  }
+
+  // TODO: add paymentInfo type
+  async updateOrderPaymentInfo(orderId: string, paymentInfo: any): Promise<void> {
+    updateOrderPaymentInfoHelper(orderId, paymentInfo, this._options)
   }
 
   takeSnapshot = (): StandaloneServiceSnapshot => ({

package/types/checkout.ts

@@ -0,0 +1,6 @@
+
+type TransactionStatus = 'unpaid' | 'paid' | 'confirmed' | 'error'
+
+export {
+  type TransactionStatus as default
+}

package/types/commerce-service.ts

@@ -13,9 +13,9 @@ interface CommerceService extends ObsLineItemRef {
    
   getCartCategorySubtotal(categoryId: string): number
 
-  createOrder(email: string, paymentMethod: string): Promise<string | undefined>
-  // TODO: add shippingInfo type
-  updateOrder(orderId: string, email: string, paymentMethod: string, shippingInfo?: any): Promise<void>
+  createOrder(email: string, name?: string): Promise<string | undefined>
+  updateOrderShippingInfo(orderId: string, shippingInfo: any): Promise<void>
+  updateOrderPaymentInfo(orderId: string, paymentInfo: any): Promise<void>
 
     /** 
      * Sets the tokens at each level supplied.

package/types/index.ts

@@ -2,9 +2,7 @@
 export type { default as CommerceService } from './commerce-service'
 export type { default as Product } from './product'
 export type { default as Category } from './category'
+export type { default as TransactionStatus } from './checkout'
 export * from './line-item'
 export * from './facet'
 export * from './string-mutator'
-
-
-

package/util/index.ts

@@ -28,4 +28,5 @@ export function formatPrice(price: number): string {
 }
 
 
-export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'
+export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'
+export { default as processSquareCardPayment } from './square-payment'

package/util/square-payment.ts

@@ -0,0 +1,43 @@
+'use server'
+
+import { Client, Environment } from 'square'
+import { randomUUID } from 'crypto'
+
+// https://developer.squareup.com/blog/online-payments-with-square-and-react/
+declare global {
+  interface BigInt {
+    toJSON(): string;
+  }
+}
+
+BigInt.prototype.toJSON = function() { return this.toString(); }
+
+const { paymentsApi } = new Client({
+  accessToken: process.env.SQUARE_ACCESS_TOKEN,
+  environment: process.env.SQUARE_ENVIRONMENT as Environment
+})
+
+const processPayment = async (sourceId: string, amount: number, verificationToken: string) => {
+  // Square API accepts amount in cents
+  const amountInCents = amount * 100
+
+  try {
+    const { result } = await paymentsApi.createPayment({
+      idempotencyKey: randomUUID(),
+      sourceId: sourceId,
+      amountMoney: {
+        currency: 'USD',
+        amount: BigInt(amountInCents)
+      },
+      verificationToken
+    })
+    return result
+  } catch (error) {
+    console.error('Error processing payment:', error)
+    return null
+  }
+}
+
+export {
+  processPayment as default 
+}