tabby

---

sidebar_position: 5 sidebar_label: Tabby

Tabby

Feature	Description
Payment Logo
Integration Methods	✅ Hosted Checkout
Recommended Regions	Saudi Arabia, United Arab Emirates
Virtual Industry Support	✅
Subscription Support	❌️
Supported SaaS	✅ Shopify ✅ Shopline ✅ Shopyy ✅ Ueeshop ✅ Shoprise ✅ Shoplus ✅ Shoptop
Supported Open-Source Platforms	✅ Magento ✅ WordPress/Woocommerce ✅ OpenCart ✅ PrestaShop ✅ ZenCart

On-site Messaging

Tabby On-site Messaging is a solution that allows merchants to display personalized Afterpay payment messages on their website or mobile app before customers proceed to checkout. It helps inform customers in advance about available flexible payment options, thereby improving conversion rates and enhancing the overall user experience.

Integration Using the Sample Code Below

<div id="TabbyPromo"></div>
<script src="https://checkout.tabby.ai/tabby-promo.js"></script>
<script>
    new TabbyPromo({
        selector: '#TabbyPromo', // required
        currency: 'AED', // required, 'AED' or 'SAR', uppercase, no spaces
        price: '2000.00', // required, 2 decimal places for AED and SAR
        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>

Shopify

Using Shopify as an example, Afterpay On-site Messaging can be integrated by adding the script and placement code to your theme files.

1. In Online Store → Themes → Edit code → theme.liquid, add the following script:

<div id="TabbyPromo"></div>
<script src="https://checkout.tabby.ai/tabby-promo.js"></script>

2. Add placement on product page

<script>
    new TabbyPromo({
        selector: '#TabbyPromo', 
        currency: {{ shop.currency }}, 
        price: {{ product.price | money_without_currency }}
        lang: 'en', 
        source: 'product',
        shouldInheritBg: false, 
        publicKey: 'your_pk', 
        merchantCode: 'your_merchant_code'
    });
</script>