Tickpay

The future of online payment is here

Checkout Integration

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

Before integrating with the Checkout, run through this checklist:
  1. Understand the payment flow process.
  2. Decide the integration method to follow.
  3. Generate the API keys from the Dashboard.
  4. Add the view port meta tag in the the tag, if not added. <meta name="viewport" content="width=device-width">
  5. Implement Orders API in your backend.

Integration Methods

  1. Checkout.js can be integrated in two different ways:

    • Automatic Checkout
    • Manual Checkout

Decide the Integration Method

Automatic or the standard checkout is the default method available for integration and is easy to integrate into your own product. However, when you have multiple products, or a complex way to pre-calculate amount for a payment (in javascript), you can switch to the manual checkout method as it provides a greater control in the payment process.

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: 

<form “https://www.example.com/payment/success/” method=“POST”
<script
src=“https://checkout.tickpay.com.au/v1/checkout.js”
data-key=“YOUR_KEY_ID” // Enter the Key ID generated from the Dashboard
data-amount=“29935” // Amount is in currency subunits. Default currency is $. Hence, 29935 refers to 29935 paise or $300.
data-currency=“$”
data-order_id=“order_CgmcjRh9ti2lP7”//To be passed when using Orders API.
data-buttontext=“Pay with Tickpay”
data-name=“Acme Corp”
data-description=“‘Harry Potter and the Sorcerer’s Stone’ by J.K. Rowling“
data-image=“https://example.com/your_logo.jpg”
data-prefill.name=“John Deo”
data-prefill.email=“john.deo.@example.com”
data-theme.color=“#F37254”
></script>
<input type=“hidden” custom=“Hidden Element” name=“hidden”>
</form>

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.

Only successful authorizations are auto-submitted. In case of failed payments, checkout form is displayed again to facilitate retry of the payments.

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:

  1. Modify the attributes and the handler function to handle the response object. Use this table as reference.
  2. 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

The Checkout fields used in both the Checkout methods are explained in the table below:
Field Name (Manual)Field Name (Automatic)RequiredDescription
keydata-keyYesMerchant Key-ID
amountdata-amountYesPayment amount Accepted datatype is integer. For example, if the amount is ₹100,data-amount=”10000″.
currencydata-currencyYes

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.

namedata-nameYesThe merchant/company name shown in the Checkout form.
descriptiondata-descriptionNoDescription of the purchased item shown in the Checkout form. Must start with an alphanumeric character.
imagedata-imageNoLink 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_iddata-order_idYesOrder ID generated via Orders API
prefill.namedata-prefill.nameNo

Cardholder name to be pre-filled when the Checkout opens.

prefill.emaildata-prefill.emailNoCustomer’s email to be pre-filled when the Checkout opens.
prefill.contactdata-prefill.contactNoCustomer’s phone number to be pre-filled when the Checkout opens.
prefill.methoddata-prefill.methodNoPre-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.fieldnamedata-notes.fieldnameNoAny 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_topbardata-theme.hide_topbarNoUsed 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.colordata-theme.colorNoBrand color to alter the appearance of Checkout form.
theme.image_paddingdata-theme.image_paddingNoThis field accepts a boolean value on whether to show an image inside a white frame. Defaults to true.
modal.backdropclosedata-modal.backdropcloseNoThis field accepts a boolean value indicating whether clicking the translucent blank space outside Checkout form should close the form. Defaults to false.
modal.escapedata-modal.escapeNoThis field accepts a boolean value indicating whether pressing escape key should close the Checkout form. Defaults to true.
modal.handlebackdata-modal.handlebackNoWhen 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

The integration method is completely agnostic to the payment method being used in the client side of your application. This means that you do not have to change anything in your integration to support different payment methods that we provide or add. You only need to handle successful authorizations. For failed payments, your customers will be shown different retry options within the Checkout form. Standard payment methods supported by Tickpay in the Checkout:
  • Credit and Debit cards
  • Netbanking
  • UPI
  • EMI on cards
  • Wallets
    • ApplePay
    • Gpay
    • Alipay
    • Wechat
Scroll to top
Bitnami