moosyl-react-native

React Native UI components for integrating Moosyl Mauritanian payment solutions

Installation

npm install moosyl-react-native

You will also need react-native-webview if you use the Masrivi flow:

npm install react-native-webview

Optional: for automatic device locale (e.g. for locale prop), install react-native-localize:

npm install react-native-localize

Usage

import { MoosylView } from 'moosyl-react-native';
// Optional: use react-native-localize to pass device locale
// import * as RNLocalize from 'react-native-localize';

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

Summary items (items)

Optional list of summary rows shown under the payment method list (e.g. subtotal, service fee, tax). Each entry has:

• label – Display text. Use a known key to get it translated: 'serviceFee', 'tax', 'total', 'amountToPay', 'paymentSummary'. Any other string is shown as-is.
• amount – Value in MRU.

The component shows a Total row (sum of all item amounts) and a Pay button with that total. The sum must match the backend payment request amount; if it doesn’t, the user sees an error and the pay flow does not continue.

Localization (ar, fr, en)

Contributing

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

License

MIT

Made with create-react-native-library