feat: add native Klarna support

Author: malessani

README.md

@@ -156,6 +156,7 @@ Here is where customers select a payment method and place the order.
 | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
 | [Adyen](https://docs.commercelayer.io/developers/v/how-tos/payments/adyen)                    | Credit card / [PayPal](https://docs.adyen.com/payment-methods/paypal/web-drop-in) / [Klarna](https://docs.adyen.com/payment-methods/klarna/web-drop-in) | ✓         |
 | [Braintree](https://docs.commercelayer.io/developers/v/how-tos/payments/braintree)            | Credit card                                                                                                                                             | ✓         |
+| [Klarna](https://docs.commercelayer.io/developers/v/how-tos/payments/klarna)                  | Klarna                                                                                                                                                  | ✗         |
 | [PayPal](https://docs.commercelayer.io/developers/v/how-tos/payments/paypal)                  | PayPal                                                                                                                                                  | ✗         |
 | [Stripe](https://docs.commercelayer.io/developers/v/how-tos/payments/stripe)                  | Credit card / Apple Pay / Google Pay / PayPal / Klarna                                                                                                  | ✓         |
 | [Manual gateway](https://docs.commercelayer.io/developers/v/how-tos/payments/manual-payments) | Manual payment                                                                                                                                          | ✗         |

package.json

@@ -72,7 +72,7 @@
     "commercelayer"
   ],
   "dependencies": {
-    "@commercelayer/react-components": "^4.5.1",
+    "@commercelayer/react-components": "^4.6.0-beta.0",
     "@commercelayer/sdk": "^5.13.2",
     "@faker-js/faker": "^8.0.2",
     "@headlessui/react": "^1.7.17",

pnpm-lock.yaml

@@ -0,0 +1,55 @@
+import { faker } from "@faker-js/faker"
+import { euAddress } from "specs/utils/addresses"
+
+import { test, expect } from "../fixtures/tokenizedPage"
+
+const customerEmail = faker.internet.email().toLocaleLowerCase()
+
+test.use({
+  defaultParams: {
+    order: "with-items",
+    lineItemsAttributes: [
+      { sku_code: "BABYONBU000000E63E7412MX", quantity: 2 },
+    ],
+    orderAttributes: {
+      customer_email: customerEmail,
+    },
+  },
+})
+
+test("should execute a checkout with klarna", async ({ checkoutPage }) => {
+  await checkoutPage.checkOrderSummary("Order Summary")
+
+  await checkoutPage.setCustomerMail()
+  await checkoutPage.setBillingAddress({ ...euAddress, phone: "+393293399456" })
+
+  await checkoutPage.checkStep("Customer", "open")
+
+  await checkoutPage.save("Customer")
+
+  await checkoutPage.checkStep("Shipping", "open")
+
+  await checkoutPage.checkShippingSummary("To be calculated")
+
+  await expect(
+    checkoutPage.page.locator("text=Standard Shipping")
+  ).toBeVisible()
+  await checkoutPage.selectShippingMethod({ text: "Standard Shipping" })
+
+  await checkoutPage.checkShippingSummary("FREE")
+  await checkoutPage.save("Shipping")
+
+  await checkoutPage.checkStep("Payment", "open")
+
+  await checkoutPage.selectPayment("klarna")
+
+  await checkoutPage.save("Payment", undefined, true)
+
+  await checkoutPage.completePayment({ type: "klarna" })
+
+  await checkoutPage.checkPaymentRecap("Klarna")
+
+  await checkoutPage.page.reload()
+
+  await checkoutPage.checkPaymentRecap("Klarna")
+})

specs/e2e/payments-klarna.spec.ts

@@ -645,6 +645,7 @@ export class CheckoutPage {
       | "adyen"
       | "checkout_com"
       | "adyen-dropin"
+      | "klarna"
   ) {
     let paymentMethod
     if (type === "wire") {
@@ -659,11 +660,11 @@ export class CheckoutPage {
 
   async completePayment({
     type,
-    gateway,
+    gateway = "klarna_pay_now",
     language,
   }: {
-    type: "adyen-dropin"
-    gateway:
+    type: "adyen-dropin" | "klarna"
+    gateway?:
       | "paypal"
       | "card"
       | "card3DS"
@@ -673,6 +674,19 @@ export class CheckoutPage {
     language?: "fr" | "de"
   }) {
     switch (type) {
+      case "klarna": {
+        const [newPage] = await Promise.all([this.page.waitForEvent("popup")])
+        await newPage.locator("#onContinue").click()
+        await newPage.locator("#otp_field__container input").fill("123456")
+        await newPage.getByTestId("select-payment-category").click()
+        await newPage.getByTestId("pick-plan").click()
+        await newPage.getByTestId("confirm-and-pay").click()
+        await this.page
+
+          .locator("text=Thank you for your order!")
+          .waitFor({ state: "visible", timeout: 60000 })
+        break
+      }
       case "adyen-dropin": {
         switch (gateway) {
           case "paypal": {