NPM

If you want to add the SDK via npm use the following to add library dependency:

npm install react-native-klarna-inapp-sdk --save

Yarn

If you are using yarn, then use the following to add library dependency:

yarn add react-native-klarna-inapp-sdk

To ensure the Sign in flow initiated by the SDK can correctly redirect back to your application, you must configure a unique return URL (deep link) for your app and provide this URL string to the SDK. This value is required specifically for the Sign in flow initiated by the SDK.

Important: This configuration is distinct from any other return URLs the SDK might require for handling redirects from external third-party applications. Ensure you are configuring the URL for the SDK's Sign in flow.

Add this snippet to your manifest file in order to set your return URL value for the SDK’s activity.

</div>

<activity android:name="com.klarna.mobile.sdk.activity.KlarnaRedirectReceiverActivity" android:exported="true" tools:node="replace">
   <intent-filter>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.DEFAULT"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="<YOUR-SCHEME>" android:host="<YOUR-HOST>"/>
   </intent-filter>
</activity>

Before starting to work with the Sign In With Klarna, the Android and iOS parts of your React Native app need to be updated in order to provide the best experience and functionality to the users. Please read and follow the before you start -> setting the return url guide for Android and preparation guide for iOS.

You just need to import the KlarnaSignInSDK class from Klarna's React Native Mobile SDK as follows:

import {KlarnaSignInSDK} from 'react-native-klarna-inapp-sdk';

To create an instance of KlarnaSignInSDK you need to call the KlarnaSignInSDK.createInstance():

KlarnaSignInSDK.createInstance({
    environment: KlarnaEnvironment.Staging,
    region: KlarnaRegion.EU,
    returnUrl: 'myApp://signInWithKlarna',
})
.then(klarnaSignInInstance => {
    console.log('KlarnaSignIn instance created: ', klarnaSignInInstance);
    klarnaSignIn = klarnaSignInInstance
})
.catch(e => {

If an instance of KlarnaSignInSDK is initialized correctly, you will get a reference to it in the promise return value. If there is an error during initialization, it will be returned in the catch block of the promise.

Parameters

To start the sign in flow, you need to call the signIn() function:

klarnaSignIn.signIn(clientId, scope, market, locale, tokenizationId)

After calling the signIn function, the sign in flow will be presented to the user. When the user finishes the sign in flow, you would either receive a successful or an error result in the promise returned by the signIn function.

Parameters

Scopes

The table below lists the available scopes and how they correspond to claims and permissions.

The mock-ups below show how users will see required versus optional scopes when entering the Sign in with Klarna flow.

Handle results and errors

There are two main action values to look for, KlarnaSignInUserCancelled triggered when the user cancelled the flow at any point and the KlarnaSignInToken event, received after the signIn process is completed. You can get the tokens from the KlarnaProductEvent params for KlarnaSignInToken event and send it to your backend.

klarnaSignIn
      ?.signIn(clientId, scope, market, locale, tokenizationId)
      .then(r => {
        switch (r.action) {
          case 'KlarnaSignInUserCancelled':
            console.log('User cancelled sign in');
            break;
          case 'KlarnaSignInToken':
            console.log('Token event received: ', r);
            // Access token

KlarnaProductEvent

When the signIn method resolves, a KlarnaProductEvent is returned as a result.
This event type includes three properties, action, params and sessionId.

After the flow is complete and the token has been retrieved and you no longer need the KlarnaSignInSDK instance, you can call the dispose() method to release the resources used by the object.

klarnaSignIn?.dispose();