React Native Payments

Version: 0.3.0 | Platform: iOS 15.0+ / Android API 24+ | React Native: >= 0.71

A drop-in payment SDK for React Native that provides native checkout on iOS (SwiftUI) and Android (Material Design) with card payments, billing address, 3-D Secure v2, and end-to-end encryption.

Quick Start

1. Install

iOS

Requires iOS 15.0+.

Set platform :ios, '15.0' (or higher) in ios/Podfile.

Install pods:

Open ios/YourApp.xcworkspace in Xcode and build.

Android

Requires minSdkVersion 24, compileSdkVersion 34, Java 17.

In android/build.gradle:

Then rebuild:

Auto-linking handles the rest — no changes to MainApplication or AndroidManifest.xml needed.

2. Create Session (Backend)

Your server calls Datman's /create-session endpoint with your secret api_key:

Response: { "session_id": "abc123def456" }

3. Integrate in React Native

Prerequisites

Requirement	Version
Node.js	>= 16
React Native	>= 0.71
iOS	15.0+
Android	API 24+ (Android 7.0)
Xcode	14.0+
CocoaPods	Latest

Credentials (from Datman onboarding)

Credential	Description
`api_key`	Secret key for API authentication
`merchant_id`	Your merchant identifier
`publicKey`	RSA public key (PEM) for card encryption (optional but recommended)

API

`setup(options?)`

One-time SDK configuration. Call once before the first payment.

Parameter	Type	Description
`baseUrl`	`string`	API base URL (default: `https://ws5-payments.datmanpay.com`)
`apiKey`	`string`	Secret key for API authentication
`publicKey`	`string`	RSA public key (PEM) for card encryption
`brandColorHex`	`string`	Brand color hex (e.g., `#0A84FF`) for Pay button

`configure(sessionId)`

Set the session ID returned by your backend's /create-session call.

`open()`

Opens the native checkout sheet. Internally fetches session metadata, presents the card form, handles encryption, submission, and 3-D Secure.

Returns:

Payment Flow

Session-Driven Features

The /get-session response controls SDK behavior:

Field	Type	Default	Effect
`billing_address_enabled`	`boolean`	`true`	Show/hide billing address form
`amex_enabled`	`boolean`	`true`	Accept Amex cards
`discover_enabled`	`boolean`	`true`	Accept Discover cards
`diners_enabled`	`boolean`	`true`	Accept Diners Club cards
`avs.house_number`	`string`	—	Pre-fill address when "Same as delivery" is on
`avs.postcode`	`string`	—	Pre-fill postcode when "Same as delivery" is on

When a card brand is disabled, entering that card number shows "This card is not accepted" and blocks submission. Visa and Mastercard are always accepted.

Theming

Dark mode adapts automatically to the host app's appearance on both platforms.

Troubleshooting

iOS: "Native module not found"

Run npx pod-install

Open .xcworkspace (not .xcodeproj)

Verify: grep RNDatman ios/Podfile.lock

Ensure -ObjC is in Other Linker Flags

Android: "Native module not found"

Run npx react-native config — package should be listed

Clean rebuild: cd android && ./gradlew clean && cd .. && npx react-native run-android

Session Invalid or Expired

Sessions are single-use. Create a new one for each payment attempt.

Payment Fails

Check result.message and result.raw for error details from the gateway.

Quick Start#

1. Install#

iOS#

Android#

2. Create Session (Backend)#

3. Integrate in React Native#

Prerequisites#

Credentials (from Datman onboarding)#

API#

setup(options?)#

configure(sessionId)#

open()#

Payment Flow#

Session-Driven Features#

Theming#

Troubleshooting#

iOS: "Native module not found"#

Android: "Native module not found"#

Session Invalid or Expired#

Payment Fails#