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 the payment method via its 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.
You can add the view to your layout as shown below:
KlarnaPaymentView currently supports following props:
| Name | Type | Description |
|---|---|---|
| category | String | The payment method category you want to render in your view. It has to be the same as the one in the response object when initiating a payment. It is usually 'klarna'. |
| onInitialized | () => {} | The initialize call succeeded. |
| onLoaded | () => {} | The load call succeeded. |
| onLoadedPaymentReview | () => {} | The load payment review call succeeded. |
| onAuthorized | ({}) => {} | The authorize call succeeded. |
| onReauthorized | ({}) => {} | The reauthorize call succeeded. |
| onFinalized | ({}) => {} | The finalize call succeeded. |
| onError | ({}) => {} | An error occurred. |
The onAuthorized, onReauthorized, onFinalized and onError will provide an object (via nativeEvent) with the following parameters:
Determines whether the previous operation was successful and yielded an authorization token.
Available on:
- onAuthorized
- onReauthorized
- onFinalized
If authorize(), reauthorize() or finalize() succeed, they will return a token you can submit to your backend.
Available on:
- onAuthorized
- onReauthorized
- onFinalized
If authorize() requires that you additionally call finalize().
Available on:
- onAuthorized
If a method fails, onError() will let you know via an error object.
Available on:
- onError
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:
Initializes the view with a session token. You have to have added the view to your application and supplied the payment method category.
| Param | Type | Description |
|---|---|---|
| sessionToken | String | The session token you get from Klarna. |
| returnUrl | String | An app-defined URL scheme the component uses to return customers to your app. |
Loads the view and renders the content inside.
| Param | Type | Description |
|---|---|---|
| sessionData | String | undefined | An optional string to update the session. Formatted as JSON. |
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.
This only works with specific countries.
Authorizes the payment session.
| Param | Type | Description |
|---|---|---|
| autoFinalize | Boolean | undefined | An optional flag used to turn off auto-finalization for direct bank transfer. |
| sessionData | String | undefined | An optional string to update the session. Formatted as JSON. |
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.
| Param | Type | Description |
|---|---|---|
| sessionData | String | undefined | An optional string to update the session. Formatted as JSON. |
If a specific payment method needs you to trigger a second authorization, call finalize when you’re ready.
| Param | Type | Description |
|---|---|---|
| sessionData | String | undefined | An optional string to update the session. Formatted as JSON. |