On‑Site Messaging

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.

Add the snippets

Two components cover all pages:

TabbyPromo — Product and Cart pages. Place the container near the product price, next to the “Add to cart” button, or below the cart total.
TabbyCard — Checkout page, the recommended way to present Tabby payment details at checkout (see Tabby on Checkout). Place it under the Tabby payment method option and show it when Tabby is selected.

your-store-page.html

<html>
  <body>
    <!-- Product / Cart page: near the price or the "Add to cart" button -->
    <div id="TabbyPromo"></div>

    <!-- Checkout page: under the Tabby payment method option -->
    <div id="TabbyCard"></div>

    <script src="https://checkout.tabby.ai/tabby-promo.js"></script>
    <script src="https://checkout.tabby.ai/tabby-card.js"></script>
    <script>
      var PUBLIC_KEY = 'pk_...';                 // required, your PUBLIC key — never expose sk_ keys
      var MERCHANT_CODE = 'your_merchant_code';  // required, based on your store currency

      // Product & Cart pages
      new TabbyPromo({
        selector: '#TabbyPromo',  // required
        currency: 'AED',          // required, 'AED' or 'SAR' or 'KWD', uppercase, no spaces
        price: '2000.00',         // required, 2 decimal places for AED, SAR; 3 for KWD.
                                  // Re-init when the price changes (e.g. variant selectors)
        lang: 'en',               // optional, 'en' or 'ar'
        source: 'product',        // optional, 'product' or 'cart'
        shouldInheritBg: false,   // optional, true to inherit your page background;
                                  // then text colors can be overridden via CSS variables
                                  // --snippetTextColor and --snippetLinkTextColor
        publicKey: PUBLIC_KEY,
        merchantCode: MERCHANT_CODE
      });

      // Checkout page
      new TabbyCard({
        selector: '#TabbyCard',
        currency: 'AED',
        price: '2000.00',
        lang: 'en',
        shouldInheritBg: false,
        publicKey: PUBLIC_KEY,
        merchantCode: MERCHANT_CODE
      });
    </script>
  </body>
</html>

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.

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:

Description	URL
UAE pop-up, English	https://checkout.tabby.ai/promos/product-page/installments/en/?price=2000.00&currency=AED&merchant_code=your_merchant_code&public_key=pk_xyz
KSA pop-up, Arabic	https://checkout.tabby.sa/promos/product-page/installments/ar/?price=2000.00&currency=SAR&merchant_code=your_merchant_code&public_key=pk_xyz

URL Parameters

Parameter	Required	Description	Values
`merchant_code`	Yes	Your merchant code	Provided by Tabby
`public_key`	Yes	Your Tabby public key	`'pk_test_...'`, `'pk_...'`
`price`	Yes	Product or cart price	`'1200.00'`, `'99.99'`, `'5.500'` (3 decimals for KWD only)
`currency`	Yes	Currency code	`AED`, `SAR`, `KWD`
`lang`	No	Language code	`en`, `ar`

If you implement your own custom snippet, notify your Tabby account manager so we can keep your integration in sync with upcoming changes.

For promo messaging inside native mobile apps, see App Promo Messaging.

Introduction

E-commerce Platforms

Online Custom Integration

Offline Integrations

Testing Guidelines

On‑Site Messaging

Add the snippets

Live demo

URL Parameters

​Add the snippets

​Live demo

​Custom Promo Snippets

​URL Parameters

Add the snippets

Live demo

Custom Promo Snippets

URL Parameters