relapay-sdk

Relapay SDK

A production-ready npm package for integrating MomentPay payments in React applications. It provides TypeScript support, reusable hooks and components, and handles API interactions securely.

Features

• Seamless payment initiation with MomentPay API
• React hooks for state management
• Reusable UI components with MUI and Tailwind
• Comprehensive testing with Jest and React Testing Library
• Error handling, validation, and notifications via Toastify
• Environment-based configuration (test/live)

Installation

Install the package in your React project:

npm install relapay-sdk

Ensure peer dependencies are installed:

npm install react react-dom @mui/material @emotion/react @emotion/styled tailwindcss redux @reduxjs/toolkit react-redux react-toastify

Configuration

• Add environment variables to your project's .env file (copy from SDK's .env template):

  REACT_APP_MOMENTPAY_TEST_BASE_URL=...
  // Other credentials as in .env
  

• For Toastify, add <ToastContainer /> in your app root.

• For Redux (optional), create a payment slice and integrate with your store.

Usage

Using the Hook

// In your component
import { usePayment } from 'relapay-sdk';

const MyPayment = () => {
  const { initiate, loading, error, response } = usePayment();

  const handlePay = () => {
    initiate({
      cashier_id: '123',
      customer_details: { customer_name: 'John Doe', customer_id: 'cust123', payment_amount: 100 },
      processing_id: 'proc123',
      paymode: 'cards',
      transaction_till: 'till1',
      payment_fill: 'express_full',
      // Other fields...
    });
  };

  return (
    <button onClick={handlePay} disabled={loading}>
      {loading ? 'Processing...' : 'Pay'}
    </button>
  );
};

Using the Component

import { PaymentComponent } from 'relapay-sdk';

const requestData = { /* same as above */ };

<PaymentComponent requestData={requestData} buttonText="Initiate Payment" className="my-custom-class" />

API Reference

• initiatePayment(partialRequest: Omit<PaymentRequest, 'authentication' | 'checksum_hash' | 'merchant_id'>): Initiates payment, returns PaymentResponse.
• usePayment(): Hook returning initiate, loading, error, response.
• PaymentComponent(props: PaymentComponentProps): Reusable button component.

See src/types/index.ts for full type definitions.

Examples

For a full example, check the example folder (TODO: Add if needed).

Troubleshooting

• Ensure .env variables are set correctly.
• Check console for errors; the SDK logs failures.
• Run tests with npm test to verify setup.

Contributing

As a solo developer project, contributions are welcome via pull requests.

License

MIT