[KSA 🇸🇦] Tamara Widget Implementation Guidelines

What’s new
1. Tamara logo and branding

At Tamara, we are constantly evolving to meet the needs of our customers and partners. We are excited to refresh our logo, branding, and colours to present a more modern and unified identity that reflects our growth, values, and vision for the future.
What you need to do
- Replace older Tamara logos with the new version across your website, including footers, banners, carousels, and any in-line brand placements.
- Use only the official, approved assets from our brand kit.
2. Extended payment options

Tamara has become a trusted name across the MENA region, known for providing customers with flexible payment solutions of up to 6 payments. As customer needs continue to evolve, we’re expanding our offering; now allowing customers to split their payments into up to 12 payments. This gives your customers even greater purchasing power, helping you drive higher conversions, increase average order value, and build stronger customer loyalty.
What you need to do
- Review the updated product plan logic in the API documentation.
- Ensure your integration supports dynamic payment configurations, including 4 and 12 month options where applicable.
- Double-check that messaging and amounts reflect accurate pricing based on product or cart value.
3. Updated widgets messaging

With Tamara’s expanding product offerings, our messaging has been refined to better communicate the value of flexible payments. We are updating our messaging to reflect our long-term 12-month offering. The updated widget copy clearly communicates key benefits such as affordability, Sharia-compliance, and ease of use, ensuring consistency across all touchpoints.
What you need to do
- Replace any legacy or custom Tamara copy with the new approved messaging.
- Use the Messaging Pillars section to ensure you're covering all key value points.
4. Refreshed checkout experience

The checkout experience now features our updated design system, reflecting Tamara’s refreshed branding and support for long-term payment plans.
What you need to do
- Update your configuration to support the new 12-month payment plan alongside the existing 4-plan option.
- Update your store widgets to reflect this change. Refer to the updated widget guidelines in Section 1.0.
5. Updated Guidelines

With the launch of our refreshed branding and expanded payment options, we've updated our integration guidelines to reflect these exciting changes. The updated guidelines are designed to help you present Tamara consistently across your channels, clearly communicate the Tamara’s benefits to your customers, and make the most of our expanded payment flexibility. We encourage you to review and adopt the new guidelines to stay aligned and maximize the impact for your business.
What you need to do
- Review the implementation guidelines below
- Align your Tamara’s widget implementation with the new guidelines.
- Reach out to your Tamara account manager if you have any questions or need support.
1.0. Implementation Essentials
We understand that you need to balance multiple priorities in your e-commerce store design. Your brand identity, customer experience, and page real estate are valuable assets that require careful consideration. This flexible integration guide is designed to help you implement Tamara Widgets in a way that complements your existing design while still effectively communicating payment flexibility to your customers.
While we offer flexibility in implementation, these core elements must be present:
- Clear indication that Tamara is available as a payment option.
- Tamara’s messaging pillars: customer value and competitive advantage.
- Accurate representation of Tamara’s plan structures.
- A call-to-action (CTA) for customers to learn more about Tamara. e.g.: a link or button.
- Pop up: Triggered when a user clicks the CTA that provides more detail about Tamara’s payment options.
- Design and branding: Adherence to our official guidelines for visual presentation to ensure the widget is clear, trustworthy, and consistent.
We recommend using Tamara’s official Widgets to easily communicate payment flexibility to your customers. Our widgets are designed to integrate seamlessly with your e-commerce store, helping you deliver a smooth experience without compromising your brand identity or design.
1.1. Clear indication that Tamara is available as a payment option
Customers should know that Tamara is available as a payment option, no matter where they land on your site. The easiest way is to ensure that the Tamara logo is included in the widgets. This should be consistently shown across key points in the purchase journey, including the product details page, cart, and checkout.
Requirements:
Legend | Priority | Requirement | Description |
---|---|---|---|
1 | Primary | Tamara logo | Always include the Tamara logo in the widget to reinforce brand recognition. |
2 | Fallback | Tamara as text | If space constraints prevent using the logo, mention “Tamara” in the messaging. |


