React Native MedaPay Library

Installation

Install the package with:

``sh
npm install react-native-meda-pay


or


yarn add react-native-meda-pay
`

Usage

Import MedaPayModal

`js
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.

$3

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.

$3

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:


`js
{
"Authorization": ,
"isSandBox": false,
"merchantName": "example merchant",
"data": {
"purchaseDetails": {
"orderId": "xxyyzz",
"description": "Purchase description.",
"amount": 5,
"customerName": "Test",
"customerPhoneNumber": "251912345678"
},
"redirectUrls": {
"returnUrl": "NaN",
"cancelUrl": "NaN",
"callbackUrl":
},
"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:


`js
{
"Authorization": ,
"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":
},
"metaData": {
"any Data": "any Val"
}
}
}
`

$3


`js
{(() => {
//
//! medaPayModal example usage
if (isMedaPayModal) {
return (
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:


`js
{
"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. |