Web Integration guide

12min
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.
JS

// The following points to staging
// For produciton urls, see Sandbox and Live Environment document.
<script src="https://storage.googleapis.com/bucket.octifi.me/websdk/octifi-websdk.js"></script>
 
 $(document).ready(function () {
 var _octifi_config = {
            modal: false,
            public_api_key: 'demo_hardcoded_public_key_btL7eqg9_fixed',
            merchant_logo: "https://upload.wikimedia.org/wikipedia/commons/5/5d/Logo_Lazada.png",
            redirect_confirmation_url_action: "GET",
            redirect_callbacks: {
                onSuccess: "https://myserver.com/checkout/success/",
                onFail: "https://myserver.com/checkout/failed/",
            }
  };
      
  octifi.initialize(_octifi_config);
 }

// The following points to staging
// For produciton urls, see Sandbox and Live Environment document.
<script src="https://storage.googleapis.com/bucket.octifi.me/websdk/octifi-websdk.js"></script>
 
 $(document).ready(function () {
 var _octifi_config = {
            modal: false,
            public_api_key: 'demo_hardcoded_public_key_btL7eqg9_fixed',
            merchant_logo: "https://upload.wikimedia.org/wikipedia/commons/5/5d/Logo_Lazada.png",
            redirect_confirmation_url_action: "GET",
            redirect_callbacks: {
                onSuccess: "https://myserver.com/checkout/success/",
                onFail: "https://myserver.com/checkout/failed/",
            }
  };
      
  octifi.initialize(_octifi_config);
 }
﻿
﻿
Note:
The Script Tag you have is for sandbox environment.
For production environment urlpls see: ﻿https://docs.sg.latitudepay.com/sandbox-and-live-environment﻿
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.
﻿
JS
octifi.checkout = {
    checkout: {
          merchant: {
            name: "Lazada Group" //required
          },
          bill: {
            display_name: "Purchase of Solo Headset", //required
            tax_amount: 0, //required
            total_amount: 600.99, //required
            currency: "SGD",  //required 3 digit ALPHABETIC CODE-ISO4217
            merchant_order_id: "MERCHANT-TXN-007", //required
          },
          customer: {
            phone_number: "+6512345678", //in E.164 format +countrycode <phonenumber>
            email: "[email protected]"
          },
          details: {
            shipping: {
              name: {
                first: "Joe",
                last: "Doe"
              },
              billing: {
                name: {  //required
                  first: "Joe",
                  last: "Doe"
                },
              },
            },
            product: [
              {
                display_name: "Beats by Dr. Dre Solo",
                sku: "ABC-123",
                unit_price: 600,
                qty: 1,
                item_image_url: "http://merchantsite.com/images/awesome-pants.jpg",
                item_url: "http://merchantsite.com/products/awesome-pants.html",
                categories: [
                    ["Home", "Bedroom"],
                    ["Home", "Furniture", "Bed"]
                  ]
              }
            ]
          }
    }
  }        

octifi.open(octifi.checkout)

octifi.checkout = {
    checkout: {
          merchant: {
            name: "Lazada Group" //required
          },
          bill: {
            display_name: "Purchase of Solo Headset", //required
            tax_amount: 0, //required
            total_amount: 600.99, //required
            currency: "SGD",  //required 3 digit ALPHABETIC CODE-ISO4217
            merchant_order_id: "MERCHANT-TXN-007", //required
          },
          customer: {
            phone_number: "+6512345678", //in E.164 format +countrycode <phonenumber>
            email: "joe@joe.com"
          },
          details: {
            shipping: {
              name: {
                first: "Joe",
                last: "Doe"
              },
              billing: {
                name: {  //required
                  first: "Joe",
                  last: "Doe"
                },
              },
            },
            product: [
              {
                display_name: "Beats by Dr. Dre Solo",
                sku: "ABC-123",
                unit_price: 600,
                qty: 1,
                item_image_url: "http://merchantsite.com/images/awesome-pants.jpg",
                item_url: "http://merchantsite.com/products/awesome-pants.html",
                categories: [
                    ["Home", "Bedroom"],
                    ["Home", "Furniture", "Bed"]
                  ]
              }
            ]
          }
    }
  }        

octifi.open(octifi.checkout)
﻿
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:
HTML
JS
<button type="submit" class="btn btn--primary" id="octifi" onclick="octifi.open(octifi.checkout)">
                  Buy Now with OctiFi
</button>
<button type="submit" class="btn btn--primary" id="octifi" onclick="octifi.open(octifi.checkout)">
                  Buy Now with OctiFi
</button>
﻿
﻿
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:
﻿https://demo.latitudepay.me/checkout/failed?data=base64(data)
﻿https://demo.latitudepay.me/checkout/success?data=base64(data﻿)﻿
Data in the callback is in base64 and has the following json format:
Text
data = {
       merchant_order_id: 'merchant_order_id',
       checkout_token: 'checkout_token’,
	statuscode: 200
}

data = {
       merchant_order_id: 'merchant_order_id',
       checkout_token: 'checkout_token’,
	statuscode: 200
}
﻿
﻿
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 25 Mar 2024
Did this page help you?
Authentication
Sandbox and Live Environment
Web Integration guide

Steps for integration

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

2. Render OctiFi checkout (client side)

The above does a couple of things:

3. Handle callback

Yay! Checkout token recieved

4. Create a charge (server side)

Charge/create api

Yay! you have successfully created a charge and reserved funds

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

Yay! you have successfully captured the funds

API Reference

﻿
