react-native-klarna-osm

react-native-klarna-osm is a React Native library that simplifies the integration of Klarna's On-Site Messaging (OSM) into your mobile application.

Features

• Display Klarna's On-Site Messaging (OSM) effortlessly in React Native.
• Configurable styles for seamless design integration.
• Debug mode for enhanced development experience.
• Includes a modal WebView for "Learn More" links.

Installation

1. Add the library to your project:

npm install react-native-klarna-osm
# or
yarn add react-native-klarna-osm
# or
pnpm add react-native-klarna-osm

2. Install the required dependencies:

npm install react-native-svg
# or
yarn add react-native-svg
# or
pnpm add react-native-svg

3. Link native dependencies if not using autolinking:

npx react-native link react-native-svg

Usage

import React from 'react';
import { View } from 'react-native';
import KlarnaOSM from 'react-native-klarna-osm';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <KlarnaOSM
        clientId="your-client-id"
        placementKey="your-placement-key"
        locale="es-ES"
        purchaseAmount={10000} // Amount in minor units (e.g., 100.00 USD -> 10000)
        version="v3"
        region="EU"
        environment="playground" // or 'production'
        debug={true}
        style={{
          container: { margin: 10 },
          badge: { marginBottom: 10 },
          message: { fontSize: 14, color: '#000' },
          learnMore: { color: '#007aff', textDecorationLine: 'underline' },
        }}
      />
    </View>
  );
};

export default App;

Props

Prop Name	Type	Required	Description
clientId	string	Yes	Your Klarna Client ID.
placementKey	string	Yes	Klarna placement key for the OSM.
locale	string	Yes	Locale for the OSM content (e.g., en-US, sv-SE).
purchaseAmount	number	Yes	Purchase amount in minor units (e.g., 10000 for $100.00).
version	string	Yes	API version to use (e.g., v3).
region	string	Yes	Klarna region (US, EU, etc.).
environment	string	Yes	Environment to use (playground or production).
style	object	No	Custom styles for various elements (container, badge, message, learn more).
debug	boolean	No	Enables debug mode for detailed logging.

Contributing

Contributions are welcome! Please submit a pull request or create an issue to report a bug or suggest a feature.

License

MIT

Notes

• Ensure you have valid Klarna credentials to use the service.
• Test your integration in the playground environment before switching to production.

---

Happy coding with react-native-klarna-osm! 🎉