valuepay-react-native

official react-native package for the Value Payment Solution Service Provider

Installation

npm install valuepay-react-native-lite

Dependency

This package requires [email protected], and is best suited with Typescript based react-native applications.

Usage

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();

  // Define the payment details as per the PaymentProp interface
  const paymentDetails: PaymentProp = {
    publicKey: 'public key',  // required (https://developer.valuepayng.com/)
    transactionRef:
      'VPS_TX_REF_12345' +
      Math.floor((Math.random() + 1) * 1324600075).toString(), // required payment reference
    amount: 100, // required payment amount in kobo
    currency: 'NGN', // optional defaults to NGN
    channels: ['card', 'transfer', 'qrcode', 'ussd'], // optional list only the desired payment methods, if none provided, uses all available at the merchant dashboard
    type: 'default', // defaults to default
    redirectUrl: 'https://example.com/', // optional
    onSuccess: (response: ReturnObject) => { // required
      showMessage('Payment Successful', 'Payment Successful');
      console.log(response, '21');
      setPaymentVisible(false);
    },
    callback: (response: ReturnObject) => { // required
      showMessage('Payment Failed', 'Payment Failed');
      console.log(response, '25');
      setPaymentVisible(false);
    },
    onCancelled: (response: ReturnObject) => { // required
      setPaymentVisible(false);
      console.log(response, '21');
      showMessage('Payment Cancelled', 'Payment Cancelled');
    },
    onAborted: (response: ReturnObject) => { // required
      setPaymentVisible(false);
      console.log(response, '21');
      showMessage('Payment aborted', 'Payment Cancelled');
    },
    onClosed: (response: ReturnObject) => { // required
      setPaymentVisible(false);
      console.log(response, '21');
      showMessage('Payment closed', 'Payment Cancelled');
    },
    customer: { // required
      email: '[email protected]',// required
      phone: '+2349011111111', // otptional
      fullName: 'Mberev Nicholas', // required
    },
    customisedCheckout: { // required
      title: 'Pay MeterToken', // required
      description: 'You are paying MeterToken', // payment description required
      logoLink: 'https://metertoken.ng/logo.png', // optional leave as empty string if no logo
    },
    metaData: { // optional
      customer_mac: Math.floor((Math.random() + 1) * 1324600095).toString(),
      linkId: '123345', // if provided and  typeproperty not default, valid payment id or invoice required.
    },
  };

  const initiatePayment = () => {
    const isValidPayment = validatePaymentProp(paymentDetails);
    //console.log(isValidPayment, ' check payment validity');
    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;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Custom Support

For custom support, send an email to me at nickmberev[at]gmail.com

License

MIT

Free for distribution.

Made with love from create-react-native-library