@libreapps/commerce 7.5.1

package/components/checkout/payment-step-form/card-icons/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-step-form/card-icons/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" stopColor="#007b40"/>
+      <stop offset="1" stopColor="#55b330"/>
+    </linearGradient>
+    <linearGradient id="b" x1=".471693%" x2="99.986009%" y1="49.999826%" y2="49.999826%">
+      <stop offset="0" stopColor="#1d2970"/><stop offset="1" stopColor="#006dba"/>
+    </linearGradient>
+    <linearGradient id="c" x1=".113881%" x2="99.986%" y1="50.000896%" y2="50.000896%">
+      <stop offset="0" stopColor="#6e2b2f"/><stop offset="1" stopColor="#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-step-form/card-icons/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-step-form/card-icons/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/payment-step-form/cc-button.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@libreapps/ui/primitives'
+
+import PaymentMethods from './card-icon-row'
+import type { PropsWithChildren } from 'react'
+
+const CCButton: React.FC<PropsWithChildren> = ({
+  children
+}) => (
+  <Button variant='outline' size='lg' className='flex items-center' >
+    <div className='font-sans text-base mr-2 text-muted'>CC</div>
+    <PaymentMethods />
+    {children}
+  </Button>
+)
+
+
+export default CCButton

package/components/checkout/payment-step-form/contact-form.tsx

@@ -0,0 +1,50 @@
+import { Input } from '@libreapps/ui/primitives'
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@libreapps/ui/form'
+
+import type { ContactFormType } from '../../../types'
+ 
+const ContactForm: React.FC<{
+  form: ContactFormType,
+}> = ({
+  form,
+}) => (
+  <Form {...form}>
+    <form className='text-left'>
+      <div className='flex flex-col gap-1 sm:gap-2'>
+        <FormField
+          control={form.control}
+          name='name'
+          render={({ field }) => (
+            <FormItem className='w-full'>
+              <FormControl>
+                <Input {...field} placeholder='Full name'/>
+              </FormControl>
+              <FormMessage className='py-0 space-y-0 !m-0'/>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem className='w-full'>
+              <FormControl>
+                <Input {...field} placeholder='Email'/>
+              </FormControl>
+              <FormMessage className='py-0 space-y-0 !m-0'/>
+            </FormItem>
+          )}
+        />
+      </div>
+    </form>
+  </Form>
+)
+
+export default ContactForm

package/components/checkout/payment-step-form/crypto-icons/btc.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Btc: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0.004 0 64 64" {...props}>
+		<path d="M63.04 39.741c-4.274 17.143-21.638 27.575-38.783 23.301C7.12 58.768-3.313 41.404.962 24.262 5.234 7.117 22.597-3.317 39.737.957c17.144 4.274 27.576 21.64 23.302 38.784z" fill="#f7931a"/>
+		<path d="M46.11 27.441c.636-4.258-2.606-6.547-7.039-8.074l1.438-5.768-3.512-.875-1.4 5.616c-.922-.23-1.87-.447-2.812-.662l1.41-5.653-3.509-.875-1.439 5.766c-.764-.174-1.514-.346-2.242-.527l.004-.018-4.842-1.209-.934 3.75s2.605.597 2.55.634c1.422.355 1.68 1.296 1.636 2.042l-1.638 6.571c.098.025.225.061.365.117l-.37-.092-2.297 9.205c-.174.432-.615 1.08-1.609.834.035.051-2.552-.637-2.552-.637l-1.743 4.02 4.57 1.139c.85.213 1.683.436 2.502.646l-1.453 5.835 3.507.875 1.44-5.772c.957.26 1.887.5 2.797.726L27.504 50.8l3.511.875 1.453-5.823c5.987 1.133 10.49.676 12.383-4.738 1.527-4.36-.075-6.875-3.225-8.516 2.294-.531 4.022-2.04 4.483-5.157zM38.087 38.69c-1.086 4.36-8.426 2.004-10.807 1.412l1.928-7.729c2.38.594 10.011 1.77 8.88 6.317zm1.085-11.312c-.99 3.966-7.1 1.951-9.083 1.457l1.748-7.01c1.983.494 8.367 1.416 7.335 5.553z" fill="#ffffff"/>
+	</svg>
+)
+
+export default Btc

