feat: Update checkout_com_payments with card token

commercelayer · Feb 23, 2022 · e27ec3c · e27ec3c
1 parent dd54cf6
commit e27ec3c
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 22 deletions.
diff --git a/src/components/CheckoutComPayment.tsx b/src/components/CheckoutComPayment.tsx
@@ -1,15 +1,23 @@
 import React, {
   FunctionComponent,
+  useContext,
   // SyntheticEvent,
   // useContext,
   useEffect,
+  useRef,
   // useRef,
   // useState,
 } from 'react'
 // import PaymentMethodContext from '#context/PaymentMethodContext'
-import { PaymentMethodConfig } from '#reducers/PaymentMethodReducer'
+import {
+  PaymentMethodConfig,
+  setPaymentMethodErrors,
+} from '#reducers/PaymentMethodReducer'
 import { PaymentSourceProps } from './PaymentSource'
 import useExternalScript from '#utils/hooks/useExternalScript'
+import PaymentMethodContext from '#context/PaymentMethodContext'
+import { Frames, CardNumber, ExpiryDate, Cvv } from 'frames-react'
+import OrderContext from '#context/OrderContext'
 const scriptUrl = 'https://cdn.checkout.com/js/framesv2.min.js'
 // import Parent from './utils/Parent'
 // import OrderContext from '#context/OrderContext'
@@ -23,11 +31,6 @@ export type CheckoutComConfig = {
   [key: string]: unknown
 }
 
-// type StripePaymentFormProps = {
-//   options?: StripeCardElementOptions
-//   templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet']
-// }
-
 // const defaultOptions = {
 //   style: {
 //     base: {
@@ -59,22 +62,102 @@ const CheckoutComPayment: FunctionComponent<CheckoutComPaymentProps> = ({
   locale = 'auto',
   ...p
 }) => {
+  const ref = useRef<null | HTMLFormElement>(null)
   const loaded = useExternalScript(scriptUrl)
+  const {
+    setPaymentRef,
+    currentPaymentMethodType,
+    paymentSource,
+    setPaymentSource,
+  } = useContext(PaymentMethodContext)
+  const { order } = useContext(OrderContext)
   const {
     containerClassName,
     // templateCustomerSaveToWallet,
     // fonts = [],
     ...divProps
   } = p
-  useEffect(() => {
-    // @ts-ignore
-    if (loaded && publicKey) window.Frames.init(publicKey)
-  }, [loaded, publicKey])
-
+  const handleClick = async (): Promise<boolean> => {
+    if (window.Frames) {
+      window.Frames.cardholder = {
+        name: order?.billing_address?.full_name,
+        billingAddress: {
+          addressLine1: order?.billing_address?.line_1,
+          addressLine2: order?.billing_address?.line_2,
+          zip: order?.billing_address?.zip_code,
+          city: order?.billing_address?.city,
+          state: order?.billing_address?.state_code,
+          country: order?.billing_address?.country_code,
+        },
+        phone: order?.billing_address?.phone,
+      }
+      try {
+        const data = await window.Frames.submitCard()
+        console.log('data', data)
+        if (data.token && paymentSource && currentPaymentMethodType) {
+          await setPaymentSource({
+            paymentSourceId: paymentSource.id,
+            paymentResource: currentPaymentMethodType,
+            attributes: {
+              token: data.token,
+              payment_type: 'token',
+              // _details: true,
+            },
+          })
+          debugger
+          // return true
+        }
+      } catch (error) {
+        console.error(error)
+        debugger
+        // setPaymentMethodErrors([
+        //   {
+        //     code: 'PAYMENT_INTENT_AUTHENTICATION_FAILURE',
+        //     resource: 'payment_methods',
+        //     field: currentPaymentMethodType,
+        //     message: error?.message as string,
+        //   },
+        // ])
+      }
+    }
+    return false
+  }
   return loaded ? (
-    <div className={containerClassName} {...divProps}>
-      <div className="card-frame"></div>
-    </div>
+    <form ref={ref}>
+      <div className={containerClassName} {...divProps}>
+        <Frames
+          config={{
+            debug: true,
+            publicKey,
+            // localization: {
+            //   cardNumberPlaceholder: 'Card number',
+            //   expiryMonthPlaceholder: 'MM',
+            //   expiryYearPlaceholder: 'YY',
+            //   cvvPlaceholder: 'CVV',
+            // },
+            // style: {
+            //   base: {
+            //     fontSize: '17px',
+            //   },
+            // },
+          }}
+          cardValidationChanged={(e) => {
+            if (e.isValid && ref.current) {
+              ref.current.onsubmit = () => handleClick()
+              setPaymentRef({ ref })
+            }
+          }}
+          cardTokenized={(data) => data}
+          cardBinChanged={(e) => {
+            // debugger
+          }}
+        >
+          <CardNumber />
+          <ExpiryDate />
+          <Cvv />
+        </Frames>
+      </div>
+    </form>
   ) : null
 }
 

diff --git a/src/components/gateways/CheckoutComGateway.tsx b/src/components/gateways/CheckoutComGateway.tsx
@@ -35,20 +35,20 @@ export default function CheckoutComGateway(props: CheckoutComGateway) {
   const { payments, isGuest } = useContext(CustomerContext)
   const { currentPaymentMethodId, config, paymentSource } =
     useContext(PaymentMethodContext)
-  const paymentResource: PaymentResource = 'stripe_payments'
+  const paymentResource: PaymentResource = 'checkout_com_payments'
   const locale = order?.language_code as StripeElementLocale
 
   if (!readonly && payment?.id !== currentPaymentMethodId) return null
 
   // @ts-ignore
   const publicKey = paymentSource?.public_key
   const paymentConfig = config
-    ? getPaymentConfig<'stripePayment'>(paymentResource, config)
+    ? getPaymentConfig<'checkoutComPayment'>(paymentResource, config)
     : {}
   const customerPayments =
     !isEmpty(payments) && payments
       ? payments.filter((customerPayment) => {
-          return customerPayment.payment_source?.type === 'stripe_payments'
+          return customerPayment.payment_source?.type === paymentResource
         })
       : []
 

diff --git a/src/reducers/PaymentMethodReducer.ts b/src/reducers/PaymentMethodReducer.ts
@@ -243,11 +243,7 @@ export type SetPaymentSource = (
     config?: CommerceLayerConfig
     dispatch?: Dispatch<PaymentMethodAction>
     getOrder?: getOrderContext
-    attributes?: Record<
-      string,
-      | string
-      | Record<string, string | number | undefined | Record<string, string>>
-    >
+    attributes?: Record<string, unknown>
     order?: Order
     paymentResource: PaymentResource
     paymentSourceId?: string