The logo is the preferred primary method. Text-only mentions should only be used in rare edge cases where space or layout constraints apply.
1.2. Messaging pillars
Clear and consistent messaging about Tamara's payment options and benefits helps customers understand the value. When communicating about Tamara, we recommend using Tamara’s official messaging, which has been carefully crafted to explain our offering clearly and deliver the best possible experience for your customers.
If you need to adapt the messaging, be sure to include the following three core messaging pillars.
1.2.1. Minimum Requirements:
Legend | Pillars | Description | English | Arabic | Why it matters |
---|---|---|---|---|---|
1 | Long term financing | Indicates our value in flexibility and affordability | Pay SAR 208/mo | ادفع SAR208\شهريًا | Communicates lower potential monthly costs and wider accessibility. |
2 | 4 Payment option | Highlights Tamara’s well-known 4-split option | or in 4 payments | أو على 4 دفعات | Reinforces the familiar payment experience customers recognize and trust. |
3 | Competitive differentiator | Highlights what makes us stand out from our competitors | Sharia-compliant | متوافقة مع الشريعة الإسلامية. | Builds credibility, appeals to local values. |
4 | Call to Action (CTA) | Prompts users to learn more or view their plan options | More options | تعرّف على خياراتك | Encourages interaction, and deepens understanding. |
5 | Logo | Always display the official Tamara logo in widgets | Tamara gradient logo | Tamara gradient logo | Serves as a visual anchor across key touchpoints to drive recognition and trust. |

1.2.2. ⭐️ Recommended Messaging
We strongly encourage you to use Tamara’s official messaging, it’s designed and tested to explain our offering clearly and deliver the best possible experience for your customers. Custom messaging may lead to confusion, or outdated information.
Language | Messaging |
---|---|
English | Pay SAR 208/mo or in 4 payments. Sharia-compliant. More options |
Arabic | ادفع SAR 208\شهريًا أو على 4 دفعات. متوافقة مع الشريعة الإسلامية. تعرّف على خياراتك |

1.2.3. Messaging do’s & don’ts
✅ Do’s | ❌ Don’ts |
---|---|
DO include all core pillars: long term financing, 4 plan option, competitive differentiator, CTA & Tamara logo. | DON'T skip any pillars or create messaging that does not align with Tamara’s core messaging. |

1.3. Accurate representation of Tamara’s plan structures
We recommend displaying the potential payment plan for a product or order, e.g., “Pay SAR 208/mo”. To ensure accuracy and transparency, the amounts shown must reflect the actual product or order value divided by the configured number of payments (4 or 12). This ensures the messaging is clear, trustworthy, and aligned with what the customer will actually pay.
1.3.1. Requirements
Requirements | Description | Example | Why it matters |
---|---|---|---|
Dynamic item or cart total calculation | Divide the product price (PDP) or order/cart total (Cart/Checkout) by the number of payments. | Product price: SAR 2500 Number of payment configured: 12 Calculation: SAR 200 ÷ 12 = 208.33 Value: ”Pay SAR 208/month” | Ensures pricing reflects actual product or cart value, and helps customers understand what they will pay. |
Accurate Rounding | Apply standard rounding rules to the monthly payment shown. | SAR 208.33 → SAR 208 | Avoids displaying misleading decimal amounts. |
Contextual Relevance | Ensure the message reflects the page context such as Product details page, Cart and Checkout. | Product Page: The widget shows the payment plan for the price (e.g., SAR 2500) of a single item being viewed. E.g., "Pay SAR 208/month" Cart or Checkout Page: The widget updates to show the plan for the entire cart/checkout total (e.g.: SAR 3000). E.g., "Pay SAR 250/month” | Maintains consistency with where the customer is in the purchase journey and builds trust down the funnel. |
Updated in Real-Time | Re-calculate the payment plan in real-time to reflect the new cart total any time a user modifies their cart.This includes: | Initial Cart: 1 item @ SAR 2500. Widget shows "Pay SAR 208/mo". User Action: Changes quantity to 2. Instant Update: Widget immediately refreshes to show "Pay SAR 416/mo". | Keeps payment info accurate as users modify their cart, reducing confusion. |
1.3.2. Plans representation do’s & don’ts
✅ Do’s | ❌ Don’ts |
---|---|
DO calculate the payment amount dynamically based on the current product price or total cart value. | DON'T hardcode the payment amount. This is the #1 source of customer confusion. |
DO ensure the payment amount updates instantly when the cart is modified (e.g., quantity change, discount). | DON'T show a stale or cached payment amount after the cart has been changed. |
DO apply standard rounding rules to avoid displaying confusing decimal amounts (e.g., SAR 208.33 → SAR 208). | DON'T display fractional currency amounts like "SAR 208.33" in the widget message. |

