← Back to Portfolio★ Featured Project
Shopify App — Checkout Extension

Deema Installments UX

A Shopify app with checkout UI extension and theme app extension that displays Buy Now Pay Later installment payment options at checkout. Supports multiple BNPL providers (Deema, Tabby, Tamara) with bilingual EN/AR interface and KWD currency.

🛒 Shopify Checkout Extensibility 💰 BNPL — Buy Now Pay Later 🇮🇴 Kuwait (KWD) 🇪🇳 / 🇦🇷 Bilingual EN/AR
3
BNPL Providers
2-4
Installment Options
10-2000
KWD Range
2
Extensions
0%
Interest

Checkout Experience

Interactive preview of the installment payment widget as it appears in Shopify checkout:

Split your payment
Spread your payment over multiple installments to make managing your budget easier
2
Two
3
Three
4
Four
D
4 interest-free payments of 12.500 KWD

Supported BNPL Providers

Configurable per merchant via app metafields. Each provider has its own branding, colors, and logo:

Deema
ديمة
Tabby
تابي
Tamara
تمارا
Custom
مخصص

Architecture

🛒

Checkout UI Extension

React extension rendering after payment method list. SVG-based installment visualizations with pie-chart progress circles. Reactive to cart amount, currency, language, and selected payment method.

ReactShopify UI ExtensionsSVG GenerationCheckout API Hooks
🎨

Theme App Extension

Liquid blocks and snippets for product page integration. Shows installment preview on PDP. Configurable min/max amount and default installments via theme settings.

LiquidTheme BlocksSnippetsCSS/JS Assets

Remix Admin App

Embedded Shopify admin interface for merchant configuration. OAuth authentication, Prisma session storage, webhook handlers. App metafields for provider config.

RemixPrismaPolarisApp BridgeShopify API

Key Features

Dynamic Installment Calculator

Real-time calculation based on cart total. Supports 2, 3, or 4 installments. Handles KWD 3-decimal precision (fils).

Bilingual EN/AR

Full Arabic translation with Arabic numeral formatting (٠١٢٣). RTL-aware SVG layout. Language auto-detection from checkout.

Eligibility Rules

Min/max amount validation (10-2000 KWD). Currency check (KWD only). Payment method gating (offsite only).

SVG Visualizations

Custom SVG pie-chart icons for installment selection. Progress circle indicators for each payment in schedule. Dynamic colors per provider.

Payment Schedule

Auto-generated monthly schedule with dates. "Today" label for first payment. Proper month-end handling.

Multi-Provider Config

App metafields for provider selection, colors, logos, amounts. Switch between Deema, Tabby, Tamara, or custom without code changes.

Tech Stack

Frontend

RemixReactTypeScriptPolarisVite

Extensions

Shopify UI Extensions ReactCheckout APILiquidTheme App Extension

Backend

PrismaSQLiteShopify App RemixApp BridgeGraphQL Admin API