Mobile quickstart

Install

Install the SDK and react-native-webview — cards are entered in the gateway’s PCI-certified widget rendered in a WebView, so your app never handles card data. (Expo Go already bundles react-native-webview; for bare RN, install it and pod-install on iOS.)

bash

npm install @watenga/react-native react-native-webview

WatengaProvider

typescript

import { WatengaProvider } from '@watenga/react-native';

export default function App() {
  return (
    <WatengaProvider
      publicKey="pk_test_your_publishable_key"
      apiBaseUrl="https://api.watenga.africa"
    >
      <YourScreens />
    </WatengaProvider>
  );
}

useWatenga hook

typescript

import { useWatenga } from '@watenga/react-native';

function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useWatenga();

  const pay = async () => {
    await initPaymentSheet({
      amount: 25.0,
      currency: 'USD',
      reference: 'INV-001',
      description: 'Order #1024',
    });
    const result = await presentPaymentSheet();
    if (result.transaction) {
      console.log('Paid', result.transaction.id);
    } else {
      console.log('Not completed', result.error?.message);
    }
  };

  return <Button onPress={pay} title="Pay" />;
}

Card data never touches your app (SAQ A)

When the customer pays by card, the SDK opens the gateway’s PCI-certified COPYandPAY widget in a WebView. The PAN/expiry/CVV are entered there and sent straight to the gateway — never through your app or Watenga’s servers. Mobile-wallet payments (EcoCash, InnBucks, OneMoney) push a prompt to the customer’s phone and poll for confirmation.