React Native

Easily implement Ivorypay for crypto payments in your React Native application. This library supports both Android and iOS.

Installation

This library is available on npm, you can install it by running

npm install --save react-native-ivorypay

or

yarn add react-native-ivorypay

Dependencies

In order to render the Ivorypay checkout screen this library depends on react-native-webview ensure you properly install this library before continuing.

Public Key

In order to use this library you are required to use your ivorypay public key and not the secret key. See how to get your API Keys here

🔥 IMPORTANT INFORMATION 🔥

If the options property on PayWithIvoryPay changes, when next the user taps on the button a new payment will be initialized whether the last one was successful or not.

The transaction reference is optional, but advisable you generate yours. If one is not supplied, one will be generated for you. The transaction reference must also be exactly 32 characters long.

You also cannot use the same transaction reference for two different payments, also remember to recreate the transaction reference before allowing the user to initiate a new payment.

Usage

Below are a few examples showcasing how you can use the library to implement payment in your React Native app.

PayWithIvoryPay

Import PayWithIvoryPay from react-native-ivorypay and use it like so.

import PayWithIvoryPay from "react-native-ivorypay"

<PayWithIvoryPay
    ...
    options={{
	    crypto: "USDC",
	    baseFiat: "NGN",
	    amount: 3000,
	    reference: [optional 32 character string],
	    email: "customer@email.com",
	    PUBLIC_KEY: '[ivorypay public key]'
    }}
/>

PayWithIvoryPay (with custom button)

Import PayWithIvoryPay from react-native-ivorypay and use it like so.

import PayWithIvoryPay from "react-native-ivorypay"

    <PayWithIvoryPay
    	    ...
    	    options={{
	    	    crypto: "USDC",
	    	    baseFiat: "NGN",
	    	    amount: 3000,
	    	    reference: [optional 32 character string],
	    	    email: "customer@email.com",
	    	    PUBLIC_KEY: '[ivorypay public key]'
    	    }}
    	    customButton={({initTransaction, isLoading, disabled}) => (
				<TouchableOpacity
					onPress={initTransaction}
					style={styles.customButtonStyle}
					isBusy={isLoading}
					disabled={disabled}
				>
					<Text style={styles.paymentButtonText}>Pay $500</Text>
				</TouchableOpacity>
				)}

IvoryPayButton

Import IvoryPayButton from react-native-ivorypay and use it like so.

import {IvoryPayButton} from "react-native-ivorypay"

<IvoryPayButton 
   isLoading={loading}
   disabled={disabled}
   onPress={onPress}
/>

initIvoryPayTransaction

import {
    InitIvoryPayTransaction,
    parseCheckoutLink,
} from "react-native-ivorypay"   

    try{
        //initialize transaction
	    const transactionResponse = await initIvoryPayTransaction({
    	    	    crypto: "USDC",
    	    	    baseFiat: "NGN",
    	    	    amount: 3000,
    	    	    reference: [optional 32 character string],
    	    	    email: "customer@email.com",
    	    	    PUBLIC_KEY: '[ivorypay public key]'
        	    })

	//Get Payment link
	const paymentLink = parseCheckoutLink(transactionResponse.reference)
		usePaymentLink(paymentLink)
    }
    catch(e) {
	    handleError(e)
    }

More Details can be found at https://www.npmjs.com/package/react-native-ivorypay

Last updated