react-monnify-ts
v0.0.4
Published
ReactJS typescript support for monnify payment gateway
Downloads
187
Maintainers
Readme
monnify-ts 0.0.4
monnify payment gateway library for reactJS both JavaScript and TypeScript
Demo
Get Started
React-monnify-ts provides wrappers for ReactJS application both JavaScript and TypeScript
How to Install
npm install react-monnify-ts --save
or with yarn
yarn add react-monnify-ts
How to use react-monnify-ts
import React from 'react'
import './App.css'
import {
CompleteResponesProps,
MonnifyPaymentButton,
MonnifyProps,
PayWIthMonnifyPayment,
UserCancelledResponseProps,
usePayWithMonnifyPayment,
} from 'react-monnify-ts'
const config: MonnifyProps = {
amount: 100,
currency: 'NGN',
reference: `${new String(new Date().getTime())}`,
customerName: 'Damilare Ogunnaike',
customerEmail: '[email protected]',
apiKey: 'MK_PROD_FLX4P92EDF',
contractCode: '626609763141',
paymentDescription: 'Lahray World',
metadata: {
name: 'Damilare',
age: 45,
},
isTestMode: true,
customerPhoneNumber: '09123856264',
}
const UsePayWithMonnifyPaymentHookExample = () => {
const onLoadStart = () => {
console.log('loading has started')
}
const onLoadComplete = () => {
console.log('SDK is UP')
}
const onComplete = (res: CompleteResponesProps) => {
//Implement what happens when the transaction is completed.
console.log('response', res)
}
const onClose = (data: UserCancelledResponseProps) => {
//Implement what should happen when the modal is closed here
console.log('data', data)
}
const initializePayment = usePayWithMonnifyPayment(config)
return (
<div>
<button
onClick={() => {
initializePayment(onLoadStart, onLoadComplete, onComplete, onClose)
}}
>
Pay With Monnify Payment Hooks Example
</button>
</div>
)
}
function App() {
const componentProps = {
options: config,
text: 'Pay With Monnify Button example',
className: 'btn',
onLoadStart: () => {
console.log('loading has started')
},
onLoadComplete: () => {
console.log('SDK is UP')
},
onComplete: function (response) {
//Implement what happens when the transaction is completed.
console.log('response', response)
},
onClose: function (data) {
//Implement what should happen when the modal is closed here
console.log('data', data)
},
}
return (
<div className='Main'>
<header>
<img src={require('./logo.svg')} className='App-logo' alt='logo' />
<a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
React-monnify-ts example implementation
</a>
</header>
<div>
<UsePayWithMonnifyPaymentHookExample />
</div>
<div>
<MonnifyPaymentButton {...componentProps} />
</div>
<div>
<PayWIthMonnifyPayment {...componentProps}>
{({ initializePayment }) => (
<button onClick={() => initializePayment()}>Pay WIth Monnify Payment Implementation</button>
)}
</PayWIthMonnifyPayment>
</div>
</div>
)
}
export default App
If you are not implementing with typescript you will used
onComplete: function (response) {
//Implement what happens when the transaction is completed.
console.log('response', response)
},
onClose: function (data) {
//Implement what should happen when the modal is closed here
console.log('data', data)
}
instead of
const onComplete = (res: CompleteResponesProps) => {
//Implement what happens when the transaction is completed.
console.log('response', res)
}
const onClose = (data: UserCancelledResponseProps) => {
//Implement what should happen when the modal is closed here
console.log('data', data)
}
Options
const config = {
amount: 100,
currency: 'NGN',
reference: `${new String(new Date().getTime())}`,
customerName: 'Damilare Ogunnaike',
customerEmail: '[email protected]',
apiKey: 'MK_PROD_FLX4P92EDF',
contractCode: '626609763141',
paymentDescription: 'Lahray World',
metadata: {
name: 'Damilare',
age: 45,
},
isTestMode: true,
customerPhoneNumber: '09123856264',
}
with typescript
const config:MonnifyProps = {
amount: 100,
currency: 'NGN',
reference: `${new String(new Date().getTime())}`,
customerName: 'Damilare Ogunnaike',
customerEmail: '[email protected]',
apiKey: 'MK_PROD_FLX4P92EDF',
contractCode: '626609763141',
paymentDescription: 'Lahray World',
metadata: {
name: 'Damilare',
age: 45,
},
isTestMode: true,
customerPhoneNumber: '09123856264',
}
checkout Monnify Documentation for other available options
Deployment
Set isTestMode true if you on development environment and isTestMode false if you are deploying live
onConplete response
{
"status": "SUCCESS",
"message": "Transaction Successful",
"transactionReference": "MNFY|44|20220407112123|000684",
"paymentReference": "130i0o0hfhlaad0",
"authorizedAmount": 5000,
"redirectUrl": ""
}
{
"status": "FAILED",
"payload": {
"apiKey": "MK_TEST_DZ71ZAL62R",
"amount": 5000,
"currency": "NGN",
"paymentReference": "130i0o0hfhlaad0",
"paymentDescription": "Test Pay",
"transactionReference": "MNFY|44|20220407112123|000684",
"accessToken": null,
"merchant": {
"name": "Design Ideation ",
"logo": ""
},
"enabledPaymentMethods": [
"CARD",
"ACCOUNT_TRANSFER"
],
"customer": {
"fullName": "",
"email": "[email protected]",
"mobileNumber": ""
},
"totalPayable": 5000
},
"redirectUrl": ""
}
onClose response
{
"authorizedAmount": 30,
"paymentStatus": "USER_CANCELLED",
"redirectUrl": null,
"responseCode": "USER_CANCELLED",
"responseMessage": "User cancelled Transaction"
}