hydrogenpay-react-native-webview v0.0.6

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 https://dashboard.hydrogenpay.com.

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