react-native-meda-pay

React Native MedaPay Library

Installation

Install the package with:

npm install react-native-meda-pay
# or
yarn add react-native-meda-pay

Usage

Import MedaPayModal

  import MedaPayModal, { checkBillStat } from 'react-native-meda-pay';

The package needs to be configured with your account's bearer token, which is provided by MedaPay team.

Get Authorization Token from MedaPay

Before you can integrate MedaPay, you ought to get your application registered and obtain an Authorization Token. After you get a token that lets you access protected API resources, you can create bills and get started in the Sandbox environment to test your app.

Create Bill

To create a Bill in react native MedaPay SDK: pass your order data like the sample below as config prop to the modal component.

sample config data for creating a bill:

• Without reference number Sample data:

 {
   "Authorization": <Your authorization token>,
   "isSandBox": false,
   "merchantName": "example merchant",
   "data": {
     "purchaseDetails": {
       "orderId": "xxyyzz",
       "description": "Purchase description.",
       "amount": 5,
       "customerName": "Test",
       "customerPhoneNumber": "251912345678"
     },
     "redirectUrls": {
       "returnUrl": "NaN",
       "cancelUrl": "NaN",
       "callbackUrl": <Your call back url>
     },
     "metaData": {
       "any Data": "any Val"
     }
   }
 }

• With reference number Note: for creating a bill with already existing reference number you need to set the isWithRefNumber prop to true. Sample data:

{
   "Authorization": <Your authorization token>,
   "isSandBox": false,
   "refNumber": "80729589",
   "merchantName": "example merchant",
   "data": {
     "purchaseDetails": {
       "orderId": "xxyyzz",
       "description": "Purchase description.",
       "amount": 5,
       "customerName": "Test",
       "customerPhoneNumber": "251912345678"
     },
     "redirectUrls": {
       "returnUrl": "NaN",
       "cancelUrl": "NaN",
       "callbackUrl": <Your call back url>
     },
     "metaData": {
       "any Data": "any Val"
     }
   }
 }

Sample MedaPay Modal Usage

{(() => {
//
//! medaPayModal example usage
	if (isMedaPayModal) {
		return (
			<MedaPayModal
				config={paymentData}
				isVisible={isMedaPayModal}
				isWithRefNumber={false}
				onShow={() => {
					console.log('meda pay modal shown');
				}}
				onClose={() => {
					//!where you should check payment bill stat and close the medapay modal
					setIsMedaPayModal(false);
					console.log('payment modal closed');
				}}
				onPaymentCompleted={() => {
					console.log('Payment completed');
				}}
				onCancel={() => {
					//!close the medapay modal
					setIsMedaPayModal(false);
					console.log('payment modal canceled');
				}}
				onReferenceNumber={(refNumber) => {
					console.log('Reference number generated: ', refNumber);
				}}
				onBillCreationError={(error) => {
					console.log('Bill creation Error', error);
				}}
        onPaymentError={(error) => {
          setIsMedaPayModal(false);
          console.log('Payment Error', error);
        }}
        onPaymentMethodSelected = {(selectedPaymentMethod)=>{
          console.log(selectedPaymentMethod);
        }}
			/>
		);
	}
})()}

Parameter	Description
purchaseDetails	An array with details for the customer and order. It is mandatory to specify these information: orderId : Your order id to keep track of the order ( Typically an order will be created in your application with a status of CREATED.) description : Your order description (This will be visible on MedaPay Express Payment Screen for the customer) amount: Total purchase amount. customerName : Customer's Full name. customerPhoneNumber : Customer's phone number.
redirectUrls	Specify the return and cancel URLs: returnUrl: The URL on your website to which to redirect a customer when he or she completes a payment. cancelUrl: The URL on your website to which to redirect a customer when he or she cancels a payment. callbackUrl: The URL on your website to which to send bill updates (payment completion or cancellation) via a POST request.
isSandBox	Differentiates the sandbox from Prod API.
Authorization	Your authorization token given to you from MedaPay team.

Check payment status

use the checkBillStat function: Required parameters:

• Authorization token
• Reference number
• isSandbox

Sample response:

{
    "referenceNumber": "80729589",
    "accountNumber": "251912345678",
    "customerName": "Test",
    "description": "Purchase description.",
    "amount": 5,
    "paymentType": "general-payment",
    "paymentMethod": "not-selected",
    "status": "PENDING",
    "createdAt": "2022-04-21T12:22:42.879Z",
    "updatedAt": "2022-04-21T12:22:42.879Z",
    "currency": "ETB",
    "orderId": "xxyyzz",
    "isSimulation": false
}

Possible bill statuses:

• CREATED: for bills that are created
• PENDING: waiting for payment to be processed
• CANCELED: canceled by user or due to insufficient balance
• PAYED: payment successfully processed and bill settled

Callbacks provided by the modal

Callback	Description
onShow	Called when the modal is initially displayed.
onClose	Called when the modal is closed or is not being displayed.
onPaymentCompleted	Called when the payment is completed or the bill is payed.
onReferenceNumber	Sends back the reference number once the bill is created.
onCancel	Called when the cancel button on the modal is pressed.
onBillCreationError	Called if there is an error while creating a bill.
onPaymentError	Called if there is an error while paying a bill.
onPaymentMethodSelected	Called when the user selected a payment method.