Usage

The SDK Object

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.

Setup the Payment iFrame

<div id="payment-iframe"></div>
<script type="text/javascript">
    var SDK = new FellohPayments(
      'payment-iframe',
      'your-public-key',
      {
        sandbox: false,
        design: {
          pay_button: true,
          store_card: true
        }
      }
    );
</script>

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

Parameter	Required	Type	Description
containerID	true	string	The dom element ID where the payment element will be rendered.
publicKey	true	string	Your public key, this can be created using the felloh dashboard.
options.sandbox	false	boolean	Whether to use sandbox instead of production
options.design.pay_button	false	boolean	Whether to show the pay button
options.design.store_card	false	boolean	Whether to show the store card button

Rendering the Element

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.

Required Parameters

Name
ecommerceID
Type
string
Description
The ecommerce ID of the payment, generated via the felloh API

The Render Method

  // Ecommerce ID should be passed from your backend
  const ecommerceID = 'Unique ecommerce ID';

  // Render the payment using the SDK
  fellohSDK.render(ecommerceID);

Initalising an Ecommerce Payment

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();

The onRender Event

This function triggers the pay button, this can be used when using the options.design.pay_button = false option, which hides the payment button.

This is primarily used when using your own payment / validation logic.

Using the pay function

  fellohSDK.pay();

The onRender Event

This event triggers when the payment form has rendered

Method parameters

Name
function
Type
Description
A function to be undertaken when the event occurs

Using the onRender event

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

The Success Event

This event triggers when the transaction has successfully been undertaken

Method parameters

Name
function
Type
Description
A function to be undertaken when the event occurs

Function parameters

Name
transaction.id
Type
string
Description
The ID of the transaction that has succedded

Using the onSuccess event

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

The Decline Event

This event triggers when the transaction has successfully been undertaken

Method parameters

Name
function
Type
Description
A function to be undertaken when the event occurs

Function parameters

Name
transaction.id
Type
string
Description
The ID of the transaction that has declined

Using the decline event

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

The Processing Event

This event triggers when the transaction is processing

Method parameters

Name
function
Type
Description
A function to be undertaken when the event occurs

Function parameters

Name
transaction.id
Type
string
Description
The ID of the transaction that is currently processing

Using the onProcessing event

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