Saudi Checkout UX: Designing for mada, Tabby and Tamara

Checkouts built for Western markets often treat local payment methods as an afterthought. In Saudi Arabia that costs orders: shoppers expect to see mada, Apple Pay and installment options they recognize. This guide covers the design decisions that matter, using the providers’ own documentation where it exists. For general checkout fixes, see our White Friday checkout UX fixes.

What payment methods should a Saudi checkout support?

• mada: Saudi Arabia’s national payment network. mada cards are usually co-badged with Visa or Mastercard; domestic payments route over mada (PAL4IT payment guide).

• Apple Pay: available in Saudi Arabia since 2019 and works with mada, Visa and Mastercard cards (same source).

• Tabby: buy now, pay later, typically split into 4 interest-free payments. In Saudi Arabia, Tabby Financing Company is supervised by the Saudi Central Bank (SAMA) (Tabby App Store listing).

• Tamara: buy now, pay later in installments; longer plans such as 6 or 12 payments can appear depending on the merchant agreement and the customer’s eligibility. Tamara accepts mada, Visa, Mastercard and Apple Pay for repayments (Salla help: enabling Tamara).

How should you order and label payment options?

• Put the methods your customers use most at the top. For many Saudi stores that means Apple Pay on iOS and mada cards for everyone; check your own payment data before you decide.

• Show the mada logo on the card option. Customers look for it, and a generic “Credit card” label can make debit-card holders hesitate.

• Use the providers’ own wording. Tabby’s integration docs ask for “Pay later with Tabby” and “ادفع لاحقًا مع تابي”, with a line such as “4 payments of XX.XX/mo” under it (Tabby checkout flow).

• Show prices in SAR in the same format everywhere: product page, cart, payment step and receipt.

How do you design BNPL messaging that helps, not pressures?

Installments work best when customers learn about them before they reach payment. Show the per-installment amount on the product page and in the cart, with a link that explains the schedule. Keep the full price visible next to it. Make it clear when a plan is interest-free and when fees may apply, and never preselect an installment option.

How do you handle the redirect and OTP?

With Tabby’s hosted payment page, the customer verifies their phone number with a one-time code on each transaction, and new customers link a card or Apple Pay (Tabby checkout flow). Tamara also redirects to its own checkout, where all eligible plans appear. Design for that handoff:

• Tell the customer before the redirect what will happen: “You’ll confirm with Tabby using a code sent to your phone.”

• Keep the cart and the order total identical on both sides of the redirect.

• Bring the customer back to a clear success, pending or failed state, never to an empty cart.

• Save the cart if the customer abandons the BNPL page so they can choose another method.

What happens when an installment plan is declined?

BNPL providers run an eligibility check on each purchase, so some customers will be declined. Treat it as a normal path: return the customer to the payment step with a short, neutral message, keep their details, and highlight mada and Apple Pay as the next option. Don’t show the provider’s internal error codes.

Arabic and RTL details that affect checkout

• Card number, expiry and CVV fields stay left-to-right even in an Arabic layout. Phone numbers too.

• Decide on Western (123) or Arabic-Indic (١٢٣) digits for prices and use one consistently.

• Test error messages and BNPL widgets in Arabic; third-party widgets are where RTL usually breaks.

• Our Arabic-first RTL design guide covers the layout rules in more depth.

Saudi checkout UX FAQ

Is mada a debit card or a payment network?

mada is Saudi Arabia’s national payment network. Most Saudi bank debit cards carry it, often alongside Visa or Mastercard.

Should I offer both Tabby and Tamara?

Many Saudi stores offer both because customers often already have an account with one of them. Each needs its own agreement, or you can use a payment gateway that supports both. Test whether two options clutter your payment step.

Where should BNPL appear in the flow?

On the product page and in the cart as information, and at the payment step as a choice. Customers who see installments early don’t need to be surprised at the end.

Planning a checkout redesign for the Saudi market? Our UX audit finds where your checkout loses orders, and our product design team can redesign it. You can also read about fintech UX in Saudi Arabia.