Libraries and SDKsReact

React Integration

A set of React components for seamlessly integrating the CashOnRails payment gateway into your application. This package provides components for processing payments, handling access codes, and creating customizable payment buttons.

Installation

Install the package using npm:

npm install cashonrails-react

Components

1. Checkout Component

Process payments using the CashOnRails API:

import React from 'react';
import { Checkout } from 'cashonrails-react';
 
const config = {
  api_key: 'your_api_key',
  amount: 1000,
  currency: 'NGN',
  customer: {
    email: "johndoe@example.com",
    first_name: "John",
    last_name: "Doe",
    phone: "08012345678",
  },
  callback_url: 'https://yourapp.com/callback',
  onComplete: data => console.log('Payment completed:', data),
  onCancel: data => console.log('Payment canceled:', data),
  debug: true,
};
 
function PaymentPage() {
  return <Checkout config={config} />;
}

2. CheckoutButton Component

Customizable payment button with built-in states:

import React from 'react';
import { CheckoutButton } from 'cashonrails-react';
 
function PaymentButton() {
  return (
    <CheckoutButton
      config={{
        api_key: 'your_api_key',
        amount: 1000,
        currency: 'NGN',
        customer: {
          email: "johndoe@example.com",
          first_name: "John",
          last_name: "Doe",
          phone: "08012345678",
        },
        callback_url: 'https://yourapp.com/callback',
      }}
      buttonText="Pay Now"
      className="custom-button"
      style={{ backgroundColor: '#4CAF50' }}
      disabled={false}
      loadingText="Processing..."
      showHeader={true}
      headerText="Secure payment powered by CashOnRails"
    />
  );
}

3. UseAccessCode Component

Process payments with a pre-generated access code:

import React from 'react';
import { UseAccessCode } from 'cashonrails-react';
 
const config = {
  access_code: 'ACC_xxxxxxxxxxxxx',
  callback_url: 'https://yourapp.com/callback',
  onComplete: data => console.log('Payment completed:', data),
  onCancel: data => console.log('Payment canceled:', data),
  debug: true,
};
 
function AccessCodePayment() {
  return <UseAccessCode config={config} />;
}

Configuration Types

Payment Config

interface Config {
  api_key: string;
  amount: number;
  currency: string;
  customer: {
    email: string;
    first_name: string;
    last_name: string;
    phone: string;
  };
  callback_url?: string;
  onComplete?: (data: unknown) => void;
  onCancel?: (data: unknown) => void;
  debug?: boolean;
}

Access Code Config

interface AccessCodeConfig {
  access_code: string;
  callback_url?: string;
  onComplete?: (data: unknown) => void;
  onCancel?: (data: unknown) => void;
  debug?: boolean;
}

Component Props

CheckoutButton Props

PropTypeDefaultDescription
configConfig-Payment configuration
buttonTextstring’Checkout Securely’Button label
classNamestring”CSS classes
styleCSSPropertiesInline styles
disabledbooleanfalseDisable state
loadingTextstring’Processing…’Loading state text
showHeaderbooleantrueShow header text
headerTextstring’Secure payment…’Header content

FAQs

How do I get an API key?

Obtain your API key from the CashOnRails Dashboard.

Can I customize the payment button?

Yes, the CheckoutButton component supports custom styles, classes, and text content.

Support

For technical support or feature requests:

IntroductionOverview