Klarna

Integrating Klarna
Klarna is currently in BETA.
Klarna is a payment method that allows consumers to pay for items in instalments, or at a later date.
This does not impact the merchant as they will receive all of the funds upfront as Klarna pays the merchant in full, taking on the debt themselves.
To enable Klarna for your account, please contact customer support to set this up.
﻿
Prerequisites
Make sure you are using Web SDK Version 0.0.18 (or higher).
Make sure you have implemented the following prerequisites from the Web SDK integration guide:
﻿Create a paymentSession﻿﻿
﻿Add the Payment Form to your Website﻿﻿
The payment form iFrame must be loaded onto the page in order for payments to work. 
However displaying the form to the consumer is not required for this transaction type.
To hide the payment form iFrame, use: 
<div id="payment-iframe" style="position:absolute;width:0;height:0;border:0;"></div>
﻿
﻿
Step One: Display the Klarna Button
﻿
Add the Klarna button to your web page:
Add Klarna Button
<body>

  <div id="klarna-button-container" ></div>
  
<script>
  
  const klarnaButton = judo.getKlarnaButton({
    	backgroundColor: '#ffb3c7',
    	borderRadius: 4,
    	color: '#171717',
    	height: 36,
    	width: 280,
    	label: 'Pay now'
  })
  
  const container = document.getElementById("klarna-button-container")
  container.append(klarnaButton)
      
</script>
</body>
<body>

  <div id="klarna-button-container" ></div>
  
<script>
  
  const klarnaButton = judo.getKlarnaButton({
    	backgroundColor: '#ffb3c7',
    	borderRadius: 4,
    	color: '#171717',
    	height: 36,
    	width: 280,
    	label: 'Pay now'
  })
  
  const container = document.getElementById("klarna-button-container")
  container.append(klarnaButton)
      
</script>
</body>
﻿
Klarna Button Style
Parameter
Value
backgroundColor
#171717
#ffffff
#ffb3c7
color
#ffffff
#171717
label
Pay now
Pay later
Slice it
width
number
height
number
borderRadius
number
﻿
Step Two: Handle the Klarna Button
Make sure the following parameters are the same values as those entered in Create a paymentSession﻿, otherwise the transaction will fail:
merchantPaymentReference
merchantConsumerReference
JudoID
Currency
Amount
This is used to cross reference the validity of the transaction.
Your backend server should store the paymentSession response reference returned by Judopay's API. 
Use this reference from the response to populate yourPaymentSession.
Make sure you replace the klarnaConfiguration object values with your own.
Handle the Klarna Button
<script>

klarnaButton.onclick = handleKlarnaButtonClick

function handleKlarnaButtonClick() {

    const klarnaConfiguration = {
        judoId: "yourJudoId",
        currency: "GBP",
        amount: 10,
        country: "GB",
        accountHolderName: "Account Holder Name",
        merchantPaymentReference: "yourPaymentReference",
        merchantConsumerReference: "yourConsumerReference",
        taxAmount: 0.01,
        mobileNumber: "00441895808221",
        emailAddress: "[email protected]",
        apmData: {
            firstName: "John",
            lastName: "Doe",
            mobileNumber: "00441895808221",
            billingAddress: {
                address1: "13 New Burlington St",
                address2: "Apt 214",
                town: "London",
                country: "GB",
                postcode: "W13 3BG"
            }
        },
        paymentMethod: "Klarna"
    }

    judo.invokePaymentWithKlarna('yourPaymentSession', klarnaConfiguration)
        .then(handleSuccess)
        .catch(handleError)
}

</script>
<script>

klarnaButton.onclick = handleKlarnaButtonClick

function handleKlarnaButtonClick() {

    const klarnaConfiguration = {
        judoId: "yourJudoId",
        currency: "GBP",
        amount: 10,
        country: "GB",
        accountHolderName: "Account Holder Name",
        merchantPaymentReference: "yourPaymentReference",
        merchantConsumerReference: "yourConsumerReference",
        taxAmount: 0.01,
        mobileNumber: "00441895808221",
        emailAddress: "john@doe.com",
        apmData: {
            firstName: "John",
            lastName: "Doe",
            mobileNumber: "00441895808221",
            billingAddress: {
                address1: "13 New Burlington St",
                address2: "Apt 214",
                town: "London",
                country: "GB",
                postcode: "W13 3BG"
            }
        },
        paymentMethod: "Klarna"
    }

    judo.invokePaymentWithKlarna('yourPaymentSession', klarnaConfiguration)
        .then(handleSuccess)
        .catch(handleError)
}

</script>
﻿
For the specific input parameters of the products variable, refer to the Klarna Documentation. 
﻿
Step Three: Handle the Response
﻿
﻿
Parameter	Value
backgroundColor	#171717 #ffffff #ffb3c7
color	#ffffff #171717
label	Pay now Pay later Slice it
width	number
height	number
borderRadius	number
Updated 18 Oct 2024
iDEAL
Introducing 3D Secure 2