@pulsebyshiga/collect-react-native

React Native bindings for Pulse Collect — render the same Pulse-hosted payment embed used on the web inside a WebView, with events delivered through the native message bridge. Your brand and your screen; the key and user PII stay on your backend.

Pre-release (0.2.0). The public API may still change. Validate on physical devices before shipping.

Requirements

• React ≥ 18 and react-native-webview ≥ 13 (peer dependencies).
• A session token (cs_*) minted by your backend with @pulsebyshiga/node.

Installation

npm install @pulsebyshiga/collect-react-native react-native-webview
# then: cd ios && pod install (bare RN) — Expo projects need no extra step

Quickstart

import { PulseCollectPayment } from '@pulsebyshiga/collect-react-native';

export function FundScreen({ sessionToken }: { sessionToken: string }) {
  return (
    <PulseCollectPayment
      sessionToken={sessionToken}
      theme={{ primaryColor: '#083a9a' }}
      onSuccess={(orderId) => showFunded(orderId)} // UX only — credit off the webhook
      onError={(code, message) => report(code, message)}
    />
  );
}

Props

| Prop | Type | Description | | --------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------ | | sessionToken | string (required) | Single-order session token from your backend. | | flow | "select" \| "direct" | Selection flow (default) or pinned asset/network. | | networks / assets | string[] | Narrow the selectable sets for this mount (narrowing only — see @pulsebyshiga/collect-js). | | theme / strings | EmbedTheme / EmbedStrings | Same tokens and placeholders as the web loader. | | style | WebView style | When omitted, the WebView height follows the embed content. | | embedUrl / apiUrl | string | Origin overrides for local development. | | callbacks | — | onReady, onStatusChange, onSuccess, onQuoteExpired, onQuoteRefreshed, onError, onResize. |

Platform notes

• Configuration travels in the URL. Theme and copy are applied via URL params at load — there is no message-in channel on React Native, so changing theme/strings props reloads the WebView (the memoized source changes).
• Height — the embed reports its content height; the wrapper tracks it automatically unless you pass style. onResize(height) exposes the raw signal.
• Events — all embed events arrive through onMessage on the WebView; the wrapper validates and dispatches them to your typed callbacks (dispatchEmbedMessage is exported for custom WebView setups).

Security model

Identical to the web: your sk_* key and user PII stay on your backend; the app receives only the single-order cs_* token, and the payment surface renders inside Pulse-hosted content. Credit users exclusively from the signed disbursement.completed webhook.

Related packages

• @pulsebyshiga/collect-js — the framework-agnostic loader this wraps.
• @pulsebyshiga/collect-react — React (web) bindings.
• @pulsebyshiga/node — backend SDK: sessions, orders, webhook verification.

License

MIT © Shiga Digital