Hydrogen React Native WebView SDK

Hydrogen React Native SDK allows you to accept payment using Hydrogen Pay

Installation

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

npm install --save hydrogenpay-react-native-webview
npm install react-native-webview

yarn add hydrogenpay-react-native-webview
yarn add react-native-webview

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 Profile & Settings.

Usage 1 - Auto Start

import React, { useRef } from 'react';

import { TouchableOpacity, View, Text } from 'react-native';
import { HydrogenCheckout } from 'hydrogenpay-react-native-webview';

export default function App() {
  const hydrogenPayRef = useRef(null);

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

  const onSuccess = (response) => {
    console.log(response);

    // Perform Some Actions Here
    //...

    //Close Modal after successful payment
    hydrogenPayRef?.current?.closePayment();

    //delay close Payment
    // setTimeout(() => hydrogenPayRef?.current?.closePayment(), 2000);
  };

  return (
    <View style={{ flex: 1 }}>
      <HydrogenCheckout
        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
        onClose={(e) => onClose(e)} // OPTIONAL
        onSuccess={(e) => onSuccess(e)} // OPTIONAL
        ref={hydrogenPayRef} // REQUIRED
        autoStart={true} // OPTIONAL
      />
    </View>
  );
}

Usage 2 - Using Ref

import React, { useRef } from 'react';

import { TouchableOpacity, View, Text } from 'react-native';
import { HydrogenCheckout } from 'hydrogenpay-react-native-webview';

export default function App() {
  const hydrogenPayRef = useRef(null);

  const startPayment = () => {
    hydrogenPayRef.current.initPayment();
  };

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

  const onSuccess = (response) => {
    console.log(response);

    // Perform Some Actions Here
    //...

    //Close Modal after successful payment
    hydrogenPayRef?.current?.closePayment();

    //delay close Payment
    // setTimeout(() => hydrogenPayRef?.current?.closePayment(), 2000);
  };

  return (
    <View style={{ flex: 1 }}>
      <HydrogenCheckout
        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
        onClose={(e) => onClose(e)} // OPTIONAL
        onSuccess={(e) => onSuccess(e)} // OPTIONAL
        ref={hydrogenPayRef} // REQUIRED
      />
      <TouchableOpacity
        onPress={() => startPayment()}
        style={{
          marginLeft: 50,
          marginRight: 50,
          backgroundColor: '#FCE300',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 12,
          marginTop: 10,
          borderRadius: 5,
        }}
      >
        <Text>Use Start Payment Ref</Text>
      </TouchableOpacity>
    </View>
  );
}

Usage 3 - Using Payment Button

import React, { useRef } from 'react';

import { TouchableOpacity, View, Text } from 'react-native';
import { HydrogenCheckout } from 'hydrogenpay-react-native-webview';

export default function App() {
  const hydrogenPayRef = useRef(null);

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

  const onSuccess = (response) => {
    console.log(response);

    // Perform Some Actions Here
    //...

    //Close Modal after successful payment
    hydrogenPayRef?.current?.closePayment();

    //delay close Payment
    // setTimeout(() => hydrogenPayRef?.current?.closePayment(), 2000);
  };

  return (
    <View style={{ flex: 1 }}>
      <HydrogenCheckout
        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
        onClose={(e) => onClose(e)} // OPTIONAL
        onSuccess={(e) => onSuccess(e)} // OPTIONAL
        ref={hydrogenPayRef} // REQUIRED
        payButton={true} // OPTIONAL
        buttonText="Hydrogen Pay Button" //OPTIONAL
        buttonStyle={{}} // OPTIONAL
        buttontextStyles={{}} // OPTIONAL
      />
    </View>
  );
}

API's

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
ref	Object	Required	SDK payment Ref
payButton	Boolean	Optional	Show Payment Button
buttonText	String	Optional	Button Text. Default: Hydrogen Pay
buttonStyle	Object	Optional	Button style
buttontextStyles	Object	Optional	Button text style
isRecurring	boolean	Optional	Recurring Payment
frequency	String	Optional	Recurring Payment frequency
autoStart	Boolean	Optional	Automatically start the sdk