React Native

const response = await fetch('https://api.yourshop.com/checkout', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ cartId }),
});

const { authorization_token: token } = await response.json();

import { WajubProvider, usePayment } from '@wajub/react-native';

function Checkout({ token }: { token: string }) {
  const { present, PaymentSheet } = usePayment();

  const pay = async () => {
    const result = await present({ sessionToken: token });

    if ('cancelled' in result) return;

    switch (result.status) {
      case 'complete':
        navigation.navigate('OrderPaid', { ref: result.transaction.reference });
        break;
      case 'requires_action':
        if (result.action === 'push_approval') {
          setInstruction(
            result.transaction.processing_context?.payer_instruction ??
              'Approve the payment on your phone.',
          );
        }
        // Any other action is a page the sheet already opened in the browser.
        break;
      case 'processing':
        // Accepted, not confirmed yet. Watch the status or wait on your webhook.
        break;
      case 'failed':
        Alert.alert('Payment failed', result.error.message);
        break;
    }
  };

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

export default function App() {
  return (
    <WajubProvider>
      <Checkout token={token} />
    </WajubProvider>
  );
}

import { createSession } from '@wajub/react-native';

const session = createSession(token);
const data = await session.loadSession();

// data.transaction.amount, data.transaction.currency, data.branding, data.locale
const operators = data.channels.filter(
  (c) => c.type.toLowerCase() === 'mobile_money' || c.type.toLowerCase() === 'mobile',
);

const result = await session.payMobileMoney({
  channel_slug: operators[0].slug,
  phone: '+237670000000',
  country: 'CM',
});

useEffect(() => {
  const unsubscribe = session.watchStatus((result) => {
    if (result.status === 'complete') setOrderState('paid');
    if (result.status === 'failed') setOrderState('failed');
  });

  return unsubscribe;
}, [session]);

import { StripeProvider } from '@stripe/stripe-react-native';
import { createSession, StripeCardSection } from '@wajub/react-native';

function CardCheckout({ token }: { token: string }) {
  const session = useMemo(() => createSession(token), [token]);
  const [publishableKey, setKey] = useState<string | null>(null);
  const [name, setName] = useState('');

  useEffect(() => {
    session.loadSession().then(async () => {
      const config = await session.getSdkConfig();
      const slug = session.cardChannelSlug();
      setKey(slug ? (config.channels[slug]?.publishable_key ?? null) : null);
    });
  }, [session]);

  if (!publishableKey) return <ActivityIndicator />;

  return (
    <StripeProvider publishableKey={publishableKey}>
      <StripeCardSection
        cardholderName={name}
        onCardholderNameChange={setName}
        submitting={false}
        error={null}
        onPay={async (paymentMethodId) => {
          const slug = session.cardChannelSlug()!;
          const result = await session.payCard(slug, paymentMethodId, name);
          await session.handleRedirectAction(result);
        }}
      />
    </StripeProvider>
  );
}

const config = await session.getSdkConfig();
const slug = session.cardChannelSlug()!;
const channel = config.channels[slug];

if (channel?.client_session) {
  // Opens the provider's checkout, waits for the payer to come back, then verifies.
  const result = await session.payCardHosted(slug, { email: '[email protected]' });
  // 'complete', or 'processing' until the provider confirms.
} else if (channel?.sdk === 'hosted_redirect') {
  const result = await session.payCardHostedRedirect(slug, {
    email: '[email protected]', // every field in channel.required_fields
  });
  await session.handleRedirectAction(result);
}

import { WajubError } from '@wajub/react-native';

try {
  const result = await session.payMobileMoney(input);
  if (result.status === 'failed') {
    // result.error is a plain WajubErrorShape, not a thrown instance
    showRetry(result.error.message, result.error.retryable);
  }
} catch (error) {
  if (error instanceof WajubError && error.type === 'rate_limit_error') {
    showRetryIn(error.retry_after_seconds ?? 60);
    return;
  }
  throw error;
}