Official React Native SDK for Shika Creators - Accept Mobile Money payments using WebView.

React Native SDK

The official React Native SDK for Shika Creators enables you to accept Mobile Money payments in your React Native app using WebView.

Requirements: React Native 0.60+, react-native-webview 11.0+

Installation

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

yarn add @shikacreators/react-native react-native-webview

iOS Setup

cd ios && pod install

Android Setup

No additional setup required.

Quick Start

Wrap your app with Shika CreatorsProvider

import { Shika CreatorsProvider, Shika CreatorsAutoModal } from '@shikacreators/react-native'

function App() {
  return (
    <Shika CreatorsProvider
      publicKey="pk_test_your_public_key"
      baseUrl="https://shikacreators.com"
    >
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
      {/* Add the auto modal at the root */}
      <Shika CreatorsAutoModal />
    </Shika CreatorsProvider>
  )
}

Create a checkout session on your server

// Server-side (Node.js)
import Shika Creators from '@shikacreators/node'

const shikacreators = new Shika Creators('sk_test_your_secret_key')

const session = await shikacreators.checkoutSessions.create({
  amount: 100.00,
  currency: 'GHS',
  success_url: 'https://yoursite.com/success',
  cancel_url: 'https://yoursite.com/cancel',
})

// Return session.id to your mobile app

Use the useShika Creators hook to trigger payments

import { useShika Creators } from '@shikacreators/react-native'
import { Button, Alert, View } from 'react-native'

function CheckoutScreen() {
  const { checkout, isVisible } = useShika Creators()

  const handlePay = async () => {
    try {
      // Get session ID from your server
      const response = await fetch('https://your-api.com/create-session', {
        method: 'POST',
        body: JSON.stringify({ amount: 100 }),
      })
      const { sessionId } = await response.json()

      // Open the payment modal
      checkout({
        sessionId,
        onSuccess: (data) => {
          console.log('Payment successful!', data)
          Alert.alert('Success', 'Payment completed!')
        },
        onCancel: () => {
          console.log('Payment cancelled')
        },
        onError: (error) => {
          Alert.alert('Error', error.message)
        },
      })
    } catch (error) {
      Alert.alert('Error', 'Failed to create checkout session')
    }
  }

  return (
    <View style={{ padding: 20 }}>
      <Button
        title="Pay GHS 100.00"
        onPress={handlePay}
        disabled={isVisible}
      />
    </View>
  )
}

Components

Shika CreatorsProvider

Wrap your application with Shika CreatorsProvider to enable Shika Creators functionality.

<Shika CreatorsProvider
  publicKey="pk_test_xxx"
  baseUrl="https://shikacreators.com"
>
  {children}
</Shika CreatorsProvider>

Prop	Type	Required	Description
`publicKey`	string	Yes	Your Shika Creators public key
`baseUrl`	string	No	Base URL for checkout pages

Shika CreatorsAutoModal

An auto-managed modal that responds to checkout() and payWithLink() calls. Place at the root of your app.

<Shika CreatorsAutoModal />

Shika CreatorsModal

A manually controlled modal for more control.

const [visible, setVisible] = useState(false)

<Shika CreatorsModal
  visible={visible}
  sessionId="cs_xxx"
  onSuccess={(data) => {
    console.log('Paid!', data)
    setVisible(false)
  }}
  onCancel={() => setVisible(false)}
  onClose={() => setVisible(false)}
  animationType="slide"
  showCloseButton={true}
/>

Prop	Type	Default	Description
`visible`	boolean	-	Whether modal is visible
`sessionId`	string	-	Checkout session ID
`paymentLinkId`	string	-	Payment link ID
`onSuccess`	function	-	Called on success
`onCancel`	function	-	Called on cancel
`onClose`	function	-	Called when modal closes
`animationType`	string	"slide"	Animation type
`showCloseButton`	boolean	true	Show close button
`safeAreaColor`	string	"#ffffff"	Safe area color

Shika Creators (WebView Component)

Low-level WebView component for custom implementations.

<Shika Creators
  sessionId="cs_xxx"
  onSuccess={(data) => console.log('Paid!', data)}
  onCancel={() => console.log('Cancelled')}
  onError={(error) => console.error(error)}
  onLoad={() => console.log('Loaded')}
  style={{ flex: 1 }}
  showLoader={true}