1.4. A link button for customers to learn more about Tamara
Tamara widgets should provide a subtle way for customers to access additional information about Tamara’s payment plan offerings.
1.4.1 Minimum Requirements
Legend | Requirement | Description | Example | Why It Matters |
---|---|---|---|---|
1 | Interactive Element | Provide a clickable element (e.g. link, button). | “More options” | Enables users to explore additional information when they choose. |
2 | Pop up | The link button should open Tamara’s official pop. | Popup displaying available payment options and more about Tamara’s offering. | Allows users to view full plan information without disrupting their shopping flow. |

We recommend a link button with the text “More options”.
1.5. Design and branding
When implementing Tamara widgets on your e-commerce platform, striking the right balance between Tamara's brand presence and your own design system is essential. Follow these guidelines to create a cohesive, trustworthy experience that enhances your conversion rates while maintaining your brand identity.
1.5.1. Design specifications
Legend | Requirement | Description | Notes |
---|---|---|---|
1 | Widget Container | Place the widget inside a rounded rectangular container with a white background to ensure message clarity. | Container colours, backgrounds, and border radius can match your store’s design system. |
2 | Typography | Use 14px (mobile) to 16px (desktop) font size for widget text. Font weight 400 for general text. | You may use your store's font for the widget content. |
3 | Payment emphasis | Bold the payment cost portion using font weight 600 or 700 (e.g. “SAR 208/mo”). | Emphasizes the key value proposition to the customer. |
4 | Call-to-action: Link Button | Include an interactive text link (e.g. “More options”) to open the pop up. | Link styling may adopt your store’s colours and styling. |
5 | Padding | We recommend a 16px internal padding inside the widget container on all sides. | Maintains clarity and balance. |
6 | Content Margin | Maintain 16px margin between text content and Tamara logo. | Ensures separation between content and logo for clarity. |
7 | Tamara Logo | Use Tamara’s official gradient logo with height 28px (mobile) or 32px (desktop). | Logo must not be altered or distorted. |
8 | Border and Border Radius | Apply 16px border radius on all corners and 1px border around the entire widget. | Provides a soft, modern appearance, subtle definition and visual containment. |
9 | Safe Space | Maintain 16px clear space around the entire widget from surrounding page elements. | Ensures the widget isn’t visually cramped, and stands out. |

1.5.2. Design do’s & don’ts
✅ Do’s | ❌ Don’ts |
---|---|
DO use the official, unaltered Tamara gradient logo to ensure brand recognition and trust. | DON'T distort, recolor, stretch, or alter the Tamara logo in any way. |
DO use a bold font weight to emphasize the key payment amount (e.g., "SAR 208/mo"). | DON'T make the entire text bold, which reduces readability and impact. |

2.0. Widgets
Now that you've learned about the essentials of implementing Tamara widgets, let's take a closer look at each of the widgets.
2.1. Product Details Page Widget

