Tabby provides JS snippets to be placed on the Product, Cart and Checkout pages. It contains the split price message and a widget presented when customers want to learn more.

Customers may not always be aware of the wide range of payment options available to them when shopping at your store. By informing them in advance about the possibility of using Tabby for their purchases, you can empower your customers to make more informed decisions, potentially increasing their cart amount and increasing the chance of conversion. Implementing Tabby on-site messaging will educate your customers about the numerous advantages and possibilities, leading to a significant impact on both conversion rates and customer awareness.

Please make sure that snippets fit the width of a Mobile Web screen and have suitable width for a Desktop Web as well.

​
Product and Cart Page Snippet

Tabby snippet contains "Learn more", a clickable object which opens an info pop-up

First you need to create an empty div with a unique selector (preferably - id):

<div id="TabbyPromo"></div>

Put that div where you want Tabby Promo Snippet to be shown, preferably near the product price and / or “Add to cart” button for the product page and near the total amount or “Proceed to checkout” button for the cart page.

If your font colour is white and you have dark background colour, make sure you add the parameter shouldInheritBg in the snippet code, so the snippet could inherit the required theme settings.

Here you can find a full request:

<html>
  <body>
    <div id="tabby"></div>
    <script src="https://checkout.tabby.ai/tabby-promo.js"></script>
    <script>
      new TabbyPromo({
       selector: '#TabbyPromo', // required, content of tabby Promo Snippet will be placed in element with that selector.
       currency: 'AED', // required, AED|SAR|KWD only supported, with no spaces or lowercase.
       price: '1200.00', // required, price of the product. 2 decimals max for AED|SAR and 3 decimals max for KWD.
       lang: 'en', // Optional, en|ar only supported
       source: 'product', // Optional, snippet placement; `product` for product page and `cart` for cart page.
       publicKey: 'PUBLIC_API_KEY', // required, Public Key
       merchantCode: 'string'  // required
     });
    </script>
  </body>
</html>

​
Checkout Snippet

Tabby Checkout snippet contains "Learn more" and 'i' button, clickable objects which open an info pop-up

First you need to create an empty div with a unique selector (preferably - id):

<div id="tabbyCard"></div>

Put that div under Tabby payment method (preferably it should be shown if the payment method is selected).

Then create 2 scripts:

<script src="https://checkout.tabby.ai/tabby-card.js"></script>
<script>
new TabbyCard({
  selector: '#tabbyCard', // empty div for TabbyCard.
  currency: 'AED', // required, AED|SAR|KWD only supported, with no spaces or lowercase.
  lang: 'en', // Optional, language of snippet and popups.
  price: 100, // required, total cart amount. 2 decimals max for AED|SAR and 3 decimals max for KWD.
  size: 'narrow', // required, narrow|wide supported, depending on the width.
  theme: 'black', // required, black|default supported.
  header: false // if a Payment method name is present already. 
});
</script>

To enable an info pop-up next to Tabby payment methods for the “i”-button, please embed the following data attributes to this object:

<button type="button" data-tabby-info="installments" data-tabby-price="700" data-tabby-currency="AED">Click me</button>
    <script src="https://checkout.tabby.ai/tabby-promo.js"></script>
    <script>
      new TabbyPromo({});
    </script>

​
Custom Promo Snippets

In specific cases when you are unable to use our JS promo components, you must discuss and confirm the desired solution with your Tabby account manager. Then you can create your components by referring to previous examples.

For these components, you can utilize the following ‘Learn More’ pop-up widgets. To do so, use the URLs provided below and include specific parameters:

  • merchant_code and public_key are required for all pop-up links
  • lang - specific language, supports values en and ar
  • price and currency - are required to show payment schedule

​
UAE and KSA Pop-up page examples

  • UAE Pop-up page example:

https://checkout.tabby.ai/promos/product-page/installments/en/?price=340.00&currency=AED&merchant_code=AE&public_key=pk_xyz

  • KSA Pop-up page example:

https://checkout.tabby.ai/promos/product-page/installments/ar/?price=100&currency=SAR&merchant_code=SA&public_key=pk_xyz

  • No-Price Pop-up page example, English:

https://checkout.tabby.ai/promos/product-page/installments/en/?currency=AED&merchant_code=AE&public_key=pk_xyz

  • No-Price Pop-up page example, Arabic:

https://checkout.tabby.ai/promos/product-page/installments/ar/?currency=AED&merchant_code=AE&public_key=pk_xyz

Please, make sure that promo snippets and pop-up widgets fit the width and height of the screen.

Was this page helpful?