Adding Klarna Payments to Your App
Adding On-Site Messaging is as easy as it gets, to achieve this tailor made experience for the user you just have to;
- Create the Native View
- Set Parameters
- Call Render
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.
Create Programmatically
You can create the native view programmatically and place it in your application with desired layout options.
View Controller or Custom View
1 2 3 4 5 6
// 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.
Available Parameters
Param | Type | Required | Description |
---|---|---|---|
Param clientId | Type String | Required True | Description On-Site Messaging Client Identifier gathered from Klarna Merchant Portal. |
Param placementKey | Type String | Required True | Description Placement key identifier from Klarna Merchant Portal. |
Param locale | Type String | Required True | Description Locale string for the placement configuration, default value is en-US . |
Param purchaseAmount | Type Int | Required False | Description Amount for the placement. Set in micro units ($120.00 = 12000), used for amount based credit promotions. |
Param environment | Type KlarnaOSMEnvironment | Required True | Description Enumerated environment value to specify merchant’s running environment. Default value is demo environment. |
Param region | Type KlarnaOSMRegion | Required True | Description Enumerated region value to specify merchant’s running market region. |
Param theme | Type KlarnaOSMTheme | Required True | Description Enumerated theme value to specify how to stylize the view on light and dark configurations. |
Param hostViewController | Type UIViewController | Required True | Description UIViewController instance to specify parent view controller. Will be used for inner linking for informational pages. The reference will be kept as a weak reference. |
Param delegate | Type KlarnaOSMViewEventListener | Required False | Description This delegate will be used to notify your application for changes in size of the native view. |
KlarnaOSMEnvironment
Environment enumeration will be used to define whether to use a demo placement or fetch placement configurations
from either playground
or production
.
Name | Description |
---|---|
Name demo | Description This environment ignores all other parameters and shows a demo placement config containing all On-Site Messaging features. |
Name playground | Description This environment is for placement configurations from playground Merchant Portal. |
Name production | Description This environment is for production builds of the app with placement configurations for production merchants. |
KlarnaOSMRegion
Region enumeration will be used to define which endpoint to connect as a source for the placement configurations.
Name | Descriptions |
---|---|
Name eu | Descriptions Region value for Europe. |
Name na | Descriptions Region value for North America. |
Name oc | Descriptions Region value for Oceania. |
KlarnaOSMTheme
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.
Name | Descriptions |
---|---|
Name light | Descriptions Light style for placement view. |
Name dark | Descriptions Dark style for placement view. |
Name automatic | Descriptions Automatic theme that will use the system’s user interface style. |
Setting the Parameters
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.
Setting Parameters Programmatically
1 2 3 4 5 6 7 8 9
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.
Calling the Render Method
The RenderResult
callback can be used for logging purposes or to make the KlarnaOSMView
visible or not,
according to the error.
1 2 3
osmView.render(callback: { [weak self] error in ... })
Identifying the Errors
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 .
Klarna On-Site Messaging Error Names
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
.
Error Name | Description |
---|---|
Error Name KlarnaOSMErrorMissingClientId | Description Client ID was not set. Set the clientId variable and invoke render again. |
Error Name KlarnaOSMErrorMissingPlacementKey | Description Placement key was not set. Set the placementKey variable and invoke render again. |
Error Name KlarnaOSMErrorMissingRegion | Description Region was not set. Set the region variable and invoke render again. |
Error Name KlarnaOSMErrorMissingHost | Description Hosting activity was not set. Set the hostActivity variable and invoke render again. |
Error Name KlarnaOSMErrorInvalidPlacementConfig | Description Fetched configuration from the API can not be rendered by the native view. |
Error Name KlarnaOSMErrorPlacementError | Description On-Site Messaging API has returned an error. Message of this error will contain information sent from the API. |
Error Name KlarnaOSMErrorNetworkError | Description A network error occurred and the placement will not be rendered. |
Error Name KlarnaOSMErrorDisabled | Description Native On-Site Messaging has been disabled by Klarna, the placement will not be rendered. |