feat: Show Klarna widget

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

src/components/KlarnaPayment.tsx

@@ -193,15 +193,43 @@ export default function KlarnaPayment({
   locale = 'auto',
   ...p
 }: KlarnaPaymentProps) {
+  const { paymentSource } = useContext(PaymentMethodContext)
   const loaded = useExternalScript('https://x.klarnacdn.net/kp/lib/v1/api.js')
-  console.log('loaded', loaded)
+  const [klarna, setKlarna] = useState<any>()
+  const {
+    containerClassName,
+    templateCustomerSaveToWallet,
+    fonts = [],
+    ...divProps
+  } = p
+  useEffect(() => {
+    if (loaded && window?.Klarna !== undefined) {
+      setKlarna(window.Klarna)
+    }
+  }, [loaded, window.Klarna])
+  if (klarna && clientToken) {
+    // @ts-ignore
+    const [first] = paymentSource?.payment_methods
+    klarna.Payments.init({
+      client_token: clientToken,
+    })
+    klarna.Payments.load(
+      {
+        container: '#klarna-payments-container',
+        payment_method_category: first?.indentifier,
+      },
+      {},
+      (res: any) => {
+        console.log('res', res)
+      }
+    )
+  }
+  console.log('Klarna', klarna, clientToken)
   // const [isLoaded, setIsLoaded] = useState(false)
   // const [stripe, setStripe] = useState(null)
-  // const {
-  //   containerClassName,
-  //   templateCustomerSaveToWallet,
-  //   fonts = [],
-  //   ...divProps
-  // } = p
-  return null
+  return (
+    <div className={containerClassName} {...divProps}>
+      <div id="klarna-payments-container"></div>
+    </div>
+  )
 }

src/components/gateways/KlarnaGateway.tsx

@@ -38,11 +38,10 @@ export default function KlarnaGateway(props: KlarnaGateway) {
   const locale = order?.language_code
 
   if (!readonly && payment?.id !== currentPaymentMethodId) return null
-
   // @ts-ignore
   const clientToken = paymentSource?.client_token
-  const stripeConfig = config
-    ? getPaymentConfig<'stripePayment'>(paymentResource, config)
+  const klarnaConfig = config
+    ? getPaymentConfig<'klarnaPayment'>(paymentResource, config)
     : {}
   const customerPayments =
     !isEmpty(payments) && payments
@@ -76,7 +75,7 @@ export default function KlarnaGateway(props: KlarnaGateway) {
           templateCustomerSaveToWallet={templateCustomerSaveToWallet}
           clientToken={clientToken}
           locale={locale}
-          {...stripeConfig}
+          {...klarnaConfig}
         />
       </Fragment>
     )
@@ -87,7 +86,7 @@ export default function KlarnaGateway(props: KlarnaGateway) {
       show={show}
       clientToken={clientToken}
       locale={locale}
-      {...stripeConfig}
+      {...klarnaConfig}
     />
   ) : (
     loaderComponent