Klarna: Drop In Guide

Before you begin

This guide assumes that you know how to

Show Drop-in Checkout

Accept payments with Klarna

Prepare the client session

Klarna requires the following data to process a payment successfully. Pass the following data in the client session, or in the payment request (for manual payment creation).

Parameter Name	Required	Description
currencyCode	✓	3-letter currency code in ISO 4217 format, e.g. `USD` for US dollars
order ↳ lineItems	✓	Details of the line items of the order
order ↳ countryCode	✓	The country code of the user.Learn more about the supported countries and currencies by visiting Klarna Documentation.
customer ↳ emailAddress		Customer’s email address. Pass this value to pre-fill the Klarna payment form.
customer ↳ mobileNumber		Customer’s mobile number (make sure it is the correct format for the country code). Pass this value to pre-fill the Klarna payment form.
customer ↳ shippingAddress		Customer’s shipping address. Pass this value to pre-fill the Klarna payment form.
customer ↳ billingAddress		Customer’s billing address. Pass this value to pre-fill the Klarna payment form. When passing `customer.billingAddress` in the client session, ensure that Klarna has payment method categories configured for the given address. If Klarna is not supported for the given billing address, no Klarna button will be rendered in the checkout .
paymentMethod ↳ options ↳ KLARNA ↳ extraMerchantData		Extra Merchant Data (EMD) package supported by Klarna can be passed via the client session. Any JSON object that will be accepted by Klarna can be sent. Available schemas are documented here

Prepare the SDK for payments

Show Universal Checkout

Klarna is automatically presented to the customer when calling Primer.showUniversalCheckout.

Typescript

try {
  await Primer.showUniversalCheckout(clientToken, {
    container: '#checkout-container',
    options,
    onCheckoutComplete({ payment }) {
      console.log('Checkout complete.', payment)
    },
  })
} catch (e) {
  // handle error
}

Customization

Check the customization guide to learn how to customize payment method buttons.

TypeScript

const options = {
  /* Other options ... */
  style: {
    paymentMethodButton: {
      background: string,
      borderRadius: number | string,
      boxShadow: string,
      borderColor: string,
      height: number,
      primaryText: TextStyle,
      logoColor: logoColor,
      marginTop: string,
    },
  },
}

Troubleshooting

In order to be passed to Klarna, the shipping address and billing address must contain the following info:

firstName
lastName
addressLine1
city
postalCode
countryCode

If any data is missing, the address is not passed to Klarna. The customer will be prompted to enter their personal information within Klarna form.

Show Universal Checkout

Klarna is automatically presented to the customer when calling Primer.showUniversalCheckout.

Typescript

try {
  await Primer.showUniversalCheckout(clientToken, {
    container: '#checkout-container',
    options,
    onCheckoutComplete({ payment }) {
      console.log('Checkout complete.', payment)
    },
  })
} catch (e) {
  // handle error
}

Customization

Check the customization guide to learn how to customize payment method buttons.

TypeScript

const options = {
  /* Other options ... */
  style: {
    paymentMethodButton: {
      background: string,
      borderRadius: number | string,
      boxShadow: string,
      borderColor: string,
      height: number,
      primaryText: TextStyle,
      logoColor: logoColor,
      marginTop: string,
    },
  },
}

Troubleshooting

In order to be passed to Klarna, the shipping address and billing address must contain the following info:

firstName
lastName
addressLine1
city
postalCode
countryCode

If any data is missing, the address is not passed to Klarna. The customer will be prompted to enter their personal information within Klarna form.

Pre-requisites

Install Primer Klarna SDK
We support the Klarna In-App SDK (from version 2.7.0).

In order to be able to use Klarna you will have to install the PrimerKlarnaSDK, currently available on CocoaPods.

CocoaPods
Add the line below in you Podfile

RUBY

use_frameworks!
target 'PrimerSDK_Example' do
  pod 'PrimerSDK'
  # Add the line below 👇
  pod 'PrimerKlarnaSDK'
