@klarna/react-native-klarna-network-payment 0.0.1 → 2.7.0

package/lib/typescript/types/models/KlarnaShippingTypeAttribute.d.ts

@@ -0,0 +1,21 @@
+/** Additional attribute for a shipping type. */
+export type KlarnaShippingTypeAttribute = 
+/** Delivery is contactless. */
+'CONTACTLESS_DELIVERY'
+/** Express delivery. */
+ | 'EXPRESS'
+/** Identification is required upon delivery. */
+ | 'IDENTIFICATION_REQUIRED'
+/** Package may be left at the curb. */
+ | 'LEAVE_AT_CURB'
+/** Package may be left at the door. */
+ | 'LEAVE_AT_DOOR'
+/** Package may be left with a neighbour. */
+ | 'LEAVE_WITH_NEIGHBOUR'
+/** Signature is required upon delivery. */
+ | 'SIGNATURE_REQUIRED'
+/** Delivery is tracked. */
+ | 'TRACKED'
+/** Delivery is not tracked. */
+ | 'UNTRACKED';
+//# sourceMappingURL=KlarnaShippingTypeAttribute.d.ts.map

package/lib/typescript/types/models/KlarnaShippingTypeAttribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KlarnaShippingTypeAttribute.d.ts","sourceRoot":"","sources":["../../../../src/types/models/KlarnaShippingTypeAttribute.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,MAAM,MAAM,2BAA2B;AACrC,+BAA+B;AAC7B,sBAAsB;AACxB,wBAAwB;GACtB,SAAS;AACX,gDAAgD;GAC9C,yBAAyB;AAC3B,uCAAuC;GACrC,eAAe;AACjB,uCAAuC;GACrC,eAAe;AACjB,4CAA4C;GAC1C,sBAAsB;AACxB,2CAA2C;GACzC,oBAAoB;AACtB,2BAA2B;GACzB,SAAS;AACX,+BAA+B;GAC7B,WAAW,CAAC"}

package/lib/typescript/types/models/KlarnaSubscription.d.ts

@@ -0,0 +1,14 @@
+import type { KlarnaBillingPlan } from './KlarnaBillingPlan';
+import type { KlarnaFreeTrial } from './KlarnaFreeTrial';
+/** Subscription details for a payment request. */
+export type KlarnaSubscription = {
+    /** Reference for the subscription. */
+    subscriptionReference: string;
+    /** Name of the subscription. */
+    name?: string;
+    /** Free trial status. */
+    freeTrial?: KlarnaFreeTrial;
+    /** Billing plans for the subscription. */
+    billingPlans?: KlarnaBillingPlan[];
+};
+//# sourceMappingURL=KlarnaSubscription.d.ts.map

package/lib/typescript/types/models/KlarnaSubscription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KlarnaSubscription.d.ts","sourceRoot":"","sources":["../../../../src/types/models/KlarnaSubscription.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,kDAAkD;AAClD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,sCAAsC;IACtC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAC;CACpC,CAAC"}

package/lib/typescript/types/models/KlarnaSupplementaryPurchaseData.d.ts

@@ -0,0 +1,21 @@
+import type { KlarnaLineItem } from './KlarnaLineItem';
+import type { KlarnaOndemandService } from './KlarnaOndemandService';
+import type { KlarnaPartnerCustomer } from './KlarnaPartnerCustomer';
+import type { KlarnaShipping } from './KlarnaShipping';
+import type { KlarnaSubscription } from './KlarnaSubscription';
+/** Supplementary purchase data for a payment request. */
+export type KlarnaSupplementaryPurchaseData = {
+    /** Customer information. */
+    customer?: KlarnaPartnerCustomer;
+    /** List of line items in the order. */
+    lineItems?: KlarnaLineItem[];
+    /** Reference for the purchase. */
+    purchaseReference?: string;
+    /** List of shipping information. */
+    shipping?: KlarnaShipping[];
+    /** On-demand service information. */
+    ondemandService?: KlarnaOndemandService;
+    /** List of subscriptions. */
+    subscriptions?: KlarnaSubscription[];
+};
+//# sourceMappingURL=KlarnaSupplementaryPurchaseData.d.ts.map

package/lib/typescript/types/models/KlarnaSupplementaryPurchaseData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KlarnaSupplementaryPurchaseData.d.ts","sourceRoot":"","sources":["../../../../src/types/models/KlarnaSupplementaryPurchaseData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,yDAAyD;AACzD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,uCAAuC;IACvC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,qCAAqC;IACrC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,6BAA6B;IAC7B,aAAa,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACtC,CAAC"}

