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
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.
After adding the required dependency, you can import and add the KlarnaCheckoutView component to your app as shown below:
import {
KlarnaCheckoutView,
} from 'react-native-klarna-inapp-sdk';
// ...
const MyKlarnaCheckoutView = () => {
return (
<KlarnaCheckoutView
style={{
flex: 1,In this section, we look at all the props that KlarnaCheckoutView provides.
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.
This prop is optional and is of type ViewStyle. You can use it to style KlarnaCheckoutView.
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:
| Name | Type | Description |
|---|---|---|
| action | string | Name of the event |
| params | { [key: string]: any } | A dictionary/map of key-value pairs containing the parameters of the event. |
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.
| Name | Type | Description |
|---|---|---|
| name | string | Name of the error |
| message | string | Message of the error |
| isFatal | boolean | Indicates whether the error is fatal or not. If it is fatal, you should no longer show KlarnaCheckoutView. |
KlarnaCheckoutView exposes a set of methods via a view reference. The methods are as follows.
This method has a single parameter of type string and can be used to set the checkout HTML snippet.
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.
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.