end

Swift Package Manager
Installing PrimerSDK via Swift Package Manager will carry PrimerKlarnaSDK as a dependency. It’s completely transparent and will not need any explicit declaration among your Packages.

Configure Primer’s settings
Add a url scheme for your project and pass it in the urlScheme of the paymentMethodOptions of your settings.

SWIFT

let settings = PrimerSettings(
        paymentHandling: .auto,
        // 👇 Add this line
        paymentMethodOptions: PrimerPaymentMethodOptions(urlScheme: "merchant://primer.io")
)

(Optional) Allow BankId redirection

Add bankid in LSApplicationQueriesSchemes in your Info.plist If you don’t, the user will have to redirect to BankId manually.

SWIFT

<key>LSApplicationQueriesSchemes</key>
<array>
    ...
    <string>bankid</string>
</array>

Payment Session type:

ONE_OFF_PAYMENT For using Klarna with this payment session type, call Primer.shared.showUniversalCheckout.

SWIFT

class MyViewController: UIViewController {
  func startUniversalCheckout() {
    Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
  }
}

RECURRING_PAYMENT For using Klarna with this payment session type, call Primer.shared.showVaultManager.

SWIFT

class MyViewController: UIViewController {
  func startVaultManager() {
    Primer.shared.showVaultManager(clientToken: self.clientToken)
  }
}

Show Universal Checkout

Klarna is automatically presented to the customer when calling Primer.shared.showUniversalCheckout.

SWIFT

class MyViewController: UIViewController {
  func startUniversalCheckout() {
    Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
  }
}

Customization

Check the customization guide to learn how to customize payment method buttons.

Pre-requisites

Pre-requisites
Some payment methods like Klarna Direct Debit (part of Klarna’s Pay Now), require manual enablement for the available markets (eg: DE, SE, NL). This is done by Klarna upon merchant request.

Configuration
We support the Klarna In-App SDK (from version 2.7.0).

Create a PrimerKlarnaOptions object, then initialise the SDK as usual.

ℹ️ Starting from version 1.0.3 onward, we are transitioning our SDK artifact distribution to Maven Central. This means you no longer need to reference the private Artifactory URL (PRIMER_ANDROID_ARTIFACTORY_URL) for future updates. Please ensure that you remove any references to the Artifactory URL previously used for our SDK.

Add the URL to Klarna’s CDN to your gradle.properties:

JSX

KLARNA_DISTRIBUTION_URL=https://x.klarnacdn.net/mobile-sdk/

Amend the repositories section of your app’s build.gradle to include our given repositories

JSX

repositories {
    /* Other repositories... */
    maven {
        url "${KLARNA_DISTRIBUTION_URL}"
    }
}

Finally, amend the dependencies section of your app’s build.gradle to include the Primer’s klarna-android library:

JSX

dependencies {
  /* Other dependencies... */
  implementation "io.primer:klarna-android:1.0.4"
}

If you are using 2.7.0+ version, order details should be passed in client session.

Create a deeplink activity and define it in your AndroidManifest.xml with the appropriate intent filter:

XML

<activity
    android:name=".DeeplinkReturnActivity"
    android:exported="true"
    android:launchMode="singleTop">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="app" />
        <data android:host="deeplink.return.activity" />
    </intent-filter>
</activity>

Then proceed with the SDK initialization:

KOTLIN

val klarnaOptions = PrimerKlarnaOptions(
    // Optional description for recurring payments recurringPaymentDescription = "This is custom description",
    // Built from the deeplink activity's intent filter scheme and host. 
    // This will be used by third-party apps to link back to your app.
    returnIntentUrl = "app://deeplink.return.activity"
)
val settings = PrimerSettings(
    paymentMethodOptions = PrimerPaymentMethodOptions(klarnaOptions = klarnaOptions)
)
Primer.instance.configure(settings, listener)

Show Universal Checkout

Klarna is automatically presented to the customer when calling Primer.instance.showUniversalCheckout.

KOTLIN

