Using the Klarna Express Button is easy to achieve and will provide a great user experience, just have to follow a few simple steps:
In order to initialize the express button the public API exposes the following initialization method which requires 4 parameters that can be later updated via setter methods:
|clientId||String||Your client id.|
|locale||String||A string representing the user locale.|
|returnURL||URL||URL schema as defined in your app’s Plist to return from external applications.|
|eventHandler||KlarnaEventHandler||A listener that receives events generated by the express button, which includes errors or successful responses.|
To set up additional parameters that might be needed, the KlarnaComponent protocol which the express button implements, exposes a list of variables that can be used to update the values needed.
For example, to switch between environments while developing or releasing the app:
The express button emits events to a handler every time something happens in the process, from initialization to completion. So it is important to pass a handler during init that conforms to the KlarnaEventHandler protocol.
This protocol exposes 2 useful methods, one for error cases and the other for everything else that is not considered an error:
These are the predefined names for errors that can happen during the express button setup, or action:
|KlarnaExpressButtonErrorInvalidParams||Client Id is invalid|
|KlarnaExpressButtonErrorRender||Failed to render Klarna Express Button|
The Express Button emits the following events upon user interaction (touch of the button):
|klarnaButtonUserTappedButton||Received in the handler after user has tapped the button|
|klarnaExpressButtonUserAuthenticated||Informs that the Express Button flow has completed, as well as providing pre-fill data for the user who just completed the flow.|
|klarnaExpressButtonUserAuthenticatedDataToken||Informs that the Express Button flow has completed, as well as providing data token for the user who just completed the flow.|
Depending on your preferences, you can customize the Express button to fit the look and feel of your cart page. Klarna offers several theme, label, and shape options to customize the Klarna Express Button's appearance to match the look and feel of your application.
This guideline will help you understand the different options available.
KlarnaButtonTheme enumeration will be used to define which style to be used, depending on either the app’s configuration or the system setting.
|Klarna||Renders the button in the Klarna pink theme. This is the recommended theme as it has the highest brand recognition and the likelihood of usage by your customers.|
|Light||Renders the button in white. It is recommended to use this theme on dark backgrounds.|
|Dark||Renders the button in black. It is recommended to use this theme on light backgrounds.|
|Auto||Automatic theme (light or dark) that will use the system’s user interface style.|
In order for the Klarna Express Button to fit into the aesthetic of your application, we offer different button shapes.
|RoundedRect||Renders the button as a rectangle with rounded corners.|
|Pill||Renders the button as a pill-shaped button.|
|Rectangle||Renders the button as a rectangle with square corners.|
KlarnaButtonLabel enumeration will be used to select which label you wish to be shown on the button.
|KlarnaProduct||Renders the button with this product’s specific label which is “Klarna. Express Checkout”.|
|Klarna||Renders the button only with Klarna logo.|