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
• lucide-react-native and react-native-svg – for the copy icon in Sedad/Bankily modals

npm install react-native-webview lucide-react-native react-native-svg

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

npm install react-native-localize

Optional: for correct safe area insets when using the full-page payment flow, install react-native-safe-area-context and wrap your app in SafeAreaProvider.

Usage

Imperative flow (useMoosylPayment)

Show the payment flow from a button or any event. Use full page (slide-over) or bottom sheet via isFullPage.

import { useMoosylPayment, type PaymentSuccess } from 'moosyl-react-native';

function CheckoutScreen() {
  const { showPaymentFlow, PaymentFlowModal } = useMoosylPayment();

  const handlePay = async () => {
    const payment = await showPaymentFlow({
      publishableApiKey: 'YOUR_PUBLISHABLE_API_KEY',
      transactionId: 'YOUR_TRANSACTION_ID',
      testMode: true,
      primaryColor: '#F55E1E',
      locale: 'en',
      phoneNumber: '22222222',
      isFullPage: true,   // true = full page, false = bottom sheet
    });
    if (payment) {
      console.log('Success', payment.id, payment.amount, payment.method);
    }
  };

  return (
    <>
      <Button onPress={handlePay} title="Pay" />
      <PaymentFlowModal />
    </>
  );
}

Declarative 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 },
  ]}
  testMode={true}
  locale="en"
  onPaySuccess={(request, method) => console.log('Pay success', request.id)}
  onPayError={(err) => console.error(err)}
  phoneNumber="22222222"
/>;

Summary items (items)

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

Localization (ar, fr, en)

Supported locales: 'en', 'fr', 'ar'. Pass the locale prop to MoosylView or showPaymentFlow config. 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