Web Integration guide

Learn how to integrate payments on the Web with Latitudepay.

Starting a payment with LatitudePay on the web consists of creating a checkout form, tokenizing customer information securely, and using that checkout_token to initiate a charge.

This guide shows you how to include octifi-websdk.js and LatitudePay Checkout on your web page.

Steps for integration

1. Set up and initialise octifi-websdk.js (client side)

Include the following script in the head section on every page on your site. That script should always be loaded directly from the OctiFi domain.



Once you included the script above, a defined instance of octifi will be created on your client. You will gain access to methods that are within the octifi object to trigger multiples actions.

2. Render OctiFi checkout (client side)

You can create a checkout object and launch the octifi checkout using the Checkout function.

Note: The fields marked //required are essential in the checkout object. The rest are optional.

Typically the octifi.open(octifi.checkout) is called on click of a button like this:


The above does a couple of things:

Opens up a modal dialog box for customer to login and create a checkout object. Validates the required data in the checkout object and Send a callback to the merchant for success or failure as defined in the config object at the time of the initialisation (step 1)

3. Handle callback

After you initiate a checkout and the customer confirms their payment, we send a callback with a checkout_token to the callback you defined in the checkout object.

see redirect_callback in _octifi_config in step 1 (above)

Example of callbacks:

Data in the callback is in base64 and has the following json format:


Yay! Checkout token recieved

You have recieved the octifi checkout_token in the callback

4. Create a charge (server side)

When a customer successfully completes a checkout, it is recorded as a new purchase attempt. This needs to be handled on your server-side to be fulfilled via our charge Api.

This step will hold on a card to reserve funds.

Charge/create api

This api authorises the charge and hence should be called from the server side using private key. Also note that this api takes the checkout_token as a parameter from the previous step.

See charges for more details

Yay! you have successfully created a charge and reserved funds

You have place a hold on customer card to reserve funds.

5. Ship it and capture the charge(server side)

Generally you want to capture the funds after your business completes the service (for example after shipping the goods)

/charge/capture api does the work for you!

For more details see separate-auth-and-capture

Yay! you have successfully captured the funds

Now the money will be deducted from the customer card.

API Reference

Swagger Api Refrence

Updated 04 May 2022
Did this page help?