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 [email protected]

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: "[email protected]", // 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: "[email protected]", // 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

| Name | Type | Required | Desc | | ------------ | ---------- | -------- | --------------------------------------------------------------------------- | | currency | String | Required | The currency for the transaction e.g NGN, USD | | email | String | Required | The email of the user to be charged | | description | String | Optional | The transaction description | | customerName | String | Required | The fullname of the user to be charged | | amount | Number | Required | The transaction amount | | apiKey | String | Required | Your LIVE or TEST apiKey or see above step to get yours | | onSuccess | Function | Optional | Callback when transaction is successful | | onClose | Function | Optional | Callback when transaction is closed of cancel | | text | String | Optional | Payment Button Text. Default: Hydrogen Pay | | className | String | Optional | Payment Button style | | children | Function | Optional | React JSX Component | | isRecurring | boolean | Optional | Recurring Payment | | frequency | String | Optional | Recurring Payment frequency | | endDate | String | Optional | Recurring Payment End Date. OPTIONAL but (REQUIRED when isRecurring = true) |