FayaPay.js

Easy, secure, and modern payment flows for the web.


FayaPay.js is our JavaScript SDK for building payment flows on the web. With it you can collect sensitive information from the user and create payment sources for safely sending that data to your servers. FayaPay.js makes working with sensitive information simpler, including:

  • Payment information
  • Personally identifiable information (PII)

Because all sensitive information is handled by FayaPay.js, your compliance burden is greatly reduced e.g. simple PCI compliance with SAQ A reporting.

Payment buttons are an easy and quick way to get started, but sometimes, a custom integration is required. In these cases, you can use the SDK directly.


Installation

You can install the SDK by adding the following script tag just before the closing </body> of your webpage.

<script
    src="https://cdn.fayapay.io/fayapay.v1.js"
    type="text/javascript"></script>

You must always load the SDK directly from https://cdn.fayapay.io. This ensures you get the most secure and up to date version.

Creating a handler

In order to use checkout, you need to create a Checkout Handler:

var handler = FayaPay.Checkout.configure(pubKey, {
    logo: "/path/to/logo.png", //optional url to your logo.
    source: function (src) {
        // callback after source creation
    }
});

After the customer has completed the form, the callback you provided is invoked with the full source object.

Opening the checkout form

You can use the handler open the checkout form with:

handler.open({
    // required
    currency: 'GHS',
    amount: '100',
    returnUrl: 'https://url-to-return-if-redirected',

    // optional
    description: 'An optional description',
    statementDescriptor: 'Displayed in the statement',
    customer: 'An optional customer id to attach to the source',
    name: 'John Mokudi',
    email: 'example@domain.com',
    metadata: {
        // pairs of key values
        // 'key': 'value',
    },
});

Closing the checkout form

You can close the form with:

handler.close();