Skip to main content
Tabby provides JavaScript snippets that display promotional messaging on your Product, Cart and Checkout pages. These snippets show split price information and a “Learn More” widget that opens a pop-up when clicked.

​
Overview

Tabby promotional snippets help increase customer awareness and conversion rates by displaying payment options directly on your store pages. The implementation includes:
  • Product and Cart page snippet - shows split payment options on product pages and the shopping cart page
  • Checkout snippet - provides payment details during checkout
Product page snippetProduct page snippetCheckout page snippet
Ensure snippets fit mobile screen widths and are appropriately sized for desktop. All promo snippets and pop-up widgets must fit within screen dimensions.

​
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: 
<div id="TabbyPromo"></div>
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: 
<script src="https://checkout.tabby.ai/tabby-promo.js"></script>
<script>
  new TabbyPromo({
    selector: '#TabbyPromo', // required
    currency: 'AED', // required, 'AED' or 'SAR' or 'KWD', uppercase, no spaces
    price: '1200.00', // required, 2 decimal places for AED, SAR; 3 decimal places for KWD
    lang: 'en', // optional, 'en' or 'ar'
    source: 'product', // optional, 'product' or 'cart'
    shouldInheritBg: false, // optional, true or false
    publicKey: 'your_pk', // required, Your public key
    merchantCode: 'your_merchant_code' // required, Your merchant code, based on your store currency
  });
</script>

​
Complete Product and Cart Snippet Example

<html>
  <body>
    <div id="TabbyPromo"></div>
    <script src="https://checkout.tabby.ai/tabby-promo.js"></script>
    <script>
      new TabbyPromo({
        selector: '#TabbyPromo',
        currency: 'AED',
        price: '1200.00',
        lang: 'en',
        source: 'product',
        shouldInheritBg: false,
        publicKey: 'your_pk',
        merchantCode: 'your_merchant_code'
      });
    </script>
  </body>
</html>

​
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: 
<div id="tabbyCard"></div>
Place this div under the Tabby payment method option. Display it when the Tabby payment method is selected. Load and Initialize TabbyCard: 
<script src="https://checkout.tabby.ai/tabby-card.js"></script>
<script>
  new TabbyCard({
    selector: '#tabbyCard', // required
    currency: 'SAR', // required, 'AED' or 'SAR' or 'KWD', uppercase, no spaces
    price: '1600.00', // required, 2 decimal places for AED, SAR; 3 decimal places for KWD
    lang: 'en', // optional, 'en' or 'ar'
    shouldInheritBg: false, // optional, true or false
    publicKey: 'your_pk', // required, Your public key
    merchantCode: 'your_merchant_code' // required, Your merchant code, based on your store currency
  });
</script>

​
Complete Checkout Snippet Example

<div id="tabbyCard"></div>
<html>
  <body>
    <div id="tabby"></div>
    <script src="https://checkout.tabby.ai/tabby-card.js"></script>
    <script>
      new TabbyCard({
        selector: '#tabbyCard',
        currency: 'SAR',
        price: '1600.00',
        lang: 'en',
        shouldInheritBg: false,
        publicKey: 'your_pk',
        merchantCode: 'your_merchant_code'
      });
    </script>
  </body>
</html>

​
Custom Promo Snippets

If you can’t use Tabby’s JavaScript promo components (e.g., due to framework constraints, security policies, or custom requirements), you can use Tabby’s “Learn More” pop-up widgets via direct URLs.
Before implementing custom promo snippets, you must discuss and confirm the desired solution with your Tabby account manager.

​
When to use custom promo snippets?

Consider custom promo snippets when:
  • You can’t load external JavaScript files due to security policies
  • You’re building a native mobile app and need webview integration - check our Mobile App Promo Messaging guide
  • You need complete control over snippet styling and behaviour

​
Pop-up URL structure and examples

The pop-up URL follows this pattern:
DescriptionURL
UAE Pop-up, Englishhttps://checkout.tabby.ai/promos/product-page/installments/en/?price=340.00&currency=AED&merchant_code=AE&public_key=pk_xyz
KSA Pop-up, Arabichttps://checkout.tabby.ai/promos/product-page/installments/ar/?price=100&currency=SAR&merchant_code=SA&public_key=pk_xyz

​
URL Parameters

ParameterRequiredDescriptionValues
merchant_codeYesYour merchant codeProvided by Tabby
public_keyYesYour Tabby public key'pk_test_...', 'pk_...'
priceYesProduct or cart price'1200.00', '99.99', '5.500' (3 decimals for KWD only)
currencyYesCurrency codeAED, SAR, KWD
langNoLanguage codeen, ar
UAE pop-up with price, enKSA pop-up with price, ar

​
Best Pracitces

​
Security and Performance

  • Never expose your Secret API Key in frontend code - only Public Key should be used there;
  • Make sure snippet update is triggered when prices change on product pages with variant selectors;
  • Consider lazy loading snippets for below-the-fold content;
  • Use event listeners to detect when scripts load before initializing components.

​
Responsive Design

  • Ensure snippets fit mobile screen widths (typically 320px minimum);
  • Verify snippet visibility across different screen sizes;
  • Use CSS media queries for custom styling.