Klarna Docs - Express Button for Android
Express Button for Android

Express button solution has been deprecated. If you're interested in the a Express Checkout experience for Klarna payments, you can learn about our new solution Klarna Express Checkout

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:

  1. Create an instance of the button.
  2. Add the button to your screen.
  3. Receive the user details by implementing the event handler.

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.

Create the Button Programmatically

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

KOTLIN
//Create an instance of KlarnaExpressButton
val button = KlarnaExpressButton(...)

// Add it to your container with desired layout parameters
val layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT)
containerViewGroup.addView(button, 0, layoutParams)

Create the Button from XML

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.

MARKUP
<com.klarna.mobile.sdk.api.expressbutton.KlarnaExpressButton
      android:id="@+id/klarnaExpressButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      …
/>

Parameters used for the Klarna Express Button are set as variables of the button instance or as attributes in the XML declaration.

ParameterTypeDescription
contextContextThe context of the Activity the Klarna Express Button is in.
clientIdStringThe environment-specific merchant identifier (MID).
localeString? (Optional, defaults to “en-US”)Localization, a list of supported locales can be found in this table.
eventHandlerKlarnaEventHandler? (Optional)The interface to receive results from Klarna.
returnURLString? (Optional)URL schema as defined in your AndroidManifest.xml to return from external applications.
buttonThemeKlarnaButtonTheme? (Optional, defaults to “KLARNA”)Enumerated value to specify how to stylize the button on light and dark configurations.
buttonShapeKlarnaButtonShape? (Optional, defaults to “ROUNDED_RECT”)Enumerated value to specify how the button’s shape should be.
buttonLabelKlarnaButtonLabel? (Optional, defaults to “KLARNA_PRODUCT”)Enumerated value to specify the label text should be on the button.
environmentKlarnaEnvironment? (Optional, defaults to “PRODUCTION”)Enumerated value to set the working environment for the button.
regionKlarnaRegion? (Optional, defaults to “NA”)Enumerated value to set the geographical region of the user/application.
themeKlarnaTheme? (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.

KOTLIN
val eventHandler = object : KlarnaEventHandler {
   override fun onEvent(klarnaComponent: KlarnaComponent, event: KlarnaProductEvent) {
      when(event.action) {
         KlarnaExpressButtonEvent.USER_TAPPED_BUTTON -> {
            // User tapped the Klarna Express Button
         }
         KlarnaExpressButtonEvent.USER_AUTHENTICATED -> {
            // User is authenticated. You can read the user details      
            // in event.params attribute.

Klarna Express Button events are as follows:

NameDescription
KlarnaExpressButtonEvent.USER_TAPPED_BUTTONThe user tapped on the Klarna Express Button.
KlarnaExpressButtonEvent.USER_AUTHENTICATEDKlarna Express Button flow is completed successfully and the user is authenticated. You can read user details from the event.
KlarnaExpressButtonEvent.USER_AUTHENTICATED_DATA_TOKENKlarna 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:

NameDescription
KlarnaExpressButtonError.KlarnaExpressButtonErrorInvalidParamsThe parameters set for Klarna Express Button are invalid
KlarnaExpressButtonError.KlarnaExpressButtonErrorRenderRendering the Klarna Express Button has failed

Example of user details received with USER_AUTHENTICATED event (event.params value):

JSON5
{
  first_name: "John",   
  last_name: "Doe",
  email: "example@example.com",
  date_of_birth: "1990-01-01",
  phone: "+18004444444",
  address: {
    street_address: "3100 Pear Road",
    street_address2: null,
    postal_code: "93309",

Example of user’s data token received with USER_AUTHENTICATED_DATA_TOKEN event (event.params value):

JSON5
{
   express_button_data_token: "1886db92-tj82-1277-n6h2-1197be8701c6"
}

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

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

NameDescriptionExpress Button
KLARNARenders 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.
LIGHTRenders the button in white. It is recommended to use this theme on dark backgrounds.
DARKRenders the button in black. It is recommended to use this theme on light backgrounds.
AUTOAutomatic theme (light or dark) that will use the system’s user interface style.

KlarnaButtonShape

In order for the Klarna Express Button to fit into the aesthetic of your application, we offer different button shapes.

NameDescriptionExpress Button
ROUNDED_RECTRenders the button as a rectangle with rounded corners.
PILLRenders the button as a pill-shaped button.
RECTANGLERenders the button as a rectangle with square corners.

KlarnaButtonLabel

KlarnaButtonLabel enumeration will be used to select which label you wish to be shown on the button.

NameDescriptionExpress Button
KLARNA_PRODUCTRenders the button with this product’s specific label which is “Klarna. Express Checkout”.
KLARNARenders the button only with Klarna logo.