moosyl-react-native

React Native UI components for integrating Moosyl Mauritanian payment solutions.

Installation

pnpm add moosyl-react-native

Install the native peer dependencies used by the package:

• react-native-webview – for the Masrivi payment WebView
• lucide-react-native and react-native-svg – for the copy icon in Sedad/Bankily modals

pnpm add react-native-webview lucide-react-native react-native-svg

Usage

Complete flow (MoosylView)

Embed the payment UI directly in your screen.

import { MoosylView } from 'moosyl-react-native';

<MoosylView
  apiKey="YOUR_PUBLISHABLE_API_KEY"
  transactionId="YOUR_TRANSACTION_ID"
  items={[
    { label: 'amountToPay', amount: 100 },
    { label: 'serviceFee', amount: 5 },
    { label: 'tax', amount: 10 },
  ]}
  locale="en"
  onPaySuccess={(request, method) => console.log('Pay success', request.id)}
  onPayError={(err) => console.error(err)}
  phoneNumber="22222222"
/>;

Custom UI (MoosylPaymentMethods)

Use MoosylPaymentMethods when you want your app to own the checkout UI while the package still handles platform loading, selection, and the same continue/payment flow used by MoosylView.

import { useRef, useState } from 'react';
import { Button, Text, View } from 'react-native';
import {
  MoosylPaymentMethods,
  type PaymentMethodItem,
  type MoosylPaymentMethodsRef,
} from 'moosyl-react-native';

function CustomCheckout() {
  const paymentMethodsRef = useRef<MoosylPaymentMethodsRef>(null);
  const [selectedMethod, setSelectedMethod] =
    useState<PaymentMethodItem | null>(null);

  return (
    <View>
      <MoosylPaymentMethods
        ref={paymentMethodsRef}
        apiKey="YOUR_PUBLISHABLE_API_KEY"
        transactionId="YOUR_TRANSACTION_ID"
        locale="en"
        phoneNumber="22222222"
        selectedMethodId={selectedMethod?.id ?? null}
        onSelectMethod={setSelectedMethod}
        onPaySuccess={(request, method) =>
          console.log('Success', request.id, method.method)
        }
        onPayError={(err) => console.error(err)}
      />

      <Button
        title={`Pay with ${selectedMethod?.method ?? 'Moosyl'}`}
        disabled={!selectedMethod}
        onPress={() => paymentMethodsRef.current?.continuePayment()}
      />
    </View>
  );
}

For full visual control over the platform rows, pass renderMethod:

<MoosylPaymentMethods
  apiKey="YOUR_PUBLISHABLE_API_KEY"
  onSelectMethod={setSelectedMethod}
  renderMethod={({ title, isSelected, onSelect }) => (
    <Text onPress={onSelect}>
      {isSelected ? '✓ ' : ''}
      {title}
    </Text>
  )}
/>

Summary items (items)

items belongs to MoosylView only. It is an optional list of summary rows shown under the payment method list (e.g. subtotal, service fee, tax). Each entry has a label and an amount, and the total must match the Moosyl payment request amount before the payment flow continues.

Localization (ar, fr, en)

Supported locales: 'en', 'fr', 'ar'. Pass the locale prop to MoosylView or MoosylPaymentMethods. Known summary labels are translated when possible.

Contributing

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

License

MIT

Made with create-react-native-library