package/components/checkout/payment-step-form/crypto-icons/eth.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Eth: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0 0 32 32" {...props}>
+		<g fill="none" fillRule="evenodd">
+			<circle cx="16" cy="16" r="16" fill="#627EEA"/>
+			<g fill="#FFF" fillRule="nonzero">
+				<path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z"/>
+				<path d="M16.498 4L9 16.22l7.498-3.35z"/>
+				<path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z"/>
+				<path d="M16.498 27.995v-6.028L9 17.616z"/>
+				<path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z"/>
+				<path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z"/>
+			</g>
+		</g>
+	</svg>
+)
+
+export default Eth

package/components/checkout/payment-step-form/crypto-icons/usdt.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Usdt: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0 0 32 32" {...props}>
+		<g fill="none" fill-rule="evenodd">
+		<circle cx="16" cy="16" r="16" fill="#26A17B"/>
+		<path fill="#FFF" d="M17.922 17.383v-.002c-.11.008-.677.042-1.942.042-1.01 0-1.721-.03-1.971-.042v.003c-3.888-.171-6.79-.848-6.79-1.658 0-.809 2.902-1.486 6.79-1.66v2.644c.254.018.982.061 1.988.061 1.207 0 1.812-.05 1.925-.06v-2.643c3.88.173 6.775.85 6.775 1.658 0 .81-2.895 1.485-6.775 1.657m0-3.59v-2.366h5.414V7.819H8.595v3.608h5.414v2.365c-4.4.202-7.709 1.074-7.709 2.118 0 1.044 3.309 1.915 7.709 2.118v7.582h3.913v-7.584c4.393-.202 7.694-1.073 7.694-2.116 0-1.043-3.301-1.914-7.694-2.117"/>
+		</g>
+	</svg>
+)
+
+export default Usdt

package/components/checkout/payment-step-form/index.tsx

