Usage

The SDK Object

HTML

<div id="payment-iframe"></div>

Javascript

import SDK from '@felloh-org/payment-sdk';

const fellohSDK = new SDK('payment-iframe', 'your-public-key');

Use FellohSDK(containerID, publicKey, options?) to create an instance of the Felloh object. The Felloh object is your entrypoint to the rest of the Felloh SDK.

Your Felloh public API key is required when calling this function, as it identifies your website or application to Felloh.

We've prefilled the example with a sample test API key. Don’t submit any personally identifiable information in requests made with this key. To create a Felloh object using your account, replace the sample API key with your actual API key or sign in.

When you’re ready to accept live payments, replace the test key with your live key in production. Learn more about how API keys work in test mode and live mode.

Method parameters

Rendering the Element

The render method

  fellohSDK.render('Unique ecommerce ID generated from felloh API');

An example of rendering the form

import SDK from '@felloh-org/payment-sdk';
import Axios from 'axios';

const renderPaymentForm = async () => {
  // Instantiate the SDK
  const fellohSDK = new SDK('payment-iframe', 'your-public-key');

  // Make a call to your backend and generate the ecommerce ID
  const response = await axios.post('https://your.api');

  // Render the payment form with the generated iD
  fellohSDK.render(response.data.data.id);
}

renderPaymentForm();

Once you have generated an ecommerce entity on your backend and passed this to your frontend, you can render the element using the ID.

The form will consume 100% of the width given to it, it is recommended that it has a minimum of 350px to grow into. The element wil also grow and shrink in height depending on what is being displayed, it is recommended that no restrictions are placed on the height it can grow to.

Method parameters

The onRender Event

Using the onRender event

  fellohSDK.onRender(() => {
    console.log('the form has rendered')
  });

This event triggers when the payment form has rendered

Method parameters

The Success Event

Using the onSuccess event

  fellohSDK.onSuccess((data) => {
    console.log('the payment has succeded');
    console.log('transaction id:', data?.transaction?.id);
  });

This event triggers when the transaction has successfully been undertaken

Method parameters

Function parameters

The Decline Event

Using the onDecline event

  fellohSDK.onDecline((data) => {
    console.log('the payment has been declined')
    console.log('transaction id:', data?.transaction?.id);
  });

This event triggers when the transaction has successfully been undertaken

Method parameters

Function parameters

The Processing Event

Using the onProcessing event

  fellohSDK.onProcessing((data) => {
    console.log('the payment is processing');
    console.log('transaction id:', data?.transaction?.id);
  });

This event triggers when the transaction is processing

Method parameters

Function parameters