# React Paysofter This is a ReactJS package for integrating Paysofter payment gateway into your ReactJS application. ![Paysofter Payment (Live)](./src/images/promise-live.jpg) ## Installation To install the package, run: ```bash npm install react-paysofter ``` ## Usage Here are basic examples of how to use the `react-paysofter` library in your ReactJS project. ![Paysofter Payment (Test)](./src/images/promise-test.jpg) ### Example 1: Basic Payment Setup ```jsx import React from "react"; import { Paysofter } from "react-paysofter"; const App = () => { const amount = 10; // Amount in dollars, e.g., 10.00 USD const [paysofterPublicKey] = useState("test_api_key_abc123"); // Replace with your actual Paysofter public key const handleOnSuccess = () => { console.log("Payment successful!"); }; const handleOnClose = () => { console.log("Payment window closed."); }; return ( ); }; export default App; ``` ### Example 2: Payment Setup with "Pay Now" Button Option ```jsx import React, { useState } from "react"; import { Paysofter } from "react-paysofter"; const App = () => { const [showPayment, setShowPayment] = useState(false); const amount = 5000; // Amount in Nigerian Naira, e.g., NGN 5,000 const currency = "NGN"; // Nigerian Naira const email = "buyer@example.com"; // Buyer's email const [paysofterPublicKey] = useState("test_api_key_abc123"); // Replace with your actual Paysofter public key const handleOnSuccess = () => { console.log("Payment successful!"); setShowPayment(false); // Hide payment component after success }; const handleOnClose = () => { console.log("Payment window closed."); setShowPayment(false); // Hide payment component when closed }; return (
{!showPayment ? ( ) : ( )}
); }; export default App; ``` ### Example 3: Payment Setup with "Pay Now" Button Option and Input Fields ```jsx import React, { useState } from "react"; import { Form, Button } from "react-bootstrap"; import "bootstrap/dist/css/bootstrap.min.css"; // Add bootstrap.min.css to the entry point of your app e.g. "index.js" to be available globally import { Paysofter } from "react-paysofter"; const App = () => { const [showPayment, setShowPayment] = useState(false); const [amount, setAmount] = useState(5000); // Default amount in NGN, e.g., NGN 5,000 const [currency, setCurrency] = useState("NGN"); // Default currency const [email, setEmail] = useState("buyer@example.com"); // Default email const [paysofterPublicKey] = useState("test_api_key_abc123"); // Replace with your actual Paysofter public key // const referenceId = `RID${Math.floor(Math.random() * 10000000000000000)}`; // Generate a 17-digit random payment reference with RID prefix const referenceId = `RID${new Date() .toISOString() .slice(2, 19) .replace(/[-T:]/g, "")}${Math.floor(Math.random() * 100000)}`; // Or generate a 17-digit payment reference with RID prefix starting with the timestamp and random numbers appended at the end as in 'RIDYYMMDDHHMMSSxxxxx'. console.log("referenceId:", referenceId); const handleOnSuccess = () => { console.log("Payment successful!"); setShowPayment(false); // Hide payment component after success }; const handleOnClose = () => { console.log("Payment window closed."); setShowPayment(false); // Hide payment component when closed }; return (

Checkout

{!showPayment ? (
Amount: setAmount(Number(e.target.value))} /> Currency: setCurrency(e.target.value)} /> Email: setEmail(e.target.value)} />
) : ( <> )}
); }; export default App; ``` ## Props | Prop Name | Type | Description | | :------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `amount` | Number | The amount to be paid. | | `currency` | String | The currency in which the payment is to be made (e.g., USD, NGN). | | `email` | String | The email address of the user making the payment. | | `paysofterPublicKey` | String | Your Paysofter public key for processing the payment. | | `onSuccess` | Function | Callback function to handle the success of the payment. | | `onClose` | Function | Callback function to handle the closing of the payment window. | | `showPromiseOption` | Boolean | Whether to show the Promise payment option (default: true). If all options are declared false, then Promise payment option defaults to true. | | `showFundOption` | Boolean | Whether to show the Fund Account payment option. | | `showCardOption` | Boolean | Whether to show the Card payment option. | | `buyerName` | String | The buyer's name for the Card payment option. This information is optional with maximum length of 225 characters, and the buyer may choose not to provide it. | | `buyerPhoneNumber` | String | The buyer's phone number for the Card payment option. This information is optional, and the buyer may choose not to provide it. | | `referenceId` | String | A unique identifier for the payment serving as a reference for the payment options. Either generate a 17-digit random payment reference with RID prefix, or generate a 17-digit payment reference with RID prefix starting with a timestamp and a small random number appended at the end. Paysofter also generates a transaction ID (TID) to reference every payment transaction. | | `qty` | Number | The quantity or number of units paid for in the transaction. This is optional and ranges from 1 to 10,000 units. | | `productName` | String | The name of the product being purchased in the transaction. This is optional with maximum length of 225 characters. | ## Contributing to the Project 1. **Fork the Repository:** Begin by forking the repository to your GitHub account. 2. **Create a New Feature Branch:** Create a branch for your feature or bug fix using the following command: ```bash git checkout -b feature-name ``` 3. **Commit Your Changes:** Once you’ve made your changes, commit them with a meaningful message: ```bash git commit -am 'Description of the changes made' ``` 4. **Push to the Branch:** Push your feature branch to the repository: ```bash git push origin feature-name ``` 5. **Submit a Pull Request:** Finally, submit a pull request for review and integration. ## Additional Configuration Options For further configuration options, please refer to the [Paysofter Documentation](https://paysofter.com/docs/).