@uvutech/react-native-xplorpay

XplorPay (Clearent IDTech) card-reader connection and payment for React Native

Connect a Clearent card reader over Bluetooth, take device-swipe payments, and fall back to manual (hosted-iframe) card entry. Headless: your app injects the gateway URL and the per-store credential keys; backend submission stays in your app.

Installation

yarn add @uvutech/react-native-xplorpay react-native-webview @react-native-async-storage/async-storage

⚠️ The Clearent SDK needs a few manual native steps in every app (private CocoaPods source, a Podfile post_install flag, BLE permissions). Follow SETUP.md before building — yarn add alone is not enough.

Usage

import {
  XplorPayProvider,
  ManualCardIframeProvider,
  useXplorPay,
} from '@uvutech/react-native-xplorpay';

// Wrap once near the root:
<XplorPayProvider
  baseURL={GATEWAY_URL}
  deviceId={deviceId}
  enabled={storeId != null}
  // Controlled: your app owns the per-store credential keys (e.g. in Redux)
  // and passes them in. They may start null and arrive later — the SDK init
  // waits for `mobilePublicKey`. Refreshing them (re-fetch + new props) flows
  // straight through to the manual-card iframe.
  mobilePublicKey={mobilePublicKey} // from /store/{id}/credential, or null
  jsPublicKey={jsPublicKey} // from /store/{id}/credential, or null
>
  <ManualCardIframeProvider baseURL={GATEWAY_URL} colorScheme={isDark ? 'dark' : 'light'}>
    {/* app */}
  </ManualCardIframeProvider>
</XplorPayProvider>

// Then anywhere:
const { chargeCard, status, isConnected } = useXplorPay();
const result = await chargeCard(amount); // result.ok → result.jwt

See SETUP.md for the full per-app integration guide, the public API table, and troubleshooting.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library