feat: klarna Checkout SDK added

[Sweta-Kumari-Sharma]

#850

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

Description

Added Klarna Checkout flow. This is a redirection flow.

How did you test it?

Payment data used in server.js for create-payment-intent call:

const paymentData = {
  amount: 50000,
  order_tax_amount: 0,
  confirm: false,
  currency: "USD",
  capture_method: "automatic",
  customer_id: "klarna",
  payment_experience: "redirect_to_url",
  capture_on: "2022-09-10T10:11:12Z",
  authentication_type: "no_three_ds",
  billing: {
    address: {
      line1: "1467",
      line2: "Harrison Street",
      line3: "Harrison Street",
      city: "San Francisco",
      state: "California",
      zip: "94122",
      country: "US",
      first_name: "joseph",
      last_name: "Doe"
    },
    phone: {
      number: "8056594427",
      country_code: "+91"
    },
    email: "[email protected]"
  },
  order_details: [
    {
      product_name: "Red T-Shirt",
      quantity: 5,
      amount: 10000,
      account_name: "transaction_processing",
      total_tax_amount: 0,
      tax_rate: 0,
      total_amount: 50000
    }
  ],
  email: "[email protected]",
  name: "John Doe",
  phone: "999999999",
  phone_country_code: "+65",
  description: "Its my first payment request",
  return_url: "https://google.com/"
};

klarna Kustom Checkout connector endpoint doesn't accept return_url without https, that's why I tested by using [https://www.google.com] as the return_url.

Screen.Recording.2024-12-27.at.9.31.53.PM.mov

Checklist

• I ran npm run re:build
• I reviewed submitted code
• I added unit tests for my changes where possible

[semanticdiff-com]

Review changes with  

[PritishBudhiraja]

I guess loader need to be off full screen that is coming only in the button error. And can you also handle the case when let's say I have Klarna Element and Payment Element both in a page what will happen.

[Sweta-Kumari-Sharma]

I guess loader need to be off full screen that is coming only in the button error. And can you also handle the case when let's say I have Klarna Element and Payment Element both in a page what will happen.

I took reference from Paypal's redirection flow, in that also loader was shown above button.
Can you please help me figure out if in Klarna Checkout's redirection case, I need to show loader in full screen or this is okay?

Screen.Recording.2024-12-27.at.9.36.13.PM.mov

And this is how the UI looks when Payment Element is rendered as well