Klarna Docs - React native integration
React native integration

This guide walks you through the steps required to add Klarna Checkout to your React Native app. In this guide, we will cover:

- Adding the dependency for the KlarnaCheckoutView component

- Rendering a KlarnaCheckoutView

- Operating on a KlarnaCheckoutView

Adding the Dependency For KlarnaCheckoutView Component

KlarnaCheckoutView is part of Klarna's React Native Mobile SDK. That means that to start using KlarnaCheckoutView you need to add a dependency to your app. To see how you can do that, please refer to React Native: Getting Started.

Rendering KlarnaCheckoutView

After adding the required dependency, you can import and add the KlarnaCheckoutView component to your app as shown below:

TYPESCRIPT
import {
  KlarnaCheckoutView,
} from 'react-native-klarna-inapp-sdk';

// ...
const MyKlarnaCheckoutView = () => {
  return (
    <KlarnaCheckoutView
      style={{
        flex: 1,

KlarnaCheckoutView Props

In this section, we look at all the props that KlarnaCheckoutView provides.

returnUrl

returnUrl is the only mandatory prop of KlarnaCheckoutView. It is a string and is used to redirect third-party apps to your app if required.

Please note that the URL you pass for returnUrl should be the exact same URL that you have registered as the return URL in your app. To read about how you can register a return URL for your app, please refer to React Native: Getting Started.

style

This prop is optional and is of type ViewStyle. You can use it to style KlarnaCheckoutView.

onEvent

This prop is an optional lambda that is called when KlarnaCheckoutView receives an event. The lambda has a parameter of type KlarnaProductEvent. The properties of KlarnaProductEvent are as follows:

NameTypeDescription
actionstringName of the event
params{ [key: string]: any }A dictionary/map of key-value pairs containing the parameters of the event.

onError

This is an optional lambda that is called when KlarnaCheckoutView encounters an error. The lambda has a parameter of type KlarnaMobileSDKError. The following table shows all the properties of KlarnaMobileSDKError.

NameTypeDescription
namestringName of the error
messagestringMessage of the error
isFatalbooleanIndicates whether the error is fatal or not. If it is fatal, you should no longer show KlarnaCheckoutView.

KlarnaCheckoutView Methods

KlarnaCheckoutView exposes a set of methods via a view reference. The methods are as follows.

setSnippet

This method has a single parameter of type string and can be used to set the checkout HTML snippet.

suspend

This method has no parameters and is used to suspend the checkout flow. Calling this method causes a loading indicator to be displayed over the entire KlarnaCheckoutView and the user cannot continue the checkout flow.

resume

This method has no parameters and is used to resume the checkout flow. If you've called suspend, then you need to call resume to let the user continue the checkout flow.