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 // 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 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 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 buy now with octifi // assuming octifi checkout object is initialised {} as above octifi open(octifi checkout) 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/?error=base64(data) ) https //demo latitudepay me/checkout/success/?error=base64(data) ) 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 data = { merchant order id 'merchant order id', checkout token 'checkout token’, &#x9;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 https //docs sg latitudepay com/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 https //docs sg latitudepay com/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