valuepay-react-native
Overview
Official React Native package for the Value Payment Solution Service Provider. Integrate ValuePay checkout into your mobile app using a WebView-based payment flow with full TypeScript support.
Installation
npm install valuepay-react-native-liteDependency
This package requires react-native-webview@13.13.5, and is best suited with TypeScript-based React Native applications.
Usage
App.tsx
import { useState } from 'react';
import { Button, View, StyleSheet } from 'react-native';
import {
ValuepayReactNative,
PaymentProp,
validatePaymentProp,
ReturnObject,
} from 'valuepay-react-native';
import useMessage from './hooks/useMessage';
const App = () => {
const [isPaymentVisible, setPaymentVisible] = useState(false);
const { showMessage } = useMessage();
const paymentDetails: PaymentProp = {
publicKey: 'public key',
transactionRef:
'VPS_TX_REF_12345' +
Math.floor((Math.random() + 1) * 1324600075).toString(),
amount: 100,
currency: 'NGN',
channels: ['card', 'transfer', 'qrcode', 'ussd'],
type: 'default',
redirectUrl: 'https://example.com/',
onSuccess: (response: ReturnObject) => {
showMessage('Payment Successful', 'Payment Successful');
setPaymentVisible(false);
},
callback: (response: ReturnObject) => {
showMessage('Payment Failed', 'Payment Failed');
setPaymentVisible(false);
},
onCancelled: (response: ReturnObject) => {
setPaymentVisible(false);
showMessage('Payment Cancelled', 'Payment Cancelled');
},
onAborted: (response: ReturnObject) => {
setPaymentVisible(false);
showMessage('Payment aborted', 'Payment Cancelled');
},
onClosed: (response: ReturnObject) => {
setPaymentVisible(false);
showMessage('Payment closed', 'Payment Cancelled');
},
customer: {
email: 'yourbusiness@webmail.com',
phone: '+2349011111111',
fullName: 'Mberev Nicholas',
},
customisedCheckout: {
title: 'Pay MeterToken',
description: 'You are paying MeterToken',
logoLink: 'https://metertoken.ng/logo.png',
},
metaData: {
customer_mac: Math.floor((Math.random() + 1) * 1324600095).toString(),
linkId: '123345',
},
};
const initiatePayment = () => {
const isValidPayment = validatePaymentProp(paymentDetails);
if (isValidPayment) {
setPaymentVisible(true);
} else {
showMessage('Invalid payment details', 'Invalid payment details');
}
};
return (
<View style={styles.main}>
<Button title="Pay Now" onPress={initiatePayment} />
{isPaymentVisible && (
<ValuepayReactNative
payment={paymentDetails}
isVisible={isPaymentVisible}
/>
)}
</View>
);
};
const styles = StyleSheet.create({
main: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;Payment Configuration
The PaymentProp interface includes:
- publicKey — Your ValuePay public key (get it from Settings → Developer)
- transactionRef — Unique payment reference
- amount — Payment amount in kobo
- channels — Payment methods: card, transfer, qrcode, ussd
- customer — Required: email, fullName; optional: phone
- customisedCheckout — Title, description, and optional logo URL
- Callbacks — onSuccess, callback, onCancelled, onAborted, onClosed
Need help? Check out the Merchant Onboarding guide or SDK Overview.
ON THIS PAGE
© Copyright 2026