class CheckoutActivity : AppCompatActivity() {
  private fun setupObservers() {
    viewModel.clientToken.observe(this) { clientToken ->
      showUniversalCheckout(clientToken)
    }
  }
  private fun showUniversalCheckout(clientToken: String) {
    Primer.instance.showUniversalCheckout(this, clientToken)
  }
}

Customization

Check the customization guide to learn how to customize payment method buttons.

Pre-requisites

iOS Open Podfile inside the ./ios directory of your React Native project. Then add the following:

RUBY

use_frameworks!
target 'MyApp' do
  pod 'PrimerSDK'
  # Add the line below 👇
  pod 'PrimerKlarnaSDK'
    end
end

Add a url scheme for your project and pass it in the urlScheme of the paymentMethodOptions of your settings.

Android Add the URL to Klarna’s CDN to your gradle.properties: KLARNA_DISTRIBUTION_URL=https://x.klarnacdn.net/mobile-sdk/

Amend the repositories section of your app’s build.gradle to include our given repositories

JSX

repositories {
    /* Other repositories... */
    maven {
        url "${KLARNA_DISTRIBUTION_URL}"
    }
}

Finally, amend the dependencies section of your app’s build.gradle to include the Primer’s klarna-android library:

JSX

dependencies {
  /* Other dependencies... */
  implementation "io.primer:klarna-android:1.0.4"
}

If you are using 2.7.0+ version, order details should be passed in client session.

Create a deeplink activity and define it in your AndroidManifest.xml with the appropriate intent filter:

XML

<activity
    android:name=".DeeplinkReturnActivity"
    android:exported="true"
    android:launchMode="singleTop">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="app" />
        <data android:host="deeplink.return.activity" />
    </intent-filter>
</activity>

Configure Primer’s Settings

Add your iOS urlScheme and Android redirectScheme to the PrimerSettings object.

Typescript

const settings: PrimerSettings = {
        // ...
        paymentMethodOptions: {
            // ...
            iOS: {
                urlScheme: 'merchant://'
            },
                        android: {
                redirectScheme: 'primer'
            },
        }
};
await Primer.configure(settings);

Show Universal Checkout

ONE_OFF_PAYMENT For using Klarna with this payment session type, call Primer.showUniversalCheckout

Typescript

const CheckoutScreen = async (props: any) => {
  const onUniversalCheckoutButtonTapped = async () => {
    try {
      await Primer.showUniversalCheckout(clientToken)
    } catch (err) {
      // handle error
    }
  }
}

RECURRING_PAYMENT For using Klarna with this payment session type, call Primer.showVaultManager.

Typescript

const CheckoutScreen = async (props: any) => {
  const onUniversalCheckoutButtonTapped = async () => {
    try {
      await Primer.showVaultManager(clientToken)
    } catch (err) {
      // handle error
    }
  }
}

Customization

Check the customization guide to learn how to customize payment method buttons.

Test

Visit Klarna Sample Data Page for testing the integration against the Klarna Playground environment.

Go live

You don’t need to do anything particular to go live — just make sure to use production credentials.

Payment methods

​Before you begin

​Accept payments with Klarna

​Prepare the client session

​Prepare the SDK for payments

​Show Universal Checkout

​Customization

​Troubleshooting

​Show Universal Checkout

​Customization

​Troubleshooting

​Pre-requisites

​Show Universal Checkout

​Customization

​Pre-requisites

​Show Universal Checkout

​Customization

​Pre-requisites

​Configure Primer’s Settings

​Show Universal Checkout

​Customization

​Test

​Go live

Before you begin

Accept payments with Klarna

Prepare the client session

Prepare the SDK for payments

Show Universal Checkout

Customization

Troubleshooting

Show Universal Checkout

Customization

Troubleshooting

Pre-requisites

Show Universal Checkout

Customization

Pre-requisites

Show Universal Checkout

Customization

Pre-requisites

Configure Primer’s Settings

Show Universal Checkout

Customization

Test

Go live