React native integration

This guide explains how to integrate Kustom Checkout into a React Native app.

Adding the Dependency For KlarnaCheckoutView Component

The KlarnaCheckoutView component is part of Klarna's React Native Mobile SDK. To use it, add a dependency to your app. Refer to the React Native: Getting Started guide for details: https://docs.klarna.com/payments/mobile-payments/integrate-with-mobile-sdk/reactnative/get-started/.

Rendering KlarnaCheckoutView

After adding the dependency, import and render the component:

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

// ...
const MyKlarnaCheckoutView = () => {
  return (
    <KlarnaCheckoutView
      style={{
        flex: 1,
      }}
      returnUrl={'returnUrl://'}
      onEvent={event => {
        // Handle the event
        if (event.action === 'complete') {
          // Checkout has been completed, you can now navigate user to confirmation screen
        }
      }}
      onError={error => {
        // Handle the error
      }}
    />
  );
};

KlarnaCheckoutView Props

returnUrl

This is the only mandatory prop. It's a string used for redirecting third-party apps back to your app. The URL must match the registered return URL in your app. See the React Native: Getting Started guide for details.

style

An optional ViewStyle prop to style the KlarnaCheckoutView.

onEvent

An optional lambda called when the component receives an event. The parameter is a KlarnaProductEvent object.

onError

An optional lambda called when an error occurs. The parameter is a KlarnaMobileSDKError object.

KlarnaCheckoutView Methods

setSnippet

Sets the checkout HTML snippet. Takes a string parameter.

suspend

Suspends the checkout flow. Displays a loading indicator.

resume

Resumes the checkout flow after suspending.