The Product Details Page (PDP) widget plays a crucial role in introducing Tamara’s payment options at the moment when customers are considering a purchase. Customers on this page are often evaluating whether a product fits their budget. Clearly displaying flexible payment options on the product details page helps users understand affordability, which can increase conversion rates and average order value.
The PDP widget should be informative, align with our messaging and structural specifications, and be positioned for maximum visibility.
Showcasing the PDP widget on the product detail page plays an important role in increasing conversion and helping users discover the available payment plans.
2.1.1. Purpose of the PDP Widget
The PDP widget is designed to:
- Inform users that Tamara is available as a payment method.
- Display clear and accurate payment plan details.
- Encourage engagement through a call to action (e.g. “More options”).
- Increases average order value and drives conversion value by making purchases feel more affordable and achievable.
2.1.2 Messaging on PDP Widget
As initially explained in section 1.2, the PDP messaging should include all of Tamara's messaging pillars.
Legend | Requirement | Example (English) | Example (Arabic) |
---|---|---|---|
1 | Long term financing | “Pay SAR 208/mo | ادفع SAR208\شهريًا |
2 | 4 payment option | or in 4 payment | أو على 4 دفعات |
3 | Competitive differentiator | Sharia compliant. | متوافقة مع الشريعة الإسلامية. |
4 | CTA | More options” | تعرّف على خياراتك |
5 | Tamara gradient Logo | Logo | Logo |

We strongly recommend you use Tamara’s official messaging:

2.1.3. PDP Widget Placement & Visibility
Strategic placement is crucial for maximizing the widget's impact and ensuring customers notice payment options during purchase decisions. We recommend positioning the widget directly below the product price, as this helps customers understand affordability and cost at a glance.

Display the PDP widget directly below the product price, where affordability considerations are made.
2.1.4.Payment calculation
We highly recommend using Tamara’s official widget, which is designed to work out of the box with built-in logic for accurate, compliant, and user-friendly messaging. However, if you choose to build a custom widget, it’s essential to implement a dynamic calculation that reflects the actual product price.
Example:
- Product price = SAR 2500
- Maximum plan configured = 12 payments
- Display: “Pay SAR 208/mo, or in 4 payments. Sharia-compliant. More options”
2.1.5. PDP Widget do’s & don’ts
✅ Do’s | ❌ Don’ts |
---|---|
DO place the widget directly below the product price for maximum visibility and impact. | DON'T hide the widget far down the page, below the fold, or in a collapsed section. |

2.2. Cart Widget
The cart widget reinforces Tamara’s availability and payment flexibility just before checkout, reminding customers they can still split or finance their payment. It also helps reduce cart abandonment by making the purchase feel more manageable at a critical stage.
2.2.1. Messaging
The Cart Widget messaging should be composed of Tamara’s messaging pillars.
Legend | Requirement | Example (English) | Example (Arabic) |
---|---|---|---|
1 | Long term financing | “Pay SAR 208/mo | ادفع SAR208\شهريًا |
2 | 4 payment option | or in 4 payment | أو على 4 دفعات |
3 | Competitive differentiator | Sharia compliant. | متوافقة مع الشريعة الإسلامية. |
4 | CTA | More options” | تعرّف على خياراتك |
5 | Tamara gradient Logo | Logo | Logo |

2.2.2. Placement & Visibility
We recommend placing the Cart Widget below the cart total or near the “Proceed to Checkout” button to maximize visibility without disrupting core purchase actions.

2.2.3. Payment Calculation in Cart
We strongly recommend using Tamara’s official widget for the cart, as it’s optimized for accuracy, clarity, and real-time updates. It automatically handles pricing changes, discounts, and quantities across multiple items. However, if you're building a custom cart widget, it’s crucial to dynamically calculate the payment amount based on the entire cart total ensuring users see up-to-date and accurate payment breakdowns.
Example: Cart total = SAR 3000 Configuration = 12 payments Display: “Pay SAR 250/mo, or in 4 payments. Sharia-compliant. More options”