package/lib/typescript/types/models/index.d.ts

@@ -0,0 +1,22 @@
+export type { KlarnaBillingPlan } from './KlarnaBillingPlan';
+export type { KlarnaCollectCustomerProfileType } from './KlarnaCollectCustomerProfileType';
+export type { KlarnaCustomer } from './KlarnaCustomer';
+export type { KlarnaFreeTrial } from './KlarnaFreeTrial';
+export type { KlarnaInterval } from './KlarnaInterval';
+export type { KlarnaLineItem } from './KlarnaLineItem';
+export type { KlarnaOndemandService } from './KlarnaOndemandService';
+export type { KlarnaPartnerCustomer } from './KlarnaPartnerCustomer';
+export type { KlarnaPaymentRequestData } from './KlarnaPaymentRequestData';
+export type { KlarnaRequestCustomerToken } from './KlarnaRequestCustomerToken';
+export type { KlarnaRequestCustomerTokenScope } from './KlarnaRequestCustomerTokenScope';
+export type { KlarnaShipping } from './KlarnaShipping';
+export type { KlarnaShippingConfig } from './KlarnaShippingConfig';
+export type { KlarnaShippingConfigMode } from './KlarnaShippingConfigMode';
+export type { KlarnaShippingOption } from './KlarnaShippingOption';
+export type { KlarnaShippingRecipient } from './KlarnaShippingRecipient';
+export type { KlarnaShippingType } from './KlarnaShippingType';
+export type { KlarnaShippingTypeAttribute } from './KlarnaShippingTypeAttribute';
+export type { KlarnaSubscription } from './KlarnaSubscription';
+export type { KlarnaSupplementaryPurchaseData } from './KlarnaSupplementaryPurchaseData';
+export type { KlarnaPaymentPresentationContent, KlarnaPaymentPresentationData, KlarnaPaymentPresentationIcon, KlarnaPaymentPresentationImageAlignment, KlarnaPaymentPresentationInstruction, KlarnaPaymentPresentationIntent, KlarnaPaymentPresentationPaymentButton, KlarnaPaymentPresentationPaymentOption, KlarnaPaymentPresentationPaymentStatus, KlarnaPaymentPresentationText, KlarnaPaymentPresentationTextPart, KlarnaPaymentPresentationTextPartLinkContext, KlarnaPaymentPresentationTextPartStyle, } from './KlarnaPaymentPresentation';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/types/models/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/models/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,YAAY,EAAE,gCAAgC,EAAE,MAAM,oCAAoC,CAAC;AAC3F,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACrE,YAAY,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC/E,YAAY,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AACzF,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACjF,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AACzF,YAAY,EACV,gCAAgC,EAChC,6BAA6B,EAC7B,6BAA6B,EAC7B,uCAAuC,EACvC,oCAAoC,EACpC,+BAA+B,EAC/B,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,6BAA6B,EAC7B,iCAAiC,EACjC,4CAA4C,EAC5C,sCAAsC,GACvC,MAAM,6BAA6B,CAAC"}

package/package.json

@@ -1,10 +1,124 @@
 {
   "name": "@klarna/react-native-klarna-network-payment",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @klarna/react-native-klarna-network-payment",
+  "version": "2.7.0",
+  "description": "React Native package for Klarna Network Payment",
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+    "react-native",
+    "klarna",
+    "sdk",
+    "network",
+    "payment"
+  ],
+  "repository": "https://github.com/klarna/react-native-klarna-inapp-sdk",
+  "main": "./src/index.tsx",
+  "codegenConfig": {
+    "name": "KlarnaNetworkPaymentSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.klarna.mobile.sdk.reactnative.klarnanetwork.payment"
+    },
+    "ios": {
+      "componentProvider": {
+        "KlarnaNetworkPaymentButton": "KlarnaPaymentButtonComponentView"
+      },
+      "modulesProvider": {
+        "KlarnaNetworkPayment": "KlarnaNetworkPayment"
+      }
+    }
+  },
+  "author": "Mobile SDK <mobile.sdk@klarna.com>",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/klarna/react-native-klarna-inapp-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/klarna/react-native-klarna-inapp-sdk/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "*.podspec",
+    "!ios/build",
+    "!ios/Pods",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "create-react-native-library": {
+    "type": "turbo-module",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.62.0"
+  },
+  "types": "./src/index.tsx",
+  "react-native": "./src/index.tsx",
+  "source": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./src/index.tsx",
+      "react-native": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./package.json": "./package.json"
+  },
+  "packageManager": "yarn@4.4.0",
+  "scripts": {
+    "prepack": "bob build",
+    "test": "jest",
+    "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
+    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "typecheck": "tsc --noEmit",
+    "test:ios": "xcodebuild test -workspace ../../TestApp/ios/TestApp.xcworkspace -scheme 'react-native-klarna-network-payment-Unit-Tests' -destination 'platform=iOS Simulator,name=iPhone 17 Pro'"
+  },
+  "devDependencies": {
+    "@klarna/react-native-klarna-network-core": "workspace:*",
+    "@types/jest": "^29.5.4",
+    "@types/react": "^18.0.24",
+    "@types/react-native": "^0.72.2",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.76.8",
+    "react": "18.2.0",
+    "react-native": "0.76.0",
+    "react-native-builder-bob": "^0.20.0",
+    "typescript": "^5.0.2"
+  },
+  "peerDependencies": {
+    "@klarna/react-native-klarna-network-core": "2.7.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.76.0 <1.0.x"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "jest": {
+    "preset": "react-native",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/lib/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-native|@react-native)/)"
+    ]
+  }
 }

