hydrogenpay-reactjs v0.0.4

Hydrogen ReactJS SDK

Hydrogen ReactJS SDK allows you to accept payment using in your react application

Installation

Register for a merchant account on Hydrogen Merchant Dashboard to get started.

npm install --save hydrogenpay-reactjs

yarn add hydrogenpay-reactjs

pnpm add hydrogenpay-reactjs

Support

If you have any problems, questions or suggestions, create an issue here or send your inquiry to support@hydrogenpay.com

Implementation

You should already have your api key, If not, go to https://dashboard.hydrogenpay.com.

Usage 1 - As a React Hook

import { useHydrogenPayment } from "hydrogenpay-reactjs";

function App() {
  const options = {
    amount: 500, // REQUIRED
    email: "test@mail.com", // REQUIRED
    customerName: "John Doe", // REQUIRED
    meta: "ewr34we4w", // OPTIONAL
    apiKey: "PK_TEST_cca53e0b3bc7847aff94502b8a585f84", // REQUIRED
    description: "Test description", // OPTIONAL
    currency: "NGN", // REQUIRED
    frequency: 1, // OPTIONAL
    isRecurring: false, // OPTIONAL
    endDate: "2025-10-02", // OPTIONAL but (REQUIRED when isRecurring: true)
  };

  const onClose = (close) => {
    console.log(close);
  };

  const onSuccess = (response, closeModal) => {
    console.log(response);
    setTimeout(() => closeModal(), 2000);
  };

  const PayButton = () => {
    const initializePayment = useHydrogenPayment({
      ...options,
      onSuccess,
      onClose,
    });

    return <button onClick={() => initializePayment()}>Pay</button>;
  };

  return (
    <div className="...">
      <PayButton />
    </div>
  );
}

export default App;

Usage 2 - As a Button Component

import { HydrogenPaymentButton } from "hydrogenpay-reactjs";

function App() {
  const options = {
    amount: 500, // REQUIRED
    email: "test@mail.com", // REQUIRED
    customerName: "John Doe", // REQUIRED
    meta: "ewr34we4w", // OPTIONAL
    apiKey: "PK_TEST_cca53e0b3bc7847aff94502b8a585f84", // REQUIRED
    description: "Test description", // OPTIONAL
    currency: "NGN", // REQUIRED
    frequency: 1, // OPTIONAL
    isRecurring: false, // OPTIONAL
    endDate: "2025-10-02", // OPTIONAL but (REQUIRED when isRecurring: true)
  };

  const onClose = (close) => {
    console.log(close);
  };

  const onSuccess = (response, closeModal) => {
    console.log(response);
    setTimeout(() => closeModal(), 2000);
  };

  return (
    <div className="App">
      <HydrogenPaymentButton
        text="Payment"
        className="..."
        options={{ ...options, onSuccess, onClose }}
      />
    </div>
  );
}

export default App;

Options Type