Fountainpay-react NPM

Fountainpay-v1 React Library

Introduction

The React SDK helps you create seamless payment experiences in your React mobile or web app. By connecting to our modal, you can start collecting payment in no time.

Available features include:

Collections: Card, Account, Mobile money, Bank Transfers, NQR.
Recurring payments: Tokenization and Subscriptions.
Split payments

Requirements

Fountainpay version 1 API keys
Node version >= 6.9.x and npm >= 3.x.x
React version >= 14

Installation

Install the SDK

$ npm i fountainpay-react

# or
$ yarn add fountainpay-react

Initialization

Import useFPCheckout to any component in your application and pass your config

import { useFPCheckout } from 'Fountainpay-React-v1';
 const config = {
    publicKey: 'FP-PUBK-**************************',
    tnxRef: Date.now(),
    amount: 100,
    currency: 'NGN',
    channels: ["card", "qrcode", "directDebit"],
    customer: {
      email: 'user@gmail.com',
      phoneNo: '070********',
      lastname: 'john',
      firstname:''
    }
  };

 useFPCheckout(config)

Usage

Add Fountainpay to your projects as a component or a react hook:

Components

import React from 'react';
import { FPCheckoutButton, closePaymentModal } from 'Fountainpay-React-v1';

export default function App() {
  const config = {
    publicKey: 'FP-PUBK-**************************',
    tnxRef: Date.now(),
    amount: 100,
    currency: 'NGN',
    channels: ["card", "qrcode", "directDebit"],
    customer: {
      email: 'user@gmail.com',
      phoneNo: '070********',
      lastname: 'john',
      firstname:''
    }
  };


  const config = {
    ...config,
    text: 'Pay with Fountainpay!',
    callback: (response) => {
       console.log(response);
      closePaymentModal() // this will close the modal programmatically
    },
    close: () => {},
  };

  return (
    <div className="App">
     <h1>Hello Test user</h1>
      <FPCheckoutButton {...config} />
    </div>
  );
}

Hooks

import React from 'react';
import { useFPCheckout, closePaymentModal } from 'Fountainpay-React-v1';

export default function App() {
  const config = {
    publicKey: 'FP-PUBK-**************************',
    tnxRef: Date.now(),
    amount: 100,
    currency: 'NGN',
    channels: ["card", "qrcode", "directDebit"],
    customer: {
      email: 'user@gmail.com',
      phoneNo: '070********',
      lastname: 'john',
      firstname:''
    }
  };

  const handlePayment = useFPCheckout(config);

  return (
    <div className="App">
     <h1>Hello Test user</h1>

      <button
        onClick={() => {
          handlePayment({
            callback: (response) => {
               console.log(response);
                closePaymentModal() // this will close the modal programmatically
            },
            close: () => {},
          });
        }}
      >
        Payment with React hooks
      </button>
    </div>
  );
}

Parameters

Read more about our parameters and how they can be used here.

Parameter	Always Required ?	Description
publicKey	True	Your API public key
tnxRef	True	Your transaction reference. This MUST be unique for every transaction
amount	True	Amount to charge the customer.
currency	False	currency to charge in. Defaults to NGN
channels	True	This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on.
redirect_url	False	URL to redirect to when a transaction is completed. This is useful for 3DSecure payments so we can redirect your customer back to a custom page you want to show them.
customer	True	This is an object that can contains your customer details: e.g - 'customer': {'email': 'example@example.com','phoneNo': '080****', 'lastname': 'Richards', firstname:'Adedeji' }
metadata	False	This is an object that helps you include additional payment information to your request e.g {'container': '','theme': {disableDarkMode: false} }

Other methods and descriptions:

Methods provided by the React SDK:

Method Name	Parameters	Returns	Description
closePaymentModal	Null	Null	This methods allows you to close the payment modal via code.

Please check Fountainpay Documentation for other available options you can add to the tag.

Debugging Errors

We understand that you may run into some errors while integrating our library. You can read more about our error messages here.

For authorization and validation error responses, double-check your API keys and request. If you get a server error, kindly engage the team for support.