The Checkout form enables you to accept online payments from your customers. By integrating your client-side application with our Checkout, you can leverage the rich feature set such as different payment methods, customization options for enhanced look-and-feel, securing the customers’ sensitive card details, thus making the consumer experience with the Checkout, a breeze!
Our checkout.js library provides all the essential features for integrating Tickpay Checkout with the client-side of your application. This is available only for web-based integrations.

Prerequisites
- Understand the payment flow process.
- Decide the integration method to follow.
- Generate the API keys from the Dashboard.
- Add the view port meta tag in the the tag, if not added.
<meta name="viewport" content="width=device-width">
- Implement Orders API in your backend.
Integration Methods
Checkout.js can be integrated in two different ways:
- Automatic Checkout
- Manual Checkout
Decide the Integration Method
Automatic Checkout
The Automatic Checkout method provides a default Tickpay Pay with Tickpay button that invokes the Checkout form. The checkout form options are passed as data attributes inside a <script>
tag. You can add any additional, hidden or visible fields to the form, which will be submitted along with the form.
Example#
The following sample code will pass the Tickpay Checkout options as HTML data attributes:
When the checkout process is completed, the browser will add an additional field <name=id> to the form that contains the script tag. This form is then automatically submitted. Once the payment is successfully authorized, tickpay_payment_id is submitted along with the form to the action url.</name=id>
Note:
The response body contains additional parameters, tickpay_order_id and tickpay_signature, if you have integrated with our Orders API.
Manual Checkout
In Manual Checkout method, the Checkout form is invoked by the ‘custom button’ on your site and the form options
are passed as variables in a key-value pair format within a <script>
tag. Once the payment is successfully authorized, a handler
function is called automatically. This function returns a response object containing tickpay_payment_id
. This handler
function must be called back to your server-side for capturing the payment.
To integrate manual checkout:
- Modify the attributes and the handler function to handle the response object. Use this table as reference.
- After the payment is done on the checkout form, the handler function will receive a payment object with the
tickpay_payment_id
attribute. This means the payment is authorized and you can capture it. You can capture the payment immediately after authorization. This has to be done manually via the Dashboard or via the API.
Enable Auto Capture with Orders API:
You can enable auto capture feature in your payments by implementing Orders API in your backend. This will save you the time and effort of individually and manually capturing payments.
3. Send the tickpay_payment_id
to your server-sided handler url with any other attributes as you may need to capture the transaction. If the capture response has no error_code set, that means the payment is successful. Check the amount and status attributes of the payment entity returned to validate. You may now process the order at your end.
Example#
The sample code given below will pass the form options for an amount of $300:
<button id="tick-button1">Pay</button>
<script src="https://checkout.tickpay.com.au/v1/checkout.js"></script>
<script>
var options = {
"key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
"amount": "29935", // Amount is in currency subunits. Default currency is $. Hence, 29935 refers to 29935 paise or $299.35.
"currency": "$",
"name": "Acme Corp",
"description": "A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami",
"image": "https://example.com/your_logo",
"order_id": "order_9A33XWu170gUtm",//Order ID is generated as Orders API has been implemented. Refer the Checkout form table given below
"handler": function (response){
alert(response.tickpay_payment_id);
},
"prefill": {
"name": "John Deo",
"email": "john.deo@example.com"
},
"notes": {
"address": "note value"
},
"theme": {
"color": "#F37254"
}
};
var tick = new Tickpay(options);
document.getElementById('tick-button1').onclick = function(e){
tick.open();
e.preventDefault();
}
</script>
Note:
The open method of Tickpay object (tick.open()) must be invoked by your site’s JavaScript, which may or may not be a user-driven action such as a click.
Note:
The appearance of the Pay Now with Tickpay or the custom button can be customized by writing css rules for the tickpay_payment_button.
Checkout form
Field Name (Manual) | Field Name (Automatic) | Required | Description |
---|---|---|---|
key | data-key | Yes | Merchant Key-ID |
amount | data-amount | Yes | Payment amount Accepted datatype is integer. For example, if the amount is ₹100,data-amount=”10000″. |
currency | data-currency | Yes | The currency in which the payment should be made by the customer. See the list of supported currencies. If you are using Tickpay Orders, the currency in which the payment is made must match the Order currency. |
name | data-name | Yes | The merchant/company name shown in the Checkout form. |
description | data-description | No | Description of the purchased item shown in the Checkout form. Must start with an alphanumeric character. |
image | data-image | No | Link to an image (usually merchant’s logo) shown in the Checkout form. Can also be a base64 string, if loading image from network is not desirable. |
order_id | data-order_id | Yes | Order ID generated via Orders API |
prefill.name | data-prefill.name | No | Cardholder name to be pre-filled when the Checkout opens. |
prefill.email | data-prefill.email | No | Customer’s email to be pre-filled when the Checkout opens. |
prefill.contact | data-prefill.contact | No | Customer’s phone number to be pre-filled when the Checkout opens. |
prefill.method | data-prefill.method | No | Pre-selection of the payment method for the customer. It can be card/netbanking/wallet/emi/upi. However, it will only work if contact and email are also pre-filled. |
notes.fieldname | data-notes.fieldname | No | Any additional fields you want to associate with the payment. For example, “shipping address”. Up to 15 note fields can be specified in this way. |
theme.hide_topbar | data-theme.hide_topbar | No | Used to display or hide the top bar on the checkout form. This bar shows the selected payment method, phone number and gives the customer the option to navigate back to the start of the checkout form. Possible values are true – Hides the top bar, and false – Displays the top bar. |
theme.color | data-theme.color | No | Brand color to alter the appearance of Checkout form. |
theme.image_padding | data-theme.image_padding | No | This field accepts a boolean value on whether to show an image inside a white frame. Defaults to true. |
modal.backdropclose | data-modal.backdropclose | No | This field accepts a boolean value indicating whether clicking the translucent blank space outside Checkout form should close the form. Defaults to false. |
modal.escape | data-modal.escape | No | This field accepts a boolean value indicating whether pressing escape key should close the Checkout form. Defaults to true. |
modal.handleback | data-modal.handleback | No | When set as ‘true’, Checkout behaves similarly to the browser. That is, when the browser’s back button is pressed, the Checkout also simulates a back press. This happens as long as the Checkout modal is open. By default, this is set to true. |
Additional Features
In addition to the default features available in the Checkout implementation, you can also perform the following actions:
- Switch between Methods
- Track the Modal
Switch between Methods
It is possible to easily switch from one integration method to another, let’s say, typically from Manual to Automatic method. This is possible as our checkout.js
searches for the data-key
field inside the <script>
tag, which when found switches to automatic mode. It also creates a button alongside the <script>
tag and attaches its ‘onclick event handler’ (created internally)to the .open
method of the Tickpay object.
Note:
This feature is only supported in manual checkout.
JavaScript code explains the usage of the ondismiss: function(){}:
var options = {
"key": "", // Enter the Key ID generated from the Dashboard
"amount": "29935",
"name": "Acme Corp",
"description": "A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami",
"image": "http://example.com/your_logo.png",
"handler": function (response){
alert(response.tickpay_payment_id);
},
/**
* You can track the modal lifecycle by * adding the below code in your options
*/
"modal": {
"ondismiss": function(){
console.log(‘Checkout form closed’);
}
}
};
var tick = new Tickpay(options);
Supported Payment Methods
- Credit and Debit cards
- Netbanking
- UPI
- EMI on cards
- Wallets
- ApplePay
- Gpay
- Alipay