feat: Import Klarna external JS script

commercelayer · Apr 12, 2022 · 888465b · 888465b
1 parent 21bbc01
commit 888465b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 41 deletions.
diff --git a/src/components/KlarnaPayment.tsx b/src/components/KlarnaPayment.tsx
@@ -22,6 +22,7 @@ import { PaymentSourceProps } from './PaymentSource'
 import Parent from './utils/Parent'
 import OrderContext from '#context/OrderContext'
 import { setCustomerOrderParam } from '#utils/localStorage'
+import useExternalScript from '#utils/hooks/useExternalScript'
 
 export type KlarnaConfig = {
   // containerClassName?: string
@@ -192,38 +193,15 @@ export default function KlarnaPayment({
   locale = 'auto',
   ...p
 }: KlarnaPaymentProps) {
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [stripe, setStripe] = useState(null)
-  const {
-    containerClassName,
-    templateCustomerSaveToWallet,
-    fonts = [],
-    ...divProps
-  } = p
-  useEffect(() => {
-    if (show && clientToken) {
-      const { loadStripe } = require('@stripe/stripe-js')
-      const getStripe = async () => {
-        const res = await loadStripe(clientToken, {
-          locale,
-        })
-        setStripe(res)
-        setIsLoaded(true)
-      }
-      getStripe()
-    }
-    return () => {
-      setIsLoaded(false)
-    }
-  }, [show, clientToken])
-  return isLoaded && stripe ? (
-    <div className={containerClassName} {...divProps}>
-      <Elements stripe={stripe} options={{ fonts }}>
-        {/* <StripePaymentForm
-          options={options}
-          templateCustomerSaveToWallet={templateCustomerSaveToWallet}
-        /> */}
-      </Elements>
-    </div>
-  ) : null
+  const loaded = useExternalScript('https://x.klarnacdn.net/kp/lib/v1/api.js')
+  console.log('loaded', loaded)
+  // const [isLoaded, setIsLoaded] = useState(false)
+  // const [stripe, setStripe] = useState(null)
+  // const {
+  //   containerClassName,
+  //   templateCustomerSaveToWallet,
+  //   fonts = [],
+  //   ...divProps
+  // } = p
+  return null
 }
diff --git a/src/components/PaymentGateway.tsx b/src/components/PaymentGateway.tsx
@@ -19,6 +19,7 @@ import PaypalGateway from './gateways/PaypalGateway'
 import WireTransferGateway from './gateways/WireTransferGateway'
 import CustomerContext from '#context/CustomerContext'
 import CheckoutComGateway from './gateways/CheckoutComGateway'
+import KlarnaGateway from './gateways/KlarnaGateway'
 
 export type GatewayBaseType = PaymentGatewayProps & {
   show: boolean
@@ -111,7 +112,7 @@ const PaymentGateway: FunctionComponent<PaymentGatewayProps> = ({
     case 'stripe_payments':
       return <StripeGateway {...gatewayConfig}>{children}</StripeGateway>
     case 'klarna_payments':
-      return <StripeGateway {...gatewayConfig}>{children}</StripeGateway>
+      return <KlarnaGateway {...gatewayConfig}>{children}</KlarnaGateway>
     case 'adyen_payments':
       return <AdyenGateway {...gatewayConfig}>{children}</AdyenGateway>
     case 'braintree_payments':

diff --git a/src/components/gateways/KlarnaGateway.tsx b/src/components/gateways/KlarnaGateway.tsx
@@ -1,5 +1,6 @@
+import React, { Fragment, useContext } from 'react'
+import KlarnaPayment from '#components/KlarnaPayment'
 import { GatewayBaseType } from '#components/PaymentGateway'
-import StripePayment from '#components/StripePayment'
 import CustomerContext from '#context/CustomerContext'
 import OrderContext from '#context/OrderContext'
 import PaymentMethodChildrenContext from '#context/PaymentMethodChildrenContext'
@@ -10,7 +11,6 @@ import {
   PaymentResource,
 } from '#reducers/PaymentMethodReducer'
 import isEmpty from 'lodash/isEmpty'
-import React, { Fragment, useContext } from 'react'
 import PaymentCardsTemplate from '../utils/PaymentCardsTemplate'
 
 type KlarnaGateway = GatewayBaseType
@@ -47,7 +47,7 @@ export default function KlarnaGateway(props: KlarnaGateway) {
   const customerPayments =
     !isEmpty(payments) && payments
       ? payments.filter((customerPayment) => {
-          return customerPayment.payment_source?.type === 'klarna_payments'
+          return customerPayment.payment_source?.type === paymentResource
         })
       : []
 
@@ -71,7 +71,7 @@ export default function KlarnaGateway(props: KlarnaGateway) {
             </PaymentCardsTemplate>
           </div>
         )}
-        <StripePayment
+        <KlarnaPayment
           show={show}
           templateCustomerSaveToWallet={templateCustomerSaveToWallet}
           clientToken={clientToken}
@@ -83,7 +83,7 @@ export default function KlarnaGateway(props: KlarnaGateway) {
   }
 
   return clientToken && !loading ? (
-    <StripePayment
+    <KlarnaPayment
       show={show}
       clientToken={clientToken}
       locale={locale}

diff --git a/src/components/gateways/StripeGateway.tsx b/src/components/gateways/StripeGateway.tsx
@@ -48,7 +48,7 @@ export default function StripeGateway(props: StripeGateway) {
   const customerPayments =
     !isEmpty(payments) && payments
       ? payments.filter((customerPayment) => {
-          return customerPayment.payment_source?.type === 'stripe_payments'
+          return customerPayment.payment_source?.type === paymentResource
         })
       : []