Choose a language javascript

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

ParameterRequiredTypeDescription
containerIDtruestringThe dom element ID where the payment element will be rendered.
publicKeytruestringYour public key, this can be created using the felloh dashboard.
options.sandboxfalsebooleanWhether to use sandbox instead of production

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

ParameterRequiredTypeDescription
ecommerceIDtruestringThe ecommerce ID of the payment, generated via the felloh API

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

ParameterRequiredTypeDescription
functiontruefunctionA function to be undertaken when the event occurs



The Success Event

Using the onSuccess event

fellohSDK.onSuccess(() => {
console.log('the payment has succeded')
});

This event triggers when the transaction has successfully been undertaken

Method parameters

ParameterRequiredTypeDescription
functiontruefunctionA function to be undertaken when the event occurs



The Decline Event

Using the onDecline event

fellohSDK.onDecline(() => {
console.log('the payment has been declined')
});

This event triggers when the transaction has successfully been undertaken

Method parameters

ParameterRequiredTypeDescription
functiontruefunctionA function to be undertaken when the event occurs



The Processing Event

Using the onProcessing event

fellohSDK.onProcessing(() => {
console.log('the payment is processing')
});

This event triggers when the transaction is processing

Method parameters

ParameterRequiredTypeDescription
functiontruefunctionA function to be undertaken when the event occurs