On-Site Messaging

Adding On-Site Messaging is as easy as it gets, to achieve this tailor made experience for the user you just have to;

• Request Access to On-site messaging
• Create the Native View
• Set Parameters
• Call Render

To be able to integrate On-site messaging our team needs to enable the access for it. You can request access by writing an email to onsitemessaging-support@klarna.com or through your dedicated Delivery Manager. Please refer the Merchant ID (MID) and/or the name of your brand/company (merchant name), the countries you request access and the environment (playground or production).

The On-Site Messaging native view in iOS is called KlarnaOSMView. You can create KlarnaOSMView programmatically and add it to your view controller or custom views.

You can create the native view programmatically and place it in your application with desired layout options.

// Create the placement view
let osmView = KlarnaOSMView()
// Set constraints
// ...
osmView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(osmView)

Parameters used for the KlarnaOSMView are set as variables of the UIView instance. These can be identifier string values, amount or enumeration values.

Read more about Klarna On-Site Messaging activation and features here→

Environment enumeration will be used to define whether to use a demo placement or fetch placement configurations from either playground or production.

Region enumeration will be used to define which endpoint to connect as a source for the placement configurations.

Theme enumeration will be used to define which style of OSM to be used, depending on either the app’s configuration or the system setting.

All of the parameters for On-Site Messaging are stored as variables on the KlarnaOSMView instance. The required ones need to be set before calling the render method, otherwise the RenderResult will return a validation error for the missing parameter.

osmView.clientId = "<client-id>"
osmView.placementKey = "<placement-key>"
osmView.locale = "en-US"
osmView.purchaseAmount = 1000
osmView.environment = .production
osmView.region = .na
osmView.theme = .dark
osmView.delegate = self
osmView.hostViewController = self

Once you have set all the parameters to the KlarnaOSMView, you are ready to render the actual placement view. To do that, you need to call the render method of the view with the RenderResult callback parameter.

Then, once the render method is called, first the view will validate all the parameters. If there is a missing parameter the RenderResult callback will be invoked with corresponding error values. If parameters are valid then the view will try to fetch placement configuration from On-Site Messaging API. Any errors or failures from this network request will also invoke RenderResult callback if necessary. If the placement configuration is fetched and valid then the KlarnaOSMView will render it with native views and invoke the RenderResult callback with a null value.

The RenderResult callback can be used for logging purposes or to make the KlarnaOSMView visible or not, according to the error.

osmView.render(callback: { [weak self] error in
    ...
})

Similar to other parts of the In-App SDK, On-Site Messaging also makes use of the KlarnaMobileSDKError class. To read more about the error handling and error object properties refer to the On-Site Messaging Error Handling guide.

These are the predefined names for errors that can happen during the placement render flow. These names are available as static String values with typealias KlarnaOSMError.