At payment time, design should reduce uncertainty. People want to know what they are buying, what they will pay and what happens next.

Show the actual charge before proceeding

The summary should identify the offer, scope and settlement currency. An indicative conversion is not the rate applied by the customer’s bank. When settlement is in MAD, show that amount clearly before leaving for the payment provider and explain possible bank conversion fees.

Ask only for necessary information

Visible labels, autocomplete and errors near the relevant field make entry easier. Do not force Morocco as the billing country for international customers. Terms must be accessible and explicitly accepted. Never collect card numbers in a simple contact form.

Separate experience from payment evidence

The browser can show progress but does not decide the price or whether payment succeeded. The server creates the order and verifies the provider notification. Repeated notifications must not create multiple orders or trigger duplicate fulfillment.

Design for imperfect situations

A customer may close the browser while a payment succeeds. A notification may arrive late. Confirmation should reflect the verified status: pending, paid or failed. Transactional emails are triggered after confirmation, and delivery should be retryable without changing the order.

Design the summary as a readable contract

The summary should immediately answer four questions: what am I buying, how much will I pay, when will I receive or be contacted, and what happens after payment? On mobile, this information must remain visible without forcing users to remember a previous page. Offer name, scope, MAD amount and possible fees should be grouped before the payment button.

If the displayed price is EUR or USD while settlement is in MAD, explain the difference. The website rate is indicative; the customer’s bank applies its own conversion. This clarification prevents the feeling of a hidden amount when the visitor is redirected to CMI or another gateway.

Simplify entry without removing useful information

A checkout is not a marketing questionnaire. Request name, email, phone and the billing information actually required. Mark optional fields clearly, use the correct mobile keyboards and preserve entered data when an error occurs. Error messages should sit near the relevant field and explain how to fix the issue, not merely report failure.

Browser autocomplete, timely validation and reasonable field lengths reduce abandonment. Avoid input masks that block international numbers. If you serve customers outside Morocco, do not force a Moroccan prefix or postal code.

Reassure without turning the page into a logo catalog

Security signals are useful when they answer a specific concern. Explain that payment happens on the provider’s hosted page and that your site never receives the card number or CVV. Name the provider, the settlement currency and the bank authentication controls where relevant.

Too many badges can have the opposite effect when they look decorative or unverifiable. A clear sentence, accessible terms and a professional confirmation are more persuasive than a wall of logos. Visible contact details, the legal business name and refund terms also contribute to trust.

Plan what happens after payment

The customer should not wonder whether payment worked. After the verified notification, show the order reference, purchased service, amount and next step. If the notification has not arrived, show a pending state rather than promising success. If payment fails, offer a retry or support path without losing entered information.

The confirmation email repeats the same reference and should not contain sensitive banking data. For services, state the expected contact or delivery process; for products, state delivery, carrier and return conditions.

Test the flow with realistic scenarios

Test on a mid-range phone, unstable connection, real keyboard and interruptions: incoming call, app switching, browser closing and slow bank notification. Also test the return from the payment page and repeated server notifications. A good checkout does not create two orders when a customer refreshes.

Measure abandonment by step: form start, validation errors, departure to the bank, return and confirmation. These metrics guide fixes. Lower conversion is not always a design problem; it can come from pricing, delivery options or insufficient trust.

Connect UX, engineering and commercial follow-up

The mobile checkout is not an isolated screen. It depends on product-page quality, the payment gateway, hosting, emails and customer service. A team must be able to find an order, understand its status and explain what happened. UX and technical integration should therefore be designed together.

For the technical side, read our CMI integration checklist. To improve the whole journey, our UI/UX and ecommerce expertise helps create a clear, measurable and secure checkout.

Questions to ask before launch

Check whether the final amount is visible before payment, fields work on a real phone, errors are understandable and the customer knows what happens after the transaction. Review intermediate states: order created, redirect, pending authorization, confirmed success and failure. Each state needs an appropriate message.

A reasonable action plan

Walk through checkout on several phones, limited connections and interrupted sessions. First fix unclear prices, difficult fields and inconsistent returns. Then document the expected support behavior: how to find an order, verify its state and respond to the customer without exposing card data.

Launch checklist

  • Price, scope and settlement currency visible before redirection.
  • Only necessary fields, autocomplete support and clear errors.
  • Hosted-payment explanation and visible contact information.
  • Confirmed, pending and failed states displayed correctly.
  • Order emails and references verified after the server notification.

The sign that checkout is ready

The journey is ready when several real users can finish without asking where to click or doubting the amount. Failure scenarios should be as clean as success. If support cannot find an order or explain its state, the issue is not only visual; the operational logic must be corrected.

Common mistakes to avoid

Do not hide the settlement amount behind a currency converter, ask for a full postal address when a service package only needs billing contact, or send the visitor to a payment page without explaining the provider. Do not rely on the browser return to update the order, and do not make the confirmation depend on an email that may arrive late. A resilient checkout shows the verified order state, preserves form data after an error and gives support enough context to help without requesting card details.