---
updatedAt: 2026-02-10T11:30:26.000Z
---
# SDK & UI library
# Software Development Kits
Our SDKs remove the need to handle sensitive data by enabling you to validate and encrypt your data and finally create a checkout request. Check the out here:
[block:html]
{
"html": "\n\n\n
\n "
}
[/block]
# Checkout JavaScript Library
The Checkout JavaScript Library is small library that makes creating an Express experience (modal / redirect) easier.
> 👍 For the best experience on Express modal checkout we highly recommend the use of this library.
### Installation
Adding the library is as easy as adding a JavaScript tag. Simply add the CDN link **** via a JavaScript tag. See the example below:
```html HTML
Title of the document
...
```
The script adds a **`Tingg`** object on the browser's **window object**. Accessing **`window.Tingg`** exposes some APIs used to render the Express checkout UI.
### Usage
After the CDN has been included, add a button i.e "PAY NOW" that will trigger a HTTP request to your back-end endpoint that returns a checkout URL.
```html
Title of the document
```
> 🚧 For the callback functions to take effect, the **`success_redirect_url`** & **`fail_redirect_url`** need to have the same domain origin with your e-commerce site.
>
> Example: If your e-commerce shop/ site has the domain then the `**success_redirect_url**` and `**fail_redirect_url**` should start with the SAME domain i.e for the onSuccess and onFailed callbacks to be triggered.
## `onClose()` function
This function is called when the close button is clicked. To close the modal, you'll have to explicitly call **`window.Tingg.close()`** after any business logic.
**NOTE:** **`window.Tingg.close()`** can be called anywhere & at any time you wish to close the modal in your custom pages, components & widgets.
## `onSuccess(data)` function
This function is called when the payment has been fully paid.
## `onFailed(data)` function
This function is called when the checkout request expires without it being fully paid.
Both onSuccess and onFailed receive a single parameter data with the follow fields:
```json
{
"request_status_code": "178",
"merchant_transaction_id": "skt3hf-3000.csb.app358",
"checkout_request_id": 235815,
"service_code": "JOHNDOEONLINE",
"account_number": "skt3hf",
"currency_code": "KES",
"request_amount": "100",
"amount_paid": "100.00",
"payments": '[
{
"id": 48019,
"msisdn": 254700000000,
"payment_option_transaction_id": "25bb34d4-b4ad-40ae-aa1f-be0909eb2dbb",
"account_number": "skt3hf",
"customer_name": "Customer",
"amount_paid": 100,
"gateway_transaction_id": "542246309118099456",
"date_payment_received": "2024-02-05 10:33:16",
"gateway_overall_status": 139,
"currency_id": "70",
"country_id": "117",
"service_id": "161",
"payer_narration": "Simulate payment",
"checkout_request_id": 235815,
"merchant_receipt": "",
"receiver_narration": "",
"date_payment_acknowledged": null,
"created_at": "2024-02-05 07:33:17",
"payment_option_id": 1
}
]',
"failed_payments": "[]",
"request_date": "2024-02-05 07:32:08",
"payment_status_description": "Request fully paid",
"msisdn": 2547000000000,
"customer_email": "tingg.online@cellulant.io",
"request_description": "",
"type": "success"
}
```
| Field | Type | Description |
| :------------------------------- | :------------------------- | :----------------------------------------------------------------------------------------------------------- |
| **request\_status\_code** | **`string`**\|**`number`** | Overall request code indicating the status of the request |
| **merchant\_transaction\_id** | **`string`** | The unique merchant reference for the request you raised for the request as provided in the checkout payload |
| **checkout\_request\_id** | **`string`**\|**`number`** | A unique identifier on Tingg’s end. |
| **service\_code** | **`string`** | Unique Tingg code identifying the service the payment request was raised for |
| **account\_number** | **`string`** | The reference the customer was paying for as provided in the checkout payload |
| **currency\_code** | **`string`** | ISO Currency code of the payment made |
| **request\_amount** | **`string`**\|**`number`** | The converted amount for the request raised by the merchant |
| **amount\_paid** | **`string`**\|**`number`** | Amount the customer paid for the request |
| **payments** | **`array`** | An array of successful payments made to the request |
| **failed\_payments** | **`array`** | An array of failed payments made to the request |
| **request\_date** | **`string`** | Date when the request was raised in |
| **payment\_status\_description** | **`string`** | Description of the status given back on the overall payment |
| **msisdn** | **`string`** | The mobile number the person came with from the merchant site |
| **customer\_email** | **`string`** | Customer's email address. |
| **request\_description** | **`string`** | Shows the description of the item being purchased. |
| **type** | **`string`** | **`success`** or **`failed`** |
# CMS Plugins
## [WordPress Plugin](https://docs.tingg.africa/docs/checkout-v3-wordpress-plugins)
A WooCommerce plugin that allows businesses to collect from their WordPress shops / store. Read more about it on the [Wordpress Plugins store](https://wordpress.org/plugins/cellulant-tingg-checkout/)
## Shopify
> Coming soon