Cashonrails React Components

A set of React components for seamlessly integrating the Cashonrails payment gateway into your application. This package provides an easy-to-use interface for processing payments, handling access codes, and creating customizable payment buttons.

Features

• Easy Integration: Quickly add payment functionality to your React app.
• Customizable Components: Tailor the look and feel of payment buttons to match your app’s design.
• Secure Payments: Built on the secure Cashonrails payment gateway.
• Flexible Configuration: Supports multiple currencies, customer details, and callbacks for payment success or cancellation.

Installation

Install the package using npm:

npm install cashonrails-react

Or using yarn:

yarn add cashonrails-react

Components

This package includes three main components:

1. Checkout: For processing payments using the Cashonrails API.
2. UseAccessCode: For processing payments with an access code.
3. CheckoutButton: A customizable button for initiating payments.

Usage

1. Checkout Component

The Checkout component is used to process payments using the Cashonrails API. It dynamically loads the Cashonrails script and initializes the payment process.

Example

import React from 'react';
import { Checkout } from 'cashonrails-react';

const config = {
	api_key: 'your_api_key', // Replace with your Cashonrails API key
	amount: 1000, // Amount in the smallest currency unit (e.g., 1000 = $10.00)
	currency: 'USD', // Currency code (e.g., 'USD', 'EUR', 'NGN')
	customer: {
		email: "string",
		first_name: "string",
		last_name: "string",
		phone: "string",
	},
	callback_url: 'https://yourcallbackurl.com', // URL to redirect after payment
	onComplete: data => console.log('Payment completed:', data), // Callback for successful payment
	onCancel: data => console.log('Payment canceled:', data), // Callback for canceled payment
	debug: true, // Enable debug mode for testing
};

function App() {
	return <Checkout config={config} />;
}

export default App;

Props

| Prop | Type | Description | | -------- | -------- | ---------------------------------------------------------------------------------- | | config | Config | Configuration object for the payment. See Config Type for details. |

2. UseAccessCode Component

The UseAccessCode component is used to process payments with an access code. This is useful for scenarios where you already have a pre-generated access code.

Example

import React from 'react';
import { UseAccessCode } from 'cashonrails-react';

const config = {
	access_code: 'your_access_code', // Replace with your access code
	callback_url: 'https://yourcallbackurl.com', // URL to redirect after payment
	onComplete: data => console.log('Payment completed:', data), // Callback for successful payment
	onCancel: data => console.log('Payment canceled:', data), // Callback for canceled payment
	debug: true, // Enable debug mode for testing
};

function App() {
	return <UseAccessCode config={config} />;
}

export default App;

Props

| Prop | Type | Description | | -------- | ------------------ | ------------------------------------------------------------------------------------------------------ | | config | AccessCodeConfig | Configuration object for the payment. See AccessCodeConfig Type for details. |

3. CheckoutButton Component

The CheckoutButton component is a customizable button for initiating payments. It includes built-in loading states and hover effects.

Example

import React from 'react';
import { CheckoutButton } from 'cashonrails-react';

const config = {
	api_key: 'your_api_key', // Replace with your Cashonrails API key
	amount: 1000, // Amount in the smallest currency unit (e.g., 1000 = $10.00)
	currency: 'USD', // Currency code (e.g., 'USD', 'EUR', 'NGN')
	customer: {
		email: "string",
		first_name: "string",
		last_name: "string",
		phone: "string",
	},
	callback_url: 'https://yourcallbackurl.com', // URL to redirect after payment
	onComplete: data => console.log('Payment completed:', data), // Callback for successful payment
	onCancel: data => console.log('Payment canceled:', data), // Callback for canceled payment
};

function App() {
	return (
		<CheckoutButton
			config={config}
			buttonText="Pay Now"
			className="custom-button"
			style={{ backgroundColor: '#4CAF50' }}
			disabled={false}
			loadingText="Processing..."
			showHeader={true}
			headerText="Secure payment powered by Cashonrails"
		/>
	);
}

export default App;

Props

| Prop | Type | Default Value | Description | | ------------- | --------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------- | | config | Config | - | Configuration object for the payment. See Config Type for details. | | buttonText | string | 'Checkout Securely' | Text displayed on the button. | | className | string | '' | Additional CSS classes for the button. | | style | React.CSSProperties | {} | Inline styles for the button. | | disabled | boolean | false | Disable the button if true. | | loadingText | string | 'Processing...' | Text displayed while loading. | | showHeader | boolean | true | Show header if true. | | headerText | string | 'Secure payment powered by Cashonrails' | Header text. |

Types

Config Type

The Config type is used for the Checkout and CheckoutButton components.

interface Config {
	api_key: string; // Your Cashonrails API key
	amount: number; // Payment amount in the smallest currency unit (e.g., cents)
	currency: string; // Currency code (e.g., 'USD', 'EUR', 'NGN')
	customer: {
		email: string,
		first_name: string,
		last_name: string,
		phone: string,
	},
	callback_url?: string; // URL to redirect after payment
	onComplete?: (data: unknown) => void; // Callback for successful payment
	onCancel?: (data: unknown) => void; // Callback for canceled payment
	debug?: boolean; // Enable debug mode for testing
}

AccessCodeConfig Type

The AccessCodeConfig type is used for the UseAccessCode component.

interface AccessCodeConfig {
	access_code: string; // Your access code
	callback_url?: string; // URL to redirect after payment
	onComplete?: (data: unknown) => void; // Callback for successful payment
	onCancel?: (data: unknown) => void; // Callback for canceled payment
	debug?: boolean; // Enable debug mode for testing
}

FAQs

1. How do I get an API key?

You can obtain your API key from the Cashonrails Dashboard.

2. Can I customize the payment button?

Yes! The CheckoutButton component supports custom styles, classes, and text.

3. What currencies are supported?

Cashonrails supports multiple currencies, including USD, EUR, NGN, and more. Check the Cashonrails Documentation for a full list.

Support

For issues or feature requests, please open an issue on the GitHub repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.