react-native-klasha-webview

The package allows you accept payment using Klasha and guess what , it doesn't require any form of linking, just install and begin to use .

Installation

Add react-native-klasha-webview to your project by running;

npm install react-native-klasha-webview

or

yarn add react-native-klasha-webview

One more thing

To frontload the installation work, let's also install and configure dependencies used by this project, being react-native-webview

run

yarn add react-native-webview

for IOS: cd iOS && pod install && cd ..

for expo applications run;

expo install react-native-webview

and that's it, you're all good to go!

Usage 1

import React from "react";
import KlashaWebView from "react-native-klasha-webview";
import { View } from "react-native";

function Pay() {
  return (
    <View style={{ flex: 1 }}>
      <KlashaWebView
        buttonText="Pay Now"
        showPayButton={false}
        merchantKey="your-merchantKey"
        businessId="your-businessId"
        amount={120000}
        customerEmail="[e-mail]"
        customerPhoneNumber="08143108254"
        customerFullname="Dansteve Adekanbi"
        callbackUrl=""
        countryCode="NGN"
        sourceCurrency="NGN"
        paymentType=""
        ActivityIndicatorColor="green"
        SafeAreaViewContainer={{ marginTop: 5 }}
        SafeAreaViewContainerModal={{ marginTop: 5 }}
        callBack={(res) => {
          // handle response here
          console.log(res);
        }}
        autoStart={false}
      />
    </View>
  );
}

Usage 2 - Custom Pay Button

Make use of a custom payment trigger button. See example below;

import React from 'react';
import KlashaWebView from 'react-native-klasha-webview';
import { View } from 'react-native';

function Pay() {
  return (
    <View style={{flex: 1}}>
      <KlashaWebView
        buttonText="Pay Now"
        showPayButton={false}
        merchantKey="your-merchantKey"
        businessId="your-businessId"
        amount={120000}
        customerEmail="[e-mail]"
        customerPhoneNumber="08143108254"
        customerFullname="Dansteve Adekanbi"
        callbackUrl=""
        countryCode="NGN"
        sourceCurrency="NGN"
        paymentType=""
        tx_ref={uuid()} // this is only for cases where you have a reference number generated
        ActivityIndicatorColor="green"
        SafeAreaViewContainer={{marginTop: 5}}
        SafeAreaViewContainerModal={{marginTop: 5}}
        handleWebViewMessage={(e) => {
          // handle the message
        }}
        callBack={(e) => {
          // handle response here
          console.log(res);
        }}
        autoStart={false}
        renderButton={(onPress) => {
          <Button onPress={onPress}>
            Pay Now
          </Button>
        }}
      />
    </View>
  );
}

Usage 3 - Using Refs

Make use of a ref to start transaction. See example below;

import React, { useRef } from 'react';
import KlashaWebView from 'react-native-klasha-webview';
import { View, TouchableOpacity,Text } from 'react-native';

function Pay(){
  const KlashaWebViewRef = useRef();

  return (
    <View style={{flex: 1}}>
      <KlashaWebView
        showPayButton={false}
        merchantKey="your-merchantKey"
        businessId="your-businessId"
        amount={120000}
        customerEmail="[e-mail]"
        customerPhoneNumber="08143108254"
        customerFullname="Dansteve Adekanbi"
        callbackUrl=""
        countryCode="NGN"
        sourceCurrency="NGN"
        paymentType=""
        ActivityIndicatorColor="green"
        SafeAreaViewContainer={{marginTop: 5}}
        SafeAreaViewContainerModal={{marginTop: 5}}
        tx_ref={KlashaWebViewRef}
        callBack={(res) => {
          // handle response here
          console.log(res);
        }}
      />

        <TouchableOpacity onPress={()=> KlashaWebViewRef.current.StartTransaction()}>
          <Text>Pay Now</Text>
        </TouchableOpacity>
      </View>
  );
}

Note:

You can also make use of the new props autoStart to initiate payment once the screen mounts. Just see autoStart={true}. This is set to false by default.

API's

Name	use/description	extra
buttonText	Defines text on the button	default: Pay Now
textStyles	Defines styles for text in button	nill
btnStyles	Defines style for button	nill
merchantKey	merchantKey(visit Klasha.com to get yours)	nill
businessId	businessId	1
amount	Amount to be paid	nill
callbackUrl	callbackUrl	nill
countryCode(required by Klasha)	countryCode	nill
sourceCurrency	sourceCurrency	countryCode
ActivityIndicatorColor	color of loader	default: green
customerEmail(required by Klasha)	Customer email	default: nill
customerPhoneNumber(required by Klasha)	Customer mobile	default: nill
customerFullname(required by Klasha)	Customer Name	default: nill
callBack	callback function	default: nill
autoStart	Auto start payment once page is opened	default: false
SafeAreaViewContainer	style for SafeAreaView containter	default: nill
SafeAreaViewContainerModal	style for SafeAreaView for modal	default: nill
showPayButton	Control the Pay Now button visibility	default: true
tx_ref	Reference number, if you have already generated one	default: ''+Math.floor((Math.random() * 1000000000) + 1)
renderButton	Render your own Pay Now button, should be used when showPayButton is true	default: null
handleWebViewMessage	Will be called when a WebView receives a message	default: true

For more information checkout klasha's documentation

Contributing

Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

How can I thank you?

Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or anywhere? Spread the word!

Don't forget to follow me on twitter!

Thanks! Dansteve Adekanbi.

License

The MIT License (MIT). Please see License File for more information.