Skip to main content
Tabby’s JavaScript snippets show split-price messaging right where customers decide to buy — on your Product, Cart and Checkout pages. They raise awareness of flexible payments before checkout, which directly increases conversion. Each snippet includes a “Learn more” link that opens a pop-up with the payment schedule.
Product page snippetProduct page snippetCheckout page snippet

​
Add the snippets

Two components cover all pages:
  • TabbyPromo — Product and Cart pages.
  • TabbyCard — Checkout page, the recommended way to present Tabby payment details at checkout (see Tabby on Checkout).
Don’t give the container an id equal to a component name (TabbyPromo, TabbyCard): browsers expose element ids on window, and the div shadows the Tabby constructor, so the snippet silently doesn’t render.

​
Product and Cart page snippet

The Product and Cart page snippet uses the TabbyPromo component to display promotional messaging on product and cart pages. Create an empty <div> element with a unique selector, preferably using an id:
For maximum visibility, place the container in one of the suggested places:
  • Product: near the product price or next to the “Add to cart” button;
  • Cart: below the total cart amount.
Include the Tabby Promo script in your page and initialize the TabbyPromo component after the script loads:
Re-initialize TabbyPromo when the price changes (e.g. variant or quantity selectors). If the white background of the snippet does not match your website design and you want the snippet to inherit the background color, you can use shouldInheritBg: true. When this parameter is set to true, you can also customize the text and link colors using the following CSS variables:

​
Complete Product and Cart snippet example

​
Checkout snippet

The checkout snippet uses the TabbyCard component to display payment information during checkout. Create an empty <div> element where the Tabby Card will be displayed:
Place this div under the Tabby payment method option. Display it when the Tabby payment method is selected. Load and initialize TabbyCard:

​
Complete Checkout snippet example

Snippets only need your Public Key and merchant code — never expose the Secret Key in frontend code. Make sure snippets fit mobile screen widths (320px minimum).

​
Live demo

Everything below is rendered live by tabby-promo.js and tabby-card.js — exactly what your customers will see. Switch the market to preview English/AED and Arabic/SAR, and click “Learn more” to open the real pop-up.

​
Custom Promo Snippets

If you can’t load Tabby’s JavaScript (security policies, native mobile apps, full styling control), build your own message and open the Tabby “Learn more” pop-up via a direct URL:

​
URL Parameters

If you implement your own custom snippet, notify your Tabby account manager so we can keep your integration in sync with upcoming changes.
UAE pop-up with price, enKSA pop-up with price, en
For promo messaging inside native mobile apps, see App Promo Messaging.