To integrate Klarna Express Button as a native view in your Android application, you need to create an instance of the view, add it to your view hierarchy, and receive the user details once the Klarna Express Button flow is completed:
The Klarna Express Button native view in Android is called KlarnaExpressButton. You can create an instance programmatically or inflate it from an XML file. Additionally, you can also set parameters from the XML.
You can create the native view programmatically and place it in your application with desired layout options.
Optionally you can also create the native view in your XML and get the view instance programmatically either by findViewById or by the generated DataBinding instance of your layout.
Parameters used for the Klarna Express Button are set as variables of the button instance or as attributes in the XML declaration.
|context||Context||The context of the Activity the Klarna Express Button is in.|
|clientId||String||The environment-specific merchant identifier (MID).|
|locale||String? (Optional, defaults to “en-US”)||Localization, a list of supported locales can be found in this table.|
|eventHandler||KlarnaEventHandler? (Optional)||The interface to receive results from Klarna.|
|returnURL||String? (Optional)||URL schema as defined in your AndroidManifest.xml to return from external applications.|
|buttonTheme||KlarnaButtonTheme? (Optional, defaults to “KLARNA”)||Enumerated value to specify how to stylize the button on light and dark configurations.|
|buttonShape||KlarnaButtonShape? (Optional, defaults to “ROUNDED_RECT”)||Enumerated value to specify how the button’s shape should be.|
|buttonLabel||KlarnaButtonLabel? (Optional, defaults to “KLARNA_PRODUCT”)||Enumerated value to specify the label text should be on the button.|
|environment||KlarnaEnvironment? (Optional, defaults to “PRODUCTION”)||Enumerated value to set the working environment for the button.|
|region||KlarnaRegion? (Optional, defaults to “NA”)||Enumerated value to set the geographical region of the user/application.|
|theme||KlarnaTheme? (Optional, defaults to “LIGHT”)||Enumerated value to specify how the content in the Klarna Express Button flow should be stylized on light and dark configurations. (Note: buttonTheme parameter would set the theme for the button only)|
While the user is interacting with the Klarna Express Button or when the flow is completed, you can receive events accordingly by setting an event handler when creating an instance of the button.
Klarna Express Button events are as follows:
|KlarnaExpressButtonEvent.USER_TAPPED_BUTTON||The user tapped on the Klarna Express Button.|
|KlarnaExpressButtonEvent.USER_AUTHENTICATED||Klarna Express Button flow is completed successfully and the user is authenticated. You can read user details from the event.|
|KlarnaExpressButtonEvent.USER_AUTHENTICATED_DATA_TOKEN||Klarna Express Button flow is completed successfully and the user is authenticated. You can read user’s data token from the event.|
Predefined Klarna Express Button error names are as follows:
|KlarnaExpressButtonError.KlarnaExpressButtonErrorInvalidParams||The parameters set for Klarna Express Button are invalid|
|KlarnaExpressButtonError.KlarnaExpressButtonErrorRender||Rendering the Klarna Express Button has failed|
Example of user details received with USER_AUTHENTICATED event (event.params value):
Example of user’s data token received with USER_AUTHENTICATED_DATA_TOKEN event (event.params value):
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.
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.
|ROUNDED_RECT||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.
|KLARNA_PRODUCT||Renders the button with this product’s specific label which is “Klarna. Express Checkout”.|
|KLARNA||Renders the button only with Klarna logo.|