[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:

LegendPriorityRequirementDescription
1PrimaryTamara logoAlways include the Tamara logo in the widget to reinforce brand recognition.
2FallbackTamara as textIf 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

LegendRequirementDescriptionExampleWhy It Matters
1Interactive ElementProvide a clickable element (e.g. link, button).“More options”Enables users to explore additional information when they choose.
2Pop upThe 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

LegendRequirementDescriptionNotes
1Widget ContainerPlace 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.
2TypographyUse 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.
3Payment emphasisBold the payment cost portion using font weight 600 or 700 (e.g. “SAR 208/mo”).Emphasizes the key value proposition to the customer.
4Call-to-action: Link ButtonInclude an interactive text link (e.g. “More options”) to open the pop up.Link styling may adopt your store’s colours and styling.
5PaddingWe recommend a 16px internal padding inside the widget container on all sides.Maintains clarity and balance.
6Content MarginMaintain 16px margin between text content and Tamara logo.Ensures separation between content and logo for clarity.
7Tamara LogoUse Tamara’s official gradient logo with height 28px (mobile) or 32px (desktop).Logo must not be altered or distorted.
8Border and Border RadiusApply 16px border radius on all corners and 1px border around the entire widget.Provides a soft, modern appearance, subtle definition and visual containment.
9Safe SpaceMaintain 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.

LegendRequirementExample (English)Example (Arabic)
1Long term financing“Pay SAR 208/moادفع SAR208\شهريًا
24 payment optionor in 4 paymentأو على 4 دفعات
3Competitive differentiatorSharia compliant.متوافقة مع الشريعة الإسلامية.
4CTAMore options”تعرّف على خياراتك
5Tamara gradient LogoLogoLogo

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.

LegendRequirementExample (English)Example (Arabic)
1Long term financing“Pay SAR 208/moادفع SAR208\شهريًا
24 payment optionor in 4 paymentأو على 4 دفعات
3Competitive differentiatorSharia compliant.متوافقة مع الشريعة الإسلامية.
4CTAMore options”تعرّف على خياراتك
5Tamara gradient LogoLogoLogo


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.”

LegendRequirementExample (English)Example (Arabic)
1Payment provider label“Tamara”“Tamara”
2Payment reassurance: key value proposition and competitive advantage.“Monthly payments. Sharia-compliant.”دفعات شهرية. متوافقة مع الشريعة الإسلامية.
3Tamara gradient LogoLogoLogo


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

ResourcesDescriptionLink
Tamara logo and brand assetsDownload 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 documentationTechnical guide for integrating Tamara widgets via API, including endpoints and parameters.https://docs.tamara.co/docs/direct-widgets
Tamara Widget ToolA web-based tool for previewing, customizing, and generating widget embed code.https://widget-docs.tamara.co/tamara-summary