package/react-native-klarna-network-payment.podspec

@@ -0,0 +1,28 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-klarna-network-payment"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.swift_version = '5.0'
+  s.source       = { :git => "https://github.com/klarna/react-native-klarna-inapp-sdk.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/Sources/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/Sources/**/*.h"
+
+  install_modules_dependencies(s)
+
+  s.dependency 'KlarnaMobileSDK/KlarnaNetworkPayment', '2.11.7'
+  s.dependency 'react-native-klarna-network-core', s.version.to_s
+
+  s.test_spec 'Tests' do |ts|
+    ts.source_files = 'ios/Tests/**/*.swift'
+  end
+end

package/src/KlarnaNetworkPayment.ts

@@ -0,0 +1,30 @@
+import type { KlarnaPaymentRequest } from './types/KlarnaPaymentRequest';
+import type { KlarnaPaymentRequestData } from './types/models/KlarnaPaymentRequestData';
+import type {
+  KlarnaPaymentPresentationContent,
+  KlarnaPaymentPresentationData,
+} from './types/models/KlarnaPaymentPresentation';
+
+/** Provides access to payment presentation content for rendering Klarna UI elements. */
+export interface KlarnaPaymentPresentation {
+  /** Fetches presentation content for the given amount, currency, and intent. */
+  fetch(
+    data: KlarnaPaymentPresentationData
+  ): Promise<KlarnaPaymentPresentationContent>;
+  /** Handles a deep link URL returned from the Klarna flow and returns updated presentation content. */
+  handleLink(url: string): Promise<KlarnaPaymentPresentationContent>;
+}
+
+/** Entry point for managing the Klarna Network Payment lifecycle. */
+export interface KlarnaPayment {
+  /** Provides access to payment presentation content. */
+  readonly presentation: KlarnaPaymentPresentation;
+  /** Initiates a payment request by its existing payment request ID or data for client side payment request creation. */
+  initiate(
+    paymentRequestIdOrData: string | KlarnaPaymentRequestData
+  ): Promise<KlarnaPaymentRequest>;
+  /** Fetches the current state of a payment request by its ID. */
+  fetch(paymentRequestId: string): Promise<KlarnaPaymentRequest>;
+  /** Cancels a payment request by its ID. */
+  cancel(paymentRequestId: string): Promise<KlarnaPaymentRequest>;
+}

package/src/KlarnaNetworkPaymentImpl.ts

@@ -0,0 +1,79 @@
+import NativeKlarnaNetworkPayment from './Specs/NativeKlarnaNetworkPayment';
+import type {
+  KlarnaPayment,
+  KlarnaPaymentPresentation,
+} from './KlarnaNetworkPayment';
+import type { KlarnaPaymentRequest } from './types/KlarnaPaymentRequest';
+import type { KlarnaPaymentRequestData } from './types/models/KlarnaPaymentRequestData';
+import type {
+  KlarnaPaymentPresentationContent,
+  KlarnaPaymentPresentationData,
+} from './types/models/KlarnaPaymentPresentation';
+import {
+  mapPaymentRequest,
+  mapPaymentRequestData,
+  mapPresentationContent,
+} from './KlarnaNetworkPaymentMapper';
+
+class KlarnaPaymentPresentationImpl implements KlarnaPaymentPresentation {
+  constructor(private readonly instanceId: string) {}
+
+  fetch(
+    data: KlarnaPaymentPresentationData
+  ): Promise<KlarnaPaymentPresentationContent> {
+    return NativeKlarnaNetworkPayment.presentationFetch(
+      this.instanceId,
+      data as unknown as Object
+    ).then(mapPresentationContent);
+  }
+
+  handleLink(url: string): Promise<KlarnaPaymentPresentationContent> {
+    return NativeKlarnaNetworkPayment.presentationHandleLink(
+      this.instanceId,
+      url
+    ).then(mapPresentationContent);
+  }
+}
+
+export class KlarnaNetworkPaymentImpl implements KlarnaPayment {
+  private readonly instanceId: string;
+  readonly presentation: KlarnaPaymentPresentation;
+
+  constructor(instanceId: string) {
+    this.instanceId = instanceId;
+    this.presentation = new KlarnaPaymentPresentationImpl(instanceId);
+  }
+
+  initiate(
+    paymentRequestIdOrData: string | KlarnaPaymentRequestData
+  ): Promise<KlarnaPaymentRequest> {
+    if (typeof paymentRequestIdOrData === 'string') {
+      return NativeKlarnaNetworkPayment.initiateWithId(
+        this.instanceId,
+        paymentRequestIdOrData
+      ).then(mapPaymentRequest);
+    }
+    try {
+      return NativeKlarnaNetworkPayment.initiateWithData(
+        this.instanceId,
+        mapPaymentRequestData(paymentRequestIdOrData)
+      ).then(mapPaymentRequest);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }
+
+  fetch(paymentRequestId: string): Promise<KlarnaPaymentRequest> {
+    return NativeKlarnaNetworkPayment.fetch(
+      this.instanceId,
+      paymentRequestId
+    ).then(mapPaymentRequest);
+  }
+
+  cancel(paymentRequestId: string): Promise<KlarnaPaymentRequest> {
+    return NativeKlarnaNetworkPayment.cancel(
+      this.instanceId,
+      paymentRequestId
+    ).then(mapPaymentRequest);
+  }
+}

package/src/KlarnaNetworkPaymentMapper.ts

@@ -0,0 +1,204 @@
+import type { KlarnaAddress } from '@klarna/react-native-klarna-network-core';
+import type { KlarnaBillingPlan } from './types/models/KlarnaBillingPlan';
+import type { KlarnaLineItem } from './types/models/KlarnaLineItem';
+import type { KlarnaOndemandService } from './types/models/KlarnaOndemandService';
+import type { KlarnaPartnerCustomer } from './types/models/KlarnaPartnerCustomer';
+import type { KlarnaPaymentRequest } from './types/KlarnaPaymentRequest';
+import type { KlarnaPaymentRequestData } from './types/models/KlarnaPaymentRequestData';
+import type { KlarnaPaymentRequestState } from './types/KlarnaPaymentRequestState';
+import type { KlarnaPaymentRequestStateReason } from './types/KlarnaPaymentRequestStateReason';
+import type { KlarnaRequestCustomerToken } from './types/models/KlarnaRequestCustomerToken';
+import type { KlarnaShipping } from './types/models/KlarnaShipping';
+import type { KlarnaShippingConfig } from './types/models/KlarnaShippingConfig';
+import type { KlarnaSubscription } from './types/models/KlarnaSubscription';
+import type { KlarnaSupplementaryPurchaseData } from './types/models/KlarnaSupplementaryPurchaseData';
+import type { KlarnaPaymentPresentationContent } from './types/models/KlarnaPaymentPresentation';
+
+function requireFiniteNumber(value: unknown, label: string): number {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    throw new Error(`${label} must be a finite number, got ${value}`);
+  }
+  return value;
+}
+
+export function mapAddress(address: KlarnaAddress | undefined) {
+  if (!address) return null;
+  return {
+    streetAddress: address.streetAddress ?? null,
+    streetAddress2: address.streetAddress2 ?? null,
+    city: address.city ?? null,
+    region: address.region ?? null,
+    postalCode: address.postalCode ?? null,
+    country: address.country ?? null,
+  };
+}
+
+export function mapLineItem(item: KlarnaLineItem) {
+  requireFiniteNumber(
+    item.totalAmount,
+    `KlarnaLineItem "${item.name}": totalAmount`
+  );
+  requireFiniteNumber(item.quantity, `KlarnaLineItem "${item.name}": quantity`);
+  return {
+    currency: item.currency ?? null,
+    imageUrl: item.imageUrl ?? null,
+    name: item.name,
+    productIdentifier: item.productIdentifier ?? null,
+    productUrl: item.productUrl ?? null,
+    quantity: item.quantity,
+    lineItemReference: item.lineItemReference ?? null,
+    shippingReference: item.shippingReference ?? null,
+    subscriptionReference: item.subscriptionReference ?? null,
+    totalAmount: item.totalAmount,
+    totalTaxAmount: item.totalTaxAmount ?? null,
+    unitPrice: item.unitPrice ?? null,
+  };
+}
+
+export function mapPartnerCustomer(
+  customer: KlarnaPartnerCustomer | undefined
+) {
+  if (!customer) return null;
+  return {
+    address: mapAddress(customer.address),
+    email: customer.email ?? null,
+    familyName: customer.familyName ?? null,
+    givenName: customer.givenName ?? null,
+    phone: customer.phone ?? null,
+  };
+}
+
+export function mapShipping(shipping: KlarnaShipping) {
+  return {
+    address: mapAddress(shipping.address),
+    recipient: shipping.recipient
+      ? {
+          attention: shipping.recipient.attention ?? null,
+          email: shipping.recipient.email ?? null,
+          familyName: shipping.recipient.familyName,
+          givenName: shipping.recipient.givenName,
+          phone: shipping.recipient.phone ?? null,
+        }
+      : null,
+    shippingOption: shipping.shippingOption
+      ? {
+          shippingCarrier: shipping.shippingOption.shippingCarrier ?? null,
+          shippingType: shipping.shippingOption.shippingType,
+          shippingTypeAttributes:
+            shipping.shippingOption.shippingTypeAttributes ?? null,
+        }
+      : null,
+    shippingReference: shipping.shippingReference ?? null,
+  };
+}
+
+export function mapOndemandService(service: KlarnaOndemandService | undefined) {
+  if (!service) return null;
+  return {
+    currency: service.currency ?? null,
+    averageAmount: service.averageAmount ?? null,
+    minimumAmount: service.minimumAmount ?? null,
+    maximumAmount: service.maximumAmount ?? null,
+    purchaseInterval: service.purchaseInterval ?? null,
+    purchaseIntervalFrequency: service.purchaseIntervalFrequency ?? null,
+  };
+}
+
+export function mapBillingPlan(plan: KlarnaBillingPlan) {
+  requireFiniteNumber(plan.billingAmount, 'KlarnaBillingPlan: billingAmount');
+  requireFiniteNumber(
+    plan.intervalFrequency,
+    'KlarnaBillingPlan: intervalFrequency'
+  );
+  return {
+    billingAmount: plan.billingAmount,
+    currency: plan.currency ?? null,
+    from: plan.from,
+    interval: plan.interval,
+    intervalFrequency: plan.intervalFrequency,
+  };
+}
+
+export function mapSubscription(s: KlarnaSubscription) {
+  return {
+    subscriptionReference: s.subscriptionReference,
+    name: s.name ?? null,
+    freeTrial: s.freeTrial ?? null,
+    billingPlans: s.billingPlans ? s.billingPlans.map(mapBillingPlan) : null,
+  };
+}
+
+export function mapRequestCustomerToken(
+  token: KlarnaRequestCustomerToken | undefined
+) {
+  if (!token) return null;
+  return {
+    scopes: token.scopes,
+    customerTokenReference: token.customerTokenReference ?? null,
+  };
+}
+
+export function mapShippingConfig(config: KlarnaShippingConfig | undefined) {
+  if (!config) return null;
+  return {
+    supportedCountries: config.supportedCountries ?? null,
+    mode: config.mode,
+  };
+}
+
+export function mapSupplementaryPurchaseData(
+  d: KlarnaSupplementaryPurchaseData | undefined
+) {
+  if (!d) return null;
+  return {
+    customer: mapPartnerCustomer(d.customer),
+    lineItems: d.lineItems ? d.lineItems.map(mapLineItem) : null,
+    purchaseReference: d.purchaseReference ?? null,
+    shipping: d.shipping ? d.shipping.map(mapShipping) : null,
+    ondemandService: mapOndemandService(d.ondemandService),
+    subscriptions: d.subscriptions
+      ? d.subscriptions.map(mapSubscription)
+      : null,
+  };
+}
+
+export function mapPaymentRequestData(data: KlarnaPaymentRequestData) {
+  requireFiniteNumber(data.amount, 'KlarnaPaymentRequestData: amount');
+  return {
+    amount: data.amount,
+    currency: data.currency,
+    paymentOptionId: data.paymentOptionId ?? null,
+    paymentRequestReference: data.paymentRequestReference ?? null,
+    requestCustomerToken: mapRequestCustomerToken(data.requestCustomerToken),
+    shippingConfig: mapShippingConfig(data.shippingConfig),
+    collectCustomerProfile: data.collectCustomerProfile ?? null,
+    supplementaryPurchaseData: mapSupplementaryPurchaseData(
+      data.supplementaryPurchaseData
+    ),
+  };
+}
+
+export function mapPaymentRequest(raw: any): KlarnaPaymentRequest {
+  const spec = raw as {
+    paymentRequestId: string;
+    state: string;
+    previousState: string | null;
+    stateContext: { klarnaNetworkSessionToken: string | null } | null;
+    stateReason: string | null;
+    paymentRequestReference: string | null;
+  };
+  return {
+    paymentRequestId: spec.paymentRequestId,
+    state: spec.state as KlarnaPaymentRequestState,
+    previousState: spec.previousState as KlarnaPaymentRequestState | null,
+    stateContext: spec.stateContext,
+    stateReason: spec.stateReason as KlarnaPaymentRequestStateReason | null,
+    paymentRequestReference: spec.paymentRequestReference,
+  };
+}
+
+export function mapPresentationContent(
+  raw: any
+): KlarnaPaymentPresentationContent {
+  return raw as KlarnaPaymentPresentationContent;
+}

package/src/KlarnaPaymentButton.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import RNKlarnaPaymentButton from './Specs/KlarnaPaymentButtonNativeComponent';
+
+/** Visual state of the Klarna payment button. */
+export type KlarnaPaymentButtonState =
+  /** Default interactive state. */
+  | 'default'
+  /** Button is non-interactive and visually dimmed. */
+  | 'disabled'
+  /** Button shows a loading indicator. */
+  | 'loading';
+
+/** Intent of the Klarna payment button, determining the label and flow it initiates. */
+export type KlarnaPaymentButtonIntent = 'pay' | 'subscribe' | 'addToWallet';
+
+/** Shape of the Klarna payment button. */
+export type KlarnaPaymentButtonShape =
+  /** Rectangle with rounded corners. */
+  | 'roundedRect'
+  /** Pill shaped button. */
+  | 'pill'
+  /** Rectangle with square corners. */
+  | 'rectangle';
+
+/** Fill style of the Klarna payment button. */
+export type KlarnaPaymentButtonStyle = 'filled' | 'outlined';
+
+/** Color theme of the Klarna payment button. Defaults to light. */
+export type KlarnaPaymentButtonTheme =
+  /** Light background with dark foreground content. */
+  | 'light'
+  /** Dark background with light foreground content. */
+  | 'dark'
+  /** Automatically follows the system appearance. */
+  | 'automatic';
+
+/** Props for the KlarnaPaymentButton component. */
+export interface KlarnaPaymentButtonProps {
+  /** The instance ID of the KlarnaNetworkPayment session this button is associated with. */
+  instanceId: string;
+  /** Visual state of the button. */
+  state?: KlarnaPaymentButtonState;
+  /** Intent determining the button label and flow. */
+  intent?: KlarnaPaymentButtonIntent;
+  /** Shape of the button. */
+  shape?: KlarnaPaymentButtonShape;
+  /** Fill style of the button. */
+  buttonStyle?: KlarnaPaymentButtonStyle;
+  /** Color theme of the button. */
+  theme?: KlarnaPaymentButtonTheme;
+  /** Called when the button is tapped. */
+  onPress?: () => void;
+  /** Style applied to the button container. */
+  style?: StyleProp<ViewStyle>;
+}
+
+export function KlarnaPaymentButton({
+  instanceId,
+  state,
+  intent,
+  shape,
+  buttonStyle,
+  theme,
+  onPress,
+  style,
+}: KlarnaPaymentButtonProps) {
+  return (
+    <RNKlarnaPaymentButton
+      instanceId={instanceId}
+      state={state}
+      intent={intent}
+      shape={shape}
+      buttonStyle={buttonStyle}
+      theme={theme}
+      onButtonPress={onPress ? () => onPress() : () => {}}
+      style={style}
+    />
+  );
+}