Adding Klarna Payments to Your App

Adding Klarna Payments to your application is as easy as adding a view and performing a few operations on it. You can read more about the flow here .

This guide will teach you how to:

  • Render a Payment View
  • Operate on a payment method via its Payment View.

Rendering a Payment View

You can import the KlarnaPaymentView from the library. You’ll then be able to add it as a component to your app. This component exposes callbacks as props and methods you can call via the component’s ref.

The view will auto-size height-wise and grow to fill it’s containing view’s width.

Creating the View

You can add the view to your layout as shown below:

1
2
3
<KlarnaPaymentView
    ...
    />

Props for KlarnaPaymentView

KlarnaPaymentView currently supports following props:

NameTypeDescription
Name
category
Type
String
Description
The payment method category you want to render in your view.
Name
onInitialized
Type
() => {}
Description
The initialize call succeeded.
Name
onLoaded
Type
() => {}
Description
The load call succeeded.
Name
onLoadedPaymentReview
Type
() => {}
Description
The load payment review call succeeded.
Name
onAuthorized
Type
({}) => {}
Description
The authorize call succeeded.
Name
onReauthorized
Type
({}) => {}
Description
The reauthorize call succeeded.
Name
onFinalized
Type
({}) => {}
Description
The finalize call succeeded.
Name
onError
Type
({}) => {}
Description
An error occurred.

Prop Callback Parameters

The onAuthorized, onReauthorized, onFinalized and onError will provide an object (via nativeEvent) with the following parameters:

authorized: Boolean

Determines whether the previous operation was successful and yielded an authorization token.

Available on:

  • onAuthorized
  • onReauthorized
  • onFinalized

authToken: String | undefined

If authorize(), reauthorize() or finalize() succeed, they will return a token you can submit to your backend.

Available on:

  • onAuthorized
  • onReauthorized
  • onFinalized

finalizeRequired: Boolean | undefined

If authorize() requires that you additionally call finalize().

Available on:

  • onAuthorized

error: Object | undefined

If a method fails, onError() will let you know via an error object.

Available on:

  • onError

Methods for KlarnaPaymentView

Each payment view exposes a set of methods via a view’s ref. You can see in the test app or in the below example how these can be called. The methods are the following:

Initialize

Initializes the view with a session token. You have to have added the view to your application and supplied a payment method category.

ParamTypeDescription
Param
sessionToken
Type
String
Description
The session token you get from Klarna.
Param
returnUrl
Type
String
Description
An app-defined URL scheme the component uses to return customers to your app.

Load

Loads the view and renders the content inside.

ParamTypeDescription
Param
sessionData
Type
String | undefined
Description
An optional string to update the session. Formatted as JSON.

LoadPaymentReview

Renders a description of the payment terms your customer has agreed to.

Once a session is authorized, you can then either render a payment review in the existing payment view or initialize() a new payment view with the same session token and call this method.

Note

This only works with specific payment methods and countries.

Authorize

Authorizes the payment session.

ParamTypeDescription
Param
autoFinalize
Type
Boolean | undefined
Description
An optional flag used to turn off auto-finalization for direct bank transfer.
Param
sessionData
Type
String | undefined
Description
An optional string to update the session. Formatted as JSON.

Reauthorize

If the details of the session (e.g. cart contents, customer data) have changed, call this to update the session and get a new authorization token.

ParamTypeDescription
Param
sessionData
Type
String | undefined
Description
An optional string to update the session. Formatted as JSON.

Finalize

If a specific payment method needs you to trigger a second authorization, call finalize when you’re ready.

ParamTypeDescription
Param
sessionData
Type
String | undefined
Description
An optional string to update the session. Formatted as JSON.