@@ -0,0 +1,122 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import { useForm } from 'react-hook-form'
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@libreapps/ui/primitives'
+import { useAuth } from '@libreapps/auth/service'
+
+import { useCommerce } from '../../../service/context'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'
+
+import METHODS from './methods'
+
+const contactFormSchema = z.object({
+  name: z.string().min(1, 'Enter your full name.'),
+  email: z.string().email(),
+})
+
+const PaymentStepForm: React.FC<CheckoutStepComponentProps> = observer(({
+  onDone,
+  orderId,
+  setOrderId
+}) => {
+  const cmmc = useCommerce()
+  const auth = useAuth() // may be null in some cases
+
+  const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>('unpaid')
+
+  if (!auth) {
+    console.log("PAYMENT STEP FORM:  auth service is null! ")
+  }
+
+  const contactForm = useForm<z.infer<typeof contactFormSchema>>({
+    resolver: zodResolver(contactFormSchema),
+    defaultValues: {
+      name: auth?.user?.displayName ?? '',
+      email: auth?.user?.email ?? '',
+    },
+  })
+
+  useEffect(() => {
+    if (auth?.loggedIn) {
+      contactForm.setValue('name', auth!.user?.displayName ?? '')
+      contactForm.setValue('email', auth!.user?.email ?? '')
+    }
+  }, [auth?.loggedIn])
+
+  const storePaymentInfo = async (paymentInfo: any) => {
+    const {name, email} = contactForm.getValues()
+    let id: string | undefined = undefined
+    if (!orderId) {
+      id = await cmmc.createOrder(email, name)
+      setOrderId(id)
+    }
+    if (id) {
+      sendGAEvent('add_payment_info', {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.promoAppliedCartTotal,
+        currency: 'USD',
+        payment_type: paymentInfo.paymentMethod ?? ''
+      })
+      sendFBEvent('AddPaymentInfo', {
+        contents: cmmc.cartItems.map(item => ({
+          id: item.sku,
+          quantity: item.quantity
+        })),
+        value: cmmc.promoAppliedCartTotal,
+        currency: 'USD'
+      })
+      await cmmc.updateOrderPaymentInfo(id, paymentInfo)
+    }
+  }
+
+  const groupClx = 'grid w-full grid-cols-3 mx-auto ' + 
+    'p-0 h-auto overflow-hidden ' + 
+    'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 ' 
+
+  const tabClx = 'whitespace-normal h-full text-xs sm:text-base px-1 text-muted ' + 
+    'data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
+
+  const disabled = transactionStatus === 'paid' || transactionStatus === 'confirmed'
+
+  return (
+    <Tabs defaultValue='card' className='w-full'>
+      <TabsList className={groupClx}>
+      {METHODS.map(({ label, value }) => (
+        <TabsTrigger
+          value={value}
+          className={tabClx}
+          disabled={disabled}
+          key={`tabs-${value}`}
+        >
+          {label}
+        </TabsTrigger>
+      ))}
+      </TabsList>
+      {METHODS.map(({Comp: PaymentMethodComp, value}) => (
+        <TabsContent value={value} key={`content-${value}`}>
+          <PaymentMethodComp 
+            onDone={onDone}
+            transactionStatus={transactionStatus}
+            setTransactionStatus={setTransactionStatus}
+            storePaymentInfo={storePaymentInfo}
+            contactForm={contactForm}
+          />
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+})
+
+export default PaymentStepForm

package/components/checkout/payment-step-form/methods/bank-transfer.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import React from 'react'
+import { Copy } from 'lucide-react'
+
+import { Button, toast } from '@libreapps/ui/primitives'
+
+import type { PaymentMethodComponentProps } from '../../../../types'
+
+import ContactForm from '../contact-form'
+
+const InfoField: React.FC<{
+  label: string,
+  value: React.ReactNode,
+  copyValue: string
+}> = ({
+  label,
+  value,
+  copyValue
+}) => {
+
+  const copyToClipboard = (label: string, text: string) => {
+    navigator.clipboard.writeText(text)
+    toast(`${label} copied to clipboard.`)
+  }
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <p className='text-xs'>{label}</p>
+      <div className='flex items-center justify-between sm:text-lg border rounded-lg py-2 px-4'>
+        {value}
+        <Button variant='ghost' size='icon' onClick={() => copyToClipboard(label, copyValue)}>
+          <Copy className='h-4 w-4'/>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const PayWithBankTransfer: React.FC<PaymentMethodComponentProps> = ({
+  onDone,
+  storePaymentInfo,
+  contactForm
+}) => {
+
+  const payByBankTransfer = async () => {
+    contactForm.handleSubmit( async () => {
+      await storePaymentInfo({paymentMethod: 'bank-transfer'})
+      onDone()
+    })()
+  }
+
+  return (
+    <div className='flex flex-col gap-2 mt-6'>
+      <ContactForm form={contactForm}/>
+      <div className='w-full mx-auto max-w-[50rem]'>
+        <div className='flex flex-col gap-4 w-full'>
+          <InfoField
+            label='Beneficiary Bank'
+            value={<div>Bank of America<br/>NA 222 Broadway<br/>New York, New York. 10038</div>}
+            copyValue='Bank of America, NA 222 Broadway, New York, New York. 10038'
+          />
+          <InfoField
+            label='Beneficiary'
+            value={<div>LibreApps, Inc<br/>4811 Mastin Street<br/>Merriam, KS 66203</div>}
+            copyValue='LibreApps, Inc, 4811 Mastin Street, Merriam, KS 66203'
+          />
+          <InfoField label='Routing Number - ACH' value='113000023 / 111000025' copyValue='113000023 / 111000025'/>
+          <InfoField label='Routing Number - Wire' value='026009593' copyValue='026009593'/>
+          <InfoField label='Routing Number - SWIFT' value='BOFAUS3N' copyValue='BOFAUS3N'/>
+          <InfoField label='Reference' value='Lux' copyValue='Lux'/>
+        </div>
+      </div>
+      <Button onClick={payByBankTransfer} className='mx-auto w-full mt-4'>Continue</Button>
+    </div>
+  )
+}
+
+export default PayWithBankTransfer

package/components/checkout/payment-step-form/methods/card.tsx

@@ -0,0 +1,232 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+
+// @ts-ignore
+import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk'
+
+import { observer } from 'mobx-react-lite'
+
+import {
+  ApplyTypography,
+  Button,
+  Separator,
+  Skeleton,
+} from '@libreapps/ui/primitives'
+
+import { cn } from '@libreapps/ui/util'
+
+import { useCommerce } from '../../../../service/context'
+import { processSquareCardPayment } from '../../../../util'
+import type { PaymentMethodComponentProps } from '../../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+
+import ContactInfo from '../contact-form'
+import PaymentMethods from '../card-icon-row'
+
+const PayWithCard: React.FC<PaymentMethodComponentProps> = observer(({
+  onDone,
+  transactionStatus,
+  setTransactionStatus,
+  storePaymentInfo,
+  contactForm,
+}) => {
+  const cmmc = useCommerce()
+
+  const cardTokenizeResponseReceived = async (
+    token: any,
+    verifiedBuyer: any
+  ) => {
+    contactForm.handleSubmit(async () => {
+      setTransactionStatus('paid')
+      const res = await processSquareCardPayment(token.token, cmmc.promoAppliedCartTotal, verifiedBuyer.token)
+      if (res) {
+        await storePaymentInfo({paymentMethod: token.details.method ?? null, processed: res})
+        setTransactionStatus('confirmed')
+        sendGAEvent('purchase', {
+          transaction_id: res.payment?.id,
+          value: res.payment?.amountMoney?.amount,
+          currency: res.payment?.amountMoney?.currency,
+          items: cmmc.cartItems.map((item) => ({
+            item_id: item.sku,
+            item_name: item.title,
+            item_category: item.familyId,
+            price: item.price,
+            quantity: item.quantity
+          })),
+        })
+        sendFBEvent('Purchase', {
+          content_ids: cmmc.cartItems.map((item) => item.sku),
+          contents: cmmc.cartItems.map(item => ({
+            id: item.sku,
+            quantity: item.quantity
+          })),
+          num_items: cmmc.cartItems.length,
+          value: cmmc.promoAppliedCartTotal,
+          currency: 'USD',
+        })
+      } else {
+        setTransactionStatus('error')
+      }
+    })()
+  }
+
+  const createVerificationDetails = (): { amount: string; billingContact: { givenName: string; email: string }; currencyCode: string; intent: 'CHARGE' | 'CHARGE_AND_STORE' } => {
+    const {name, email} = contactForm.getValues()
+    return {
+      amount: cmmc.promoAppliedCartTotal.toFixed(2),
+      billingContact: {
+        givenName: name,
+        email,
+      },
+      currencyCode: 'USD',
+      intent: 'CHARGE' as 'CHARGE',
+    }
+  }
+
+  const createPaymentRequest = () => ({
+    countryCode: "US",
+    currencyCode: "USD",
+    lineItems: cmmc.cartItems.map(item => ({
+      amount: item.price.toFixed(2),
+      label: item.title,
+      id: item.sku,
+    })),
+    requestBillingContact: false,
+    requestShippingContact: false,
+    total: {
+      amount: cmmc.promoAppliedCartTotal.toFixed(2),
+      label: "Total",
+    },
+  })
+
+  /**
+   * Reload payment form after checkout value changes (promo code applied, etc.)
+   * Reloading is required so that Apple Pay and Google Pay buttons are updated for new cart total.
+   */
+  const [loadingPaymentForm, setLoadingPaymentForm] = useState<boolean>(false)
+  useEffect(() => {
+    setLoadingPaymentForm(true)
+    const timeout = setTimeout(() => setLoadingPaymentForm(false), 1000)
+    return () => clearTimeout(timeout)
+  }, [cmmc.promoAppliedCartTotal])
+
+  if (loadingPaymentForm) {
+    return (
+      <div className='flex flex-col gap-2'>
+        <Skeleton className='w-full h-10' />
+        <Skeleton className='w-full h-10' />
+      </div>
+    )
+  }
+
+  return (
+    <PaymentForm
+      /**
+       * Identifies the calling form with a verified application ID generated from
+       * the Square Application Dashboard.
+       */
+      applicationId={process.env.NEXT_PUBLIC_SQUARE_APPLICATION_ID ?? ''}
+      /**
+       * Invoked when payment form receives the result of a tokenize generation
+       * request. The result will be a valid credit card or wallet token, or an error.
+       */
+      cardTokenizeResponseReceived={cardTokenizeResponseReceived}
+      /**
+        * This function enable the Strong Customer Authentication (SCA) flow
+        *
+        * We strongly recommend use this function to verify the buyer and reduce
+        * the chance of fraudulent transactions.
+        */
+      createVerificationDetails={createVerificationDetails}
+      /**
+        * This function is required for digital wallets (Apple Pay, Google Pay)
+        */
+      createPaymentRequest={createPaymentRequest}
+      /**
+       * Identifies the location of the merchant that is taking the payment.
+       * Obtained from the Square Application Dashboard - Locations tab.
+       */
+      locationId={process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID ?? ''}
+    >
+      <ApplyTypography className='flex flex-col mt-6 gap-1'>
+        {transactionStatus === 'paid' ? (
+          <h6 className='mx-auto'>Processing your payment...</h6>
+        ) : transactionStatus === 'confirmed' ? (
+          <div className='flex flex-col gap-4'>
+            <h5 className='mx-auto'>Payment confirmed!</h5>
+            <p className='mx-auto'>Thank you for your purchase.</p>
+            <Button onClick={onDone}>Continue</Button>
+          </div>
+        ) : (
+          <div className='flex flex-col gap-1'>
+            <GooglePay/>
+            <ApplePay/>
+
+            <div className='flex gap-2 whitespace-nowrap items-center my-1 sm:my-3 text-xs text-muted'>
+              <Separator className='grow w-auto'/><div className='shrink-0 mx-1'>or</div><Separator className='grow w-auto'/>
+            </div>
+
+            <PaymentMethods />
+
+            <ContactInfo form={contactForm}/>
+            {/* Imitates libreapps/ui Button and Input styles, I was unable to render the
+              libreapps/ui button outright and keeping the submit form functionality*/}
+            <CreditCard
+              style={{
+                '.input-container': {
+                  borderColor: '#666666',
+                  borderRadius: '8px',
+                },
+                '.input-container.is-focus': {
+                  borderColor: '#ffffff',
+                },
+                '.input-container.is-error': {
+                  borderColor: '#ff1600',
+                },
+                '.message-text': {
+                  color: '#999999',
+                },
+                '.message-icon': {
+                  color: '#999999',
+                },
+                '.message-text.is-error': {
+                  color: '#ff1600',
+                },
+                '.message-icon.is-error': {
+                  color: '#ff1600',
+                },
+                input: {
+                  backgroundColor: 'transparent',
+                  color: '#FFFFFF',
+                  fontSize: '15px',
+                  fontFamily: 'helvetica neue, sans-serif',
+                },
+                'input::placeholder': {
+                  color: '#999999',
+                },
+                'input.is-error': {
+                  color: '#ff1600',
+                },
+              }}
+              render={(Button: any) => (
+                <Button className={cn(
+                  'items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
+                  'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+                  '!bg-primary !text-primary-fg hover:!bg-primary-hover font-nav whitespace-nowrap not-typography h-10 py-2 px-4',
+                  '!text-sm rounded-md lg:min-w-[220px] sm:min-w-[220px] flex'
+                )}>
+                  Pay
+                </Button>
+              )}
+            />
+            {transactionStatus === 'error' && (
+              <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
+            )}
+          </div>
+        )}
+      </ApplyTypography>
+    </PaymentForm>
+  )
+})
+
+export default PayWithCard