---
title: Web Integration guide
slug: web-integration-guide
icon: 🌐
docTags: 
createdAt: 2020-10-16T08:07:25.000Z
---

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.

```javascript

// 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/](https://docs.sg.latitudepay.com/)sandbox-and-live-environment](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.



```javascript
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)

```

:::BlockQuote
**Note:&#x20;**&#x54;he 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:

:::CodeblockTabs
```html
<button type="submit" class="btn btn--primary" id="octifi" onclick="octifi.open(octifi.checkout)">
                  Buy Now with OctiFi
</button>
```

```javascript
// assuming octifi.checkout object is initialised {} as above
octifi.open(octifi.checkout)
```
:::



:::hint{type="success"}
## 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&#x20;

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:

- <u>[https://demo.latitudepay.me/checkout/failed?data=base64(data](https://demo.latitudepay.me/checkout/failed/?error=base64\(data\))</u>)
- <u>[https://demo.latitudepay.me/checkout/success?data=base64(data](https://demo.latitudepay.me/checkout/success/?error=base64\(data\))</u>[)](https://demo.octifi.me/checkout/failed?data=base64\(data\)https://demo.octifi.me/checkout/success?data=base64\(data\))

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

```none
data = {
       merchant_order_id: 'merchant_order_id',
       checkout_token: 'checkout_token’,
	statuscode: 200
}

```



:::hint{type="success"}
## 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.

:::hint{type="success"}
## 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](https://docs.sg.latitudepay.com/charges) for more details

:::hint{type="success"}
## 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)&#x20;

/charge/capture api does the work for you!

For more details see [separate-auth-and-capture](https://docs.sg.latitudepay.com/separate-auth-and-capture)

:::hint{type="success"}
## Yay! you have successfully captured the funds

Now the money will be deducted from the customer card.
:::

# *API Reference*

Swagger [Api Refrence](https://docs.sg.latitudepay.com/apis)



##