Embedding Payments in a Site

In order to create a payment on your website, there are a couple of steps you will need to undertake. This guide assumes that you have a booking for your customer, however you can embed a payment without one. You will need to implement the following to undertake payments,

1. Installing the SDK

You will need to install our SDK using a package manager on your frontend. We recommend either using NPM or Yarn.

yarn add @felloh-org/payment-sdk

Our SDK can be found at https://www.npmjs.com/package/@felloh-org/payment-sdk.

2. Authenticating

You will need to authenticate against our api and get the bearer token, you can then use this for all future calls against the API.

You will need to get your public and private keys from the dashboard and them set these either in the environment or via another method.

import axios from 'axios';

const getToken = async () => {
  const response = await axios({
    method: 'post',
    url: 'https://api.felloh.com/token',
    headers: {
      'Content-Type': 'application/json'
    },
    data: JSON.stringify({
        public_key: process.env.PUBLIC_KEY,
        private_key: process.env.PRIVATE_KEY,
      },
    ),
  });


  return response.data.data;
};

const { token } = await getToken();






More information on authentication can be found here.


3. Creating a booking


As mentioned, this step can be skipped if you do not currently have a booking and would just like to create a payment link, however you will need to use the assign endpoint at a later stage to get payouts on the booking.


const response = await axios(
  {
      method: 'put',
      url: `https://api.felloh.com/agent/bookings`,
      data : JSON.stringify({
        organisation: 'X9876',
        customer_name: 'James Dean',
        email: 'james@felloh.org',
        booking_reference: 'XXX123789',
        departure_date: '2022-07-18',
        return_date: '2022-07-25',
        gross_amount: 1000000,
      }),
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
  },
);

const bookingID = response.data.data.id;








More information on creating a booking can be found here.


4. Creating an ecommerce instance


You can now create the ecommerce instance. Once generated, you will pass this ID to your frontend and to the SDK.


const response = await axios(
  {
    method: 'put',
    url: `https://api.felloh.com/agent/ecommerce`,
    data : JSON.stringify({
      organisation: 'X9876',
      customer_name: 'James Dean',
      email: 'james@felloh.org',
      booking_id: bookingID,
      amount: 20000,
      open_banking_enabled: true,
      card_enabled: true,
    }),
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
  },
);

const ecommerceID = response.data.data.id;








More information on creating an ecommerce object can be found here.


5. Render the payment form and handle events


You can now render the payment iframe and take payment.


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

export default function Basic() {
  useEffect(() => {
    const generatePayment = async() => {
      // Instantiate the SDK
      const fellohSDK = new SDK('payment-iframe', 'your-public-key');

      // Get the ecommerce instance id, generated in step 3.
      const response = await axios.post('https://your.api');

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

      fellohSDK.onSuccess(() => {
        window.location.success = 'https://mysite.com/payment-success'
      });
    };

    generatePayment();
  }, []);

  return (
    <div id="payment-iframe"/>
  )
}


More information on using the SDK and it's methods can be found here.


Further Inforamtion