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.
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 Script Tag you have is for sandbox environment.
- For production environment urlpls see: https://docs.octifi.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.
You can create a checkout object and launch the octifi checkout using the Checkout function.
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)
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
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.
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.
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.
Swagger Api Refrence