/>

Hooks

useShika Creators

import { useShika Creators } from '@shikacreators/react-native'

const {
  checkout,     // (params: CheckoutParams) => void
  payWithLink,  // (params: PaymentLinkParams) => void
  close,        // () => void
  isVisible,    // boolean
  publicKey,    // string
  baseUrl,      // string
} = useShika Creators()

Payment Links

Accept payments using payment links:

const { payWithLink } = useShika Creators()

const handleDonate = () => {
  payWithLink({
    linkId: 'pl_xxx',
    amount: 50.00,  // For dynamic amount links
    email: 'customer@example.com',
    phone: '0241234567',
    onSuccess: (data) => {
      console.log('Donation successful!', data)
    },
    onCancel: () => {
      console.log('Donation cancelled')
    },
  })
}

TypeScript

The SDK includes full TypeScript definitions:

import type {
  Shika CreatorsConfig,
  CheckoutParams,
  PaymentLinkParams,
  PaymentResult,
  Shika CreatorsError,
} from '@shikacreators/react-native'

Error Handling

checkout({
  sessionId: 'cs_xxx',
  onError: (error) => {
    switch (error.type) {
      case 'validation_error':
        Alert.alert('Invalid Input', error.message)
        break
      case 'payment_error':
        Alert.alert('Payment Failed', error.message)
        break
      case 'network_error':
        Alert.alert('Network Error', error.message)
        break
      default:
        Alert.alert('Error', error.message)
    }
  },
})

Test Mode

Use test mode keys (pk_test_xxx) during development:

<Shika CreatorsProvider publicKey="pk_test_xxx">
  {/* Test mode enabled */}
</Shika CreatorsProvider>

In test mode, the checkout page shows simulation controls to test success, failure, and cancellation flows.

Complete Example

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { View, Button, Text, StyleSheet, Alert } from 'react-native'
import { Shika CreatorsProvider, Shika CreatorsAutoModal, useShika Creators } from '@shikacreators/react-native'

const Stack = createNativeStackNavigator()

function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to My Store</Text>
      <Button title="Go to Checkout" onPress={() => navigation.navigate('Checkout')} />
    </View>
  )
}

function CheckoutScreen() {
  const { checkout, isVisible } = useShika Creators()

  const handlePay = async () => {
    try {
      const response = await fetch('https://api.yourstore.com/create-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amount: 100, currency: 'GHS' }),
      })
      const { sessionId } = await response.json()

      checkout({
        sessionId,
        onSuccess: (data) => {
          Alert.alert('Success', `Payment ${data.id} completed!`)
        },
        onCancel: () => {
          Alert.alert('Cancelled', 'Payment was cancelled')
        },
        onError: (error) => {
          Alert.alert('Error', error.message)
        },
      })
    } catch (error) {
      Alert.alert('Error', 'Failed to start checkout')
    }
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Your Cart</Text>
      <Text style={styles.price}>Total: GHS 100.00</Text>
      <Button
        title={isVisible ? 'Processing...' : 'Pay Now'}
        onPress={handlePay}
        disabled={isVisible}
      />
    </View>
  )
}

export default function App() {
  return (
    <Shika CreatorsProvider publicKey="pk_test_xxx" baseUrl="https://shikacreators.com">
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Checkout" component={CheckoutScreen} />
        </Stack.Navigator>
      </NavigationContainer>
      <Shika CreatorsAutoModal />
    </Shika CreatorsProvider>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  price: { fontSize: 18, marginBottom: 20 },
})

Troubleshooting

WebView not loading

Make sure you have installed and linked react-native-webview:

npm install react-native-webview
cd ios && pod install

Ensure Shika CreatorsAutoModal is placed at the root level of your app, inside Shika CreatorsProvider:

<Shika CreatorsProvider publicKey="pk_test_xxx">
  <App />
  <Shika CreatorsAutoModal /> {/* Must be inside provider */}
</Shika CreatorsProvider>

Payment callbacks not firing

Ensure you're passing callback functions correctly:

checkout({
  sessionId,
  onSuccess: (data) => { /* handle success */ },
  onCancel: () => { /* handle cancel */ },
  onError: (error) => { /* handle error */ },
})

React Native SDK

On this page