SATIM Frontend Requirements

1. Certification UI/UX Checklist (IHM)

To integrate the SATIM payment platform, the merchant website must meet the following UI/UX requirements.

1.1 SSL on Merchant Pages

• The merchant must use valid SSL/TLS on payment pages.
• If SSL is missing or the certificate is expired, request DevOps to enable/renew a valid certificate for the testing environment before SATIM tests.

1.2 Final Amount Clearly Visible

• The final payable amount must be clearly visible and emphasized (bold text, different font, larger size, etc.).
• Example: Amount: 5966.56 DA.

1.3 Captcha Before Payment Button

• Add an anti-bot captcha on the page that contains the SATIM payment button.
• This integration uses a classic captcha.
• Backend must implement captcha generation/validation logic and send the captcha image URL to the frontend.
• Captcha implementation details are out of scope for this guide and will be covered in a dedicated captcha guide.

1.4 CIB/EDAHABIA Logo on Payment Button

• The CIB/EDAHABIA logo must appear on the button that redirects to the SATIM platform.

1.5 Display Terms and Conditions

• The online payment terms (agreed between the merchant and its bank) and the product sale terms must be shown on the page.
• The customer must explicitly acknowledge acceptance of these terms.
• The payment terms must be displayed immediately before proceeding to payment.

1.6 External Browser Redirection

• For merchant websites and mobile applications, redirection to SATIM must open in an independent web browser context.

1.7 Language Consistency

• Keep one language consistently through checkout, redirect, return page, receipts, and errors.

2. Return Page Requirements

Global Rule

The SATIM support message and the SATIM logo must always be displayed together as a pair; do not show one without the other. Display order guideline: show the SATIM logo first, then the support message directly below it. The support message text must be localized based on the user selected language.

2.1 For Accepted Payments

Accepted payment condition:

• params.respCode = "00" and ErrorCode = "0" and OrderStatus = "2".

The merchant must display the following on the return page:

• JSON parameter respCode_desc
• SATIM transaction identifier orderId
• Merchant order number orderNumber
• Authorization number approvalCode
• Transaction date and time
• Payment amount and currency
• Payment method (CIB/EDAHABIA)
• SATIM support message: If you have a payment issue, please contact SATIM hotline 3020

2.2 For Rejected Payments

Case 1:

• If params.respCode = "00" and ErrorCode = "0" and OrderStatus = "3", display:
• Votre transaction a ete rejetee / Your transaction was rejected / تم رفض معاملتك (depending on the user selected language)
• Then display SATIM support 3020 with the SATIM logo.

Case 2 (otherwise):

• Display JSON parameter respCode_desc.
• If respCode_desc is empty, display actionCodeDescription.
• Then display SATIM support 3020 with the SATIM logo.

3. Receipt Actions

After payment is completed, the merchant must allow:

• Payment receipt printing
• Payment receipt PDF download
• Payment receipt email sending (PDF)
• Clicking Print receipt must open a print view/dialog for the user; it must not download a file.
• For Envoyer par email, the user must enter an email address; the receipt is then sent to that email.
• If the platform implements SATIM payments in multiple languages, the receipt must be generated in all supported language formats.
• Receipt generation must be done once, then the generated receipt must be saved and reused; do not regenerate it on each user request.

4. Glossary: Frontend Required Logo Assets

Use these assets in frontend integration:

Asset	File	Frontend Path	Usage
CIB/EDAHABIA logo	cib-edahabia-logo.png	/img/satim/cib-edahabia-logo.png	Payment button that redirects to SATIM.
SATIM logo (SVG)	satim.svg	/img/satim/satim.svg	Must be displayed together with SATIM support message 3020.