@graphcommerce/magento-payment-klarna 10.0.0-canary.72

package/README.md

@@ -0,0 +1,13 @@
+# Magento Payment Klarna
+
+Integrates GraphCommerce with the Magento Klarna module.
+
+## Installation
+
+1. Find current version of your `@graphcommerce/magento-cart-payment-method` in
+   your package.json.
+2. `yarn add @graphcommerce/magento-payment-klarna@1.2.3` (replace 1.2.3 with
+   the version of the step above)
+
+This package uses GraphCommerce plugin systems, so there is no code modification
+required.

package/components/KlarnaPaymentActionCard/KlarnaPaymentActionCard.tsx

@@ -0,0 +1,26 @@
+import { Image } from '@graphcommerce/image'
+import type { PaymentMethodActionCardProps } from '@graphcommerce/magento-cart-payment-method'
+import { ActionCard, useIconSvgSize } from '@graphcommerce/next-ui'
+import Script from 'next/script'
+import klarnaMark from '../../icons/klarna.png'
+
+export function KlarnaPaymentActionCard(props: PaymentMethodActionCardProps) {
+  const iconSize = useIconSvgSize('large')
+
+  return (
+    <>
+      <Script src='https://x.klarnacdn.net/kp/lib/v1/api.js' strategy='lazyOnload' />
+      <ActionCard
+        {...props}
+        image={
+          <Image
+            layout='fixed'
+            sx={{ width: iconSize, height: iconSize, objectFit: 'contain' }}
+            unoptimized
+            src={klarnaMark}
+          />
+        }
+      />
+    </>
+  )
+}

package/components/KlarnaPaymentOptions/KlarnaPaymentOptions.graphql

@@ -0,0 +1,13 @@
+mutation KlarnaPaymentOptions($cartId: String!) {
+  createKlarnaPaymentsSession(input: { cart_id: $cartId }) {
+    client_token
+    payment_method_categories {
+      asset_urls {
+        descriptive
+        standard
+      }
+      identifier
+      name
+    }
+  }
+}

package/components/KlarnaPaymentOptions/KlarnaPaymentOptions.tsx

@@ -0,0 +1,42 @@
+import { useFormAutoSubmit, useFormCompose } from '@graphcommerce/ecommerce-ui'
+import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import type { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
+import { KlarnaPaymentOptionsDocument } from './KlarnaPaymentOptions.gql'
+
+export function KlarnaPaymentOptions(props: PaymentOptionsProps) {
+  const { code, step } = props
+
+  const form = useFormGqlMutationCart(KlarnaPaymentOptionsDocument, {
+    onBeforeSubmit: (variables) => ({
+      ...variables,
+    }),
+    onComplete: async (result) => {
+      if (result.errors) return
+
+      const clientToken = result.data?.createKlarnaPaymentsSession?.client_token
+
+      try {
+        Klarna.Payments.init({ client_token: clientToken })
+        Klarna.Payments.load({ container: '#klarna-payments-container' }, {}, (res) => {
+          console.info(res)
+        })
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    mode: 'onChange',
+  })
+
+  const submit = form.handleSubmit(() => {})
+  useFormAutoSubmit({ form, submit, forceInitialSubmit: true })
+
+  const key = `PaymentMethodOptions_${code}`
+  useFormCompose({ form, step, submit, key })
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <input type='hidden' value={code} />
+      <div id='klarna-payments-container' />
+    </form>
+  )
+}

package/components/KlarnaPaymentPlaceOrder/KlarnaPaymentPlaceOrder.graphql

@@ -0,0 +1,12 @@
+mutation KlarnaPaymentPlaceOrder($cartId: String!, $paymentMethod: PaymentMethodInput!) {
+  setPaymentMethodOnCart(input: { cart_id: $cartId, payment_method: $paymentMethod }) {
+    cart {
+      ...PaymentMethodUpdated
+    }
+  }
+  placeOrder(input: { cart_id: $cartId }) {
+    order {
+      order_number
+    }
+  }
+}

package/components/KlarnaPaymentPlaceOrder/KlarnaPaymentPlaceOrder.tsx

@@ -0,0 +1,102 @@
+import { useFormCompose } from '@graphcommerce/ecommerce-ui'
+import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { BillingPageDocument } from '@graphcommerce/magento-cart-checkout'
+import type { PaymentPlaceOrderProps } from '@graphcommerce/magento-cart-payment-method'
+import { usePaymentMethodContext } from '@graphcommerce/magento-cart-payment-method'
+import { useRouter } from 'next/router'
+import { useKlarnaCartLock } from '../../hooks/useKlarnaCartLock'
+import type { KlarnaResponse } from '../../klarna.d'
+import { KlarnaPaymentPlaceOrderDocument } from './KlarnaPaymentPlaceOrder.gql'
+
+export function KlarnaPaymentPlaceOrder(props: PaymentPlaceOrderProps) {
+  const { code, step } = props
+  const [, lock, unlock] = useKlarnaCartLock()
+  const { reload } = useRouter()
+  const { onSuccess } = usePaymentMethodContext()
+  const cart = useCartQuery(BillingPageDocument)
+
+  const klarnaPaymentsAuthorize = () =>
+    new Promise<KlarnaResponse>((resolve, reject) => {
+      try {
+        Klarna.Payments.authorize(
+          {
+            payment_method_category: 'pay_later',
+          },
+          {
+            billing_address: {
+              given_name: cart.data?.cart?.billing_address?.firstname.toUpperCase(),
+              family_name: cart.data?.cart?.billing_address?.lastname.toUpperCase(),
+              email: cart.data?.cart?.email ?? undefined,
+              street_address: cart.data?.cart?.billing_address?.street.join(' ').toUpperCase(),
+              postal_code: cart.data?.cart?.billing_address?.postcode ?? undefined,
+              phone: cart.data?.cart?.billing_address?.telephone ?? undefined,
+              region: cart.data?.cart?.billing_address?.region?.code,
+              city: cart.data?.cart?.billing_address?.city.toUpperCase(),
+              country: cart.data?.cart?.billing_address?.country.code,
+            },
+            shipping_address: {
+              given_name: cart.data?.cart?.shipping_addresses[0]?.firstname.toUpperCase(),
+              family_name: cart.data?.cart?.shipping_addresses[0]?.lastname.toUpperCase(),
+              email: cart.data?.cart?.email ?? undefined,
+              street_address: cart.data?.cart?.shipping_addresses[0]?.street
+                .join(' ')
+                .toUpperCase(),
+              postal_code: cart.data?.cart?.shipping_addresses[0]?.postcode ?? undefined,
+              phone: cart.data?.cart?.shipping_addresses[0]?.telephone ?? undefined,
+              region: cart.data?.cart?.shipping_addresses[0]?.region?.code,
+              city: cart.data?.cart?.shipping_addresses[0]?.city.toUpperCase(),
+              country: cart.data?.cart?.shipping_addresses[0]?.country.code,
+            },
+            customer: { type: 'person' },
+          },
+          (response: KlarnaResponse) => {
+            resolve(response)
+          },
+        )
+      } catch (error) {
+        reject(error)
+      }
+    })
+
+  const form = useFormGqlMutationCart(KlarnaPaymentPlaceOrderDocument, {
+    onBeforeSubmit: async (variabless) => {
+      try {
+        await lock({ method: code })
+        const response = await klarnaPaymentsAuthorize()
+        if (response.approved === false) {
+          await unlock({})
+          reload()
+        }
+        return {
+          cartId: variabless.cartId,
+          paymentMethod: {
+            code,
+            klarna: {
+              authorization_token: response.authorization_token ?? '',
+            },
+          },
+        }
+      } catch (error) {
+        await unlock({})
+        throw error
+      }
+    },
+    onComplete: async (result) => {
+      if (result.errors || !result.data?.placeOrder?.order) {
+        await unlock({})
+        return
+      }
+
+      await onSuccess(result.data?.placeOrder?.order.order_number)
+    },
+  })
+
+  const submit = form.handleSubmit(() => {})
+  useFormCompose({ form, step, submit, key: `KlarnaPaymentPlaceOrder_${code}` })
+
+  return (
+    <form onSubmit={submit} noValidate>
+      <input type='hidden' value={code} />
+    </form>
+  )
+}

package/hooks/useKlarnaCartLock.ts

@@ -0,0 +1,16 @@
+import type { CartLockState } from '@graphcommerce/magento-cart-payment-method'
+import { useCartLock } from '@graphcommerce/magento-cart-payment-method'
+
+type KlarnaLockState = CartLockState & {
+  clientToken?: string | null
+  authorizationToken?: string | null
+}
+
+/**
+ * The cart lock situation is a bit odd since are unable to actually influence the return URL we
+ * can't safely remember the cart ID.
+ *
+ * This is a potential bug because when the customer is returning from an icognito session, the cart
+ * ID is not available.
+ */
+export const useKlarnaCartLock = () => useCartLock<KlarnaLockState>()

package/index.ts

@@ -0,0 +1 @@
+export {}

package/klarna.d.ts

@@ -0,0 +1,24 @@
+export type KlarnaResponse = {
+  approved?: boolean
+  finalize_required?: boolean
+  authorization_token: string
+  show_form?: boolean
+}
+
+declare global {
+  namespace Klarna {
+    const Payments: {
+      init: (options: { client_token: string | null | undefined }) => void
+      load: (
+        options: { container: string },
+        data: Record<string, unknown>,
+        callback: (res: unknown) => void,
+      ) => void
+      authorize: (
+        options: { payment_method_category: string },
+        data: Record<string, unknown>,
+        callback: (response: KlarnaResponse) => void,
+      ) => void
+    }
+  }
+}

package/methods.ts

@@ -0,0 +1,20 @@
+import type { PaymentModule } from '@graphcommerce/magento-cart-payment-method'
+import { KlarnaPaymentActionCard } from './components/KlarnaPaymentActionCard/KlarnaPaymentActionCard'
+import { KlarnaPaymentOptions } from './components/KlarnaPaymentOptions/KlarnaPaymentOptions'
+import { KlarnaPaymentPlaceOrder } from './components/KlarnaPaymentPlaceOrder/KlarnaPaymentPlaceOrder'
+
+export const component = 'PaymentMethodContextProvider'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+const KlarnaModule: PaymentModule = {
+  PaymentOptions: KlarnaPaymentOptions,
+  PaymentActionCard: KlarnaPaymentActionCard,
+  PaymentPlaceOrder: KlarnaPaymentPlaceOrder,
+}
+
+export const klarna: Record<string, PaymentModule> = {
+  klarna_kco: KlarnaModule,
+  klarna_pay_now: KlarnaModule,
+  klarna_pay_later: KlarnaModule,
+  klarna_pay_over_time: KlarnaModule,
+}

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@graphcommerce/magento-payment-klarna",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "10.0.0-canary.72",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./plugins/AddKlarnaMethods": "./plugins/AddKlarnaMethods.tsx"
+  },
+  "peerDependencies": {
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/image": "^10.0.0-canary.72",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.72",
+    "@graphcommerce/magento-cart-checkout": "^10.0.0-canary.72",
+    "@graphcommerce/magento-cart-payment-method": "^10.0.0-canary.72",
+    "@graphcommerce/magento-store": "^10.0.0-canary.72",
+    "@graphcommerce/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
+    "@lingui/core": "^5",
+    "@lingui/macro": "^5",
+    "@lingui/react": "^5",
+    "@mui/material": "^7.0.0",
+    "framer-motion": "^11.0.0",
+    "next": "*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}

package/plugins/AddKlarnaMethods.tsx

@@ -0,0 +1,13 @@
+import type { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-payment-method'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { klarna } from '../methods'
+
+export const component = 'PaymentMethodContextProvider'
+export const exported = '@graphcommerce/magento-cart-payment-method'
+
+function AddKlarnaMethods(props: PluginProps<PaymentMethodContextProviderProps>) {
+  const { modules, Prev, ...rest } = props
+  return <Prev {...rest} modules={{ ...modules, ...klarna }} />
+}
+
+export const Plugin = AddKlarnaMethods

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}