Don’t hardcode the message. Dynamic accuracy here builds trust and improves conversion.
2.2.4. Cart Widget do’s & don’ts
✅ Do’s | ❌ Don’ts |
---|---|
DO place the widget near the cart total and the primary checkout button to reduce cart abandonment. | DON'T hide the widget far down the page, below the fold, or in a collapsed section. |
DO ensure the calculation is based on the entire cart's total value and updates in real-time. | Don’t show static values. Ensure the payment breakdown reflects real-time cart changes. |

2.3. Checkout Widget
At checkout, the widget confirms that Tamara is an available payment method, building final trust and confidence. This is often the last reassurance point before conversion.

2.3.1. Messaging
The Checkout Widget messaging is designed for reassurance and simplicity at the final payment step. It should display Tamara as the payment provider label, accompanied by a brief reassurance message highlighting our key value proposition and competitive advantage, such as “Monthly payments. No hidden fees.”
Legend | Requirement | Example (English) | Example (Arabic) |
---|---|---|---|
1 | Payment provider label | “Tamara” | “Tamara” |
2 | Payment reassurance: key value proposition and competitive advantage. | “Monthly payments. Sharia-compliant.” | دفعات شهرية. متوافقة مع الشريعة الإسلامية. |
3 | Tamara gradient Logo | Logo | Logo |

2.3.2. ⭐️ Recommended Messaging
We strongly encourage you to use Tamara’s official messaging, it’s designed and tested to explain our offering clearly and deliver the best possible experience for your customers. Custom messaging may lead to confusion, or outdated information.
Language | Messaging |
---|---|
English | Tamara Monthly payments. Sharia compliant. |
Arabic | Tamara دفعات شهرية. متوافقة مع الشريعة الإسلامية. |

2.3.3. Placement & Visibility
The widget should be placed within the payment method selection options, using styling consistent with other payment methods. It can also be embedded as part of radio button payment options to align with the checkout experience.

3.0. Pop up

The popup serves as a lightweight, informative layer that helps customers understand Tamara’s payment options in a clear and engaging way without leaving the page. It is triggered when the link or buttons within the widget is clicked or tapped.
It's important to note that the popup is to be dynamic—i.e., the payment plans displayed in the popup
3.1 Minimum Requirements
Legend | Requirement | Description | Why it matters |
---|---|---|---|
1 | Tamara logo | Display the official Tamara logo at the top of the popup. | Builds brand recognition and trust from the start. |
2 | Hero section | Use our official tagline: “Your Payment ,your Pace” with subtext: “Pay SAR [plan cost per month] or in 4 payments. Sharia-compliant." | Creates immediate clarity and draws attention to the benefit of flexible payments. |
3 | Plan breakdown | Dynamic calculation based on total value, and as configured by the merchant. | Helps customers assess affordability quickly and accurately. |
4 | How it works | Include step-by-step how it works: 1.Select plan 2.Enter card 3.Manage in app 4.Get reminders | Makes the process feel simple and transparent. |
5 | Why Tamara? | Highlight our value propositions: 1.No late fees 2.Sharia compliant 3.100%-buyer protection | Builds credibility and reinforces Tamara’s key value propositions. |
6 | Legal Information | Show a short compliance statement with certificate reference. | Ensures transparency, especially for Sharia compliance, important in MENA markets. |
7 | Accepted Payment Methods | Display logos for supported cards and wallets (Mada, Visa, Apple Pay, etc.) | Reassures customers that their preferred payment method is supported. |
8 | Dismissal button | Provide a clear close (“×”) button in the top-right corner. | Gives users control and meets UX best practices. |

Relevant resources
Resources | Description | Link |
---|---|---|
Tamara logo and brand assets | Download official logos, icons, and visual guidelines for use in widgets and communications. | https://cdn.tamara.co/merchant_docs/Tamara__Brand__Assets_v2.zip |
Tamara Widget API documentation | Technical guide for integrating Tamara widgets via API, including endpoints and parameters. | https://docs.tamara.co/docs/direct-widgets |
Tamara Widget Tool | A web-based tool for previewing, customizing, and generating widget embed code. | https://widget-docs.tamara.co/tamara-summary |
Updated about 2 hours ago