WooCommerce Payment in Morocco: Plugin & Integration Guide 2026

WooCommerce and the Moroccan E-commerce Landscape in 2026

WordPress powers over 43% of all websites worldwide, and WooCommerce is its most widely adopted e-commerce extension. Morocco is no exception: according to BuiltWith data, WooCommerce accounts for more than 35% of active Moroccan online stores — ahead of PrestaShop and far ahead of SaaS platforms like Shopify.

The reasons are structural. Most Moroccan small and medium businesses already run a WordPress site, and adding WooCommerce is the logical next step. No platform migration, no mandatory monthly subscription, and complete control over design and functionality.

The bottleneck, however, is payments. WooCommerce ships with no native payment solution for the Moroccan market. Merchants must integrate a local payment gateway either through a plugin or a custom API integration.

This guide covers everything you need: plugin selection, step-by-step installation, developer API integration, a detailed comparison of the main providers, conversion optimization, and security compliance — all through the lens of the Moroccan market in 2026.

Why WooCommerce for E-commerce in Morocco

True Ownership and Open Source Freedom

Unlike Shopify or any SaaS e-commerce platform, WooCommerce is fully open source. You own your code, your data, and your infrastructure. No vendor lock-in, no platform-level transaction fees (beyond the payment gateway itself), and unlimited ability to customize the buying experience.

For Moroccan entrepreneurs who want maximum control — and for web agencies building client solutions — this is a decisive advantage. You can modify any part of the checkout flow, integrate custom business logic, or build entirely bespoke experiences.

Total Cost of Ownership

A 12-month cost comparison for a mid-sized store:

WooCommerce generally becomes more cost-effective as transaction volume grows, since Shopify charges 2% on every transaction when using a third-party gateway on its Basic plan.

The WordPress Developer Ecosystem in Morocco

Morocco has a strong community of WordPress developers, making it easy to find local freelancers or agencies for customizations. Documentation is available in French, and community meetups in Casablanca and Rabat are active. This local talent pool is an indirect but real advantage over platforms requiring specialized proprietary skills.

Morocco-Specific Flexibility

WooCommerce adapts naturally to the Moroccan market:

• Display prices in Moroccan Dirham (MAD)
• Native Cash on Delivery (COD) support — still the dominant payment method in Morocco
• B2B purchase order flow for wholesale merchants
• Bilingual French / Arabic storefronts via WPML or Polylang

Payment Gateway Options for WooCommerce in Morocco

Chari Pay (ChariBaaS)

Chari Pay is the payment solution built by ChariBaaS specifically for the Moroccan market and designed with WooCommerce integrators in mind.

Strengths:

• Official WooCommerce plugin — actively maintained
• Support for Visa and Mastercard (Moroccan and international cards)
• Native Maroc Pay integration (QR code and mobile wallet payments)
• 3D Secure 2.0 compliant with Bank Al-Maghrib requirements
• Fully autonomous sandbox with documented test cards
• Real-time webhooks for order status updates
• Comprehensive transaction dashboard
• Technical support in French and Arabic
• Clear RESTful API documentation for developers

Considerations:

• Newer solution than CMI; brand recognition is still growing
• Requires an active ChariBaaS merchant account

CMI (Centre Monetique Interbancaire)

CMI is Morocco's national electronic payment infrastructure, operated by the banking system. Every Moroccan bank card is CMI-compatible.

Strengths:

• Maximum coverage — all Moroccan bank cards accepted
• Established trust — Moroccan consumers recognize the CMI brand
• PCI-DSS Level 1 certified

Considerations:

• No official WooCommerce plugin — requires third-party plugins or custom development
• Long onboarding process (several weeks, bank documents required)
• Older technical interface (legacy SHA-1 protocols on some endpoints)
• Less responsive technical support for smaller merchants
• Variable setup fees depending on the acquiring bank

Payzone

Payzone is a Moroccan payment aggregator that streamlines access to online payments.

Strengths:

• WooCommerce plugin available
• Relatively fast registration process
• Moroccan and international card support

Considerations:

• Less comprehensive technical documentation than Chari Pay
• Maroc Pay support varies by plan
• Fees depend on negotiated plan

Quick Comparison

Step-by-Step Plugin Installation Guide

Prerequisites

Before starting, ensure you have:

• WordPress 6.x with WooCommerce 8.x or later installed
• An active SSL certificate on your domain (HTTPS is mandatory)
• An active merchant account with your chosen gateway (Chari Pay, CMI, or Payzone)
• Your merchant credentials: Merchant ID, API Key, Secret Key

Step 1: Configure WooCommerce for Morocco

Before installing the payment plugin, set up WooCommerce for the Moroccan market:

1. Navigate to WooCommerce > Settings > General
2. Selling location: Morocco
3. Currency: MAD (Moroccan Dirham)
4. Currency position: left (DH 250) or right (250 DH) per your preference
5. Decimal separator: comma (,) for local formatting or period (.) for international audiences
6. Number of decimals: 2

Under WooCommerce > Settings > Shipping, configure shipping zones with Moroccan regions (Casablanca, Rabat, Marrakech, etc.) and your delivery rates.

Step 2: Install the Payment Plugin

Via the WordPress Dashboard (recommended)

1. Go to Plugins > Add New Plugin
2. Search for your gateway's plugin name (e.g., "Chari Pay WooCommerce" or "Payzone WooCommerce")
3. Click Install Now, then Activate

Via ZIP Upload

If the plugin is not on WordPress.org:

1. Download the .zip file from your gateway's developer portal
2. Go to Plugins > Add New Plugin > Upload Plugin
3. Select the ZIP file and click Install Now
4. Click Activate Plugin

Step 3: Configure the Plugin

1. Go to WooCommerce > Settings > Payments
2. Find your gateway in the list and click Manage
3. Enable: Yes
4. Title: What the customer sees at checkout (e.g., "Pay by card")
5. Description: Short description (e.g., "Visa, Mastercard — secure 3D Secure payment")
6. Mode: Select Test to begin
7. Merchant ID: Paste your merchant identifier
8. API Key: Paste your API key
9. Secret Key: Paste your secret key (used for HMAC signature verification)
10. Return URL: Usually auto-configured (/wc-api/[gateway_name])
11. Save

Step 4: Test the Integration in Sandbox Mode

Before going live, run a complete test suite:

Test 1 — Successful payment

• Add a product to cart
• Complete checkout with test information
• Use the gateway's "approved" test card
• Verify the order moves to "Processing" status in WooCommerce
• Verify the confirmation email is sent

Test 2 — Declined payment

• Use the gateway's "declined" test card
• Verify the order remains in "Pending Payment"
• Verify the error message displayed to the customer

Test 3 — 3D Secure flow

• Use a test card with 3D Secure enabled
• Verify the redirect to the bank authentication page
• Complete authentication and verify the return to WooCommerce

Test 4 — Refund

• Open a paid test order in WooCommerce > Orders
• Click Refund and enter an amount
• Verify the refund is initiated via the gateway dashboard

Step 5: Go Live

Once all tests pass:

1. In plugin settings, switch Mode from Test to Live
2. Replace test API keys with production keys (provided by your gateway)
3. Process a real transaction with a small amount (10 MAD)
4. Verify the settlement on your bank account

Custom API Integration for Developers

For stores with advanced requirements — custom payment flows, mobile app + WooCommerce hybrid setups, or multi-channel integration — you can bypass the plugin and integrate directly via the gateway's REST API alongside the WooCommerce REST API.

Overall Architecture

Customer (browser / mobile app)
    │
    ▼
WooCommerce (order creation via REST API)
    │
    ▼
Custom backend (PHP / Node.js)
    │
    ▼
Payment Gateway API (Chari Pay REST API)
    │
    ▼
Bank payment page (3D Secure)
    │
    ▼
Confirmation webhook → WooCommerce Order Update

Creating a WooCommerce Order via REST API

POST /wp-json/wc/v3/orders
Authorization: Basic base64(consumer_key:consumer_secret)
Content-Type: application/json

{
  "payment_method": "charipay",
  "payment_method_title": "Chari Pay",
  "set_paid": false,
  "billing": {
    "first_name": "Youssef",
    "last_name": "Benali",
    "email": "youssef@example.ma",
    "phone": "+212600000000",
    "address_1": "123 Mohammed V Avenue",
    "city": "Casablanca",
    "country": "MA"
  },
  "line_items": [
    { "product_id": 42, "quantity": 1 }
  ]
}

Initiating Payment via Chari Pay API

POST https://api.baas.ma/v1/payments/initiate
Authorization: Bearer {API_KEY}
Content-Type: application/json

{
  "amount": 25000,
  "currency": "MAD",
  "order_id": "WC-1042",
  "customer": {
    "name": "Youssef Benali",
    "email": "youssef@example.ma",
    "phone": "+212600000000"
  },
  "return_url": "https://yoursite.ma/wc-api/charipay_return",
  "cancel_url": "https://yoursite.ma/cart",
  "webhook_url": "https://yoursite.ma/wc-api/charipay_webhook"
}

The response contains a payment_url to which you redirect the customer.

Handling the Confirmation Webhook

// functions.php or custom plugin
add_action('woocommerce_api_charipay_webhook', function() {
    $payload = json_decode(file_get_contents('php://input'), true);
    
    // Verify HMAC signature
    $signature = hash_hmac('sha256', json_encode($payload['data']), CHARIPAY_SECRET_KEY);
    if ($signature !== $payload['signature']) {
        http_response_code(401);
        exit;
    }
    
    $order = wc_get_order($payload['data']['order_id']);
    
    if ($payload['data']['status'] === 'PAID') {
        $order->payment_complete($payload['data']['transaction_id']);
        $order->add_order_note('Payment confirmed via Chari Pay. Transaction: ' . $payload['data']['transaction_id']);
    } elseif ($payload['data']['status'] === 'FAILED') {
        $order->update_status('failed', 'Payment failed via Chari Pay.');
    }
    
    http_response_code(200);
});

For deeper integration details, refer to the ChariBaaS API documentation.

Comparison Table: CMI vs Payzone vs Chari Pay for WooCommerce

Recommendation: for a WooCommerce store just getting started, Chari Pay offers the best balance of ease and features. For an established store with high volume and a strong banking relationship, CMI remains the reference for maximum card coverage.

Optimizing Conversions on WooCommerce in Morocco

Understanding Cart Abandonment in Morocco

The cart abandonment rate in Moroccan e-commerce exceeds 72% — slightly higher than the global average. The main identified causes:

1. Shipping costs revealed only at checkout
2. Lack of trust in online payments
3. Checkout process too long or complex
4. Absence of Cash on Delivery (COD)
5. Poor mobile experience

Concrete Strategies

1. Show shipping costs early Configure WooCommerce to display a shipping estimate on the cart page. Unexpected costs at checkout are one of the top abandonment triggers.

2. Offer Cash on Delivery (COD) COD remains the dominant payment method in Morocco, used by over 60% of online shoppers. Enable it under WooCommerce > Settings > Payments > Cash on Delivery. Consider adding a 10–20 MAD surcharge to gently incentivize online payment.

3. Add Maroc Pay The Maroc Pay digital wallet targets customers who are partially banked (post offices, agents) and may not have a bank card. Adding this payment method via Chari Pay expands your potential customer base significantly.

4. Trust badges at checkout Display SSL padlock, Visa Secure, Mastercard Identity Check, and 3D Secure logos prominently. These visual cues reduce purchase anxiety, especially among first-time online buyers.

5. Streamline the checkout form Use a one-page checkout plugin (e.g., CheckoutWC). Remove unnecessary fields. Auto-fill city based on postal code. The fewer the friction points, the higher the conversion rate.

6. Optimize for mobile In 2026, over 75% of Moroccan e-commerce traffic comes from mobile devices. Your WooCommerce theme and checkout pages must be fully responsive and fast-loading.

7. Abandoned cart recovery emails Install a cart recovery plugin (e.g., CartFlows, Abandoned Cart Lite for WooCommerce) to send automated reminders at 1 hour, 24 hours, and 72 hours after abandonment.

Security and Compliance

Bank Al-Maghrib Requirements

Bank Al-Maghrib mandates that all electronic payment systems operating in Morocco adhere to international security standards. For WooCommerce stores, this means:

• HTTPS mandatory across the entire site (valid SSL certificate)
• 3D Secure for all card transactions
• No card data storage on your server
• Transaction logging for audit purposes

PCI-DSS and the Gateway's Role

The good news: if you use a certified payment gateway (Chari Pay, CMI, Payzone), your WooCommerce store operates under SAQ A — the simplest PCI-DSS compliance scope. This means:

• The card entry form is hosted by the gateway, not on your server
• Card data never passes through your infrastructure
• Responsibility for card number security falls on the PCI-DSS Level 1-certified gateway

This is the key reason you should always use a hosted payment page or a gateway-hosted iframe rather than building your own card form.

Securing Your WordPress Installation

Beyond payment compliance, protect your WordPress environment:

1. Keep WordPress, WooCommerce, and all plugins updated — most compromises exploit known vulnerabilities in outdated versions
2. Install a security plugin (Wordfence, Sucuri) to monitor intrusion attempts
3. Daily backups of your database and files
4. Two-factor authentication (2FA) for WordPress admin access
5. Limit login attempts (Limit Login Attempts Reloaded plugin)
6. Disable XML-RPC if not in use (a common attack vector)
7. Use a WAF (Web Application Firewall) — Cloudflare offers a free tier

3D Secure 2.0: Concrete Benefits

3D Secure 2.0 (Visa Secure, Mastercard Identity Check) brings major improvements over version 1:

• Frictionless authentication for low-risk transactions (no redirect required)
• Better mobile experience — biometric authentication supported
• Enriched data sharing with the issuing bank to reduce false positives
• Liability shift in case of fraud to the issuing bank (chargeback protection for merchants)

Ensure your gateway supports 3DS 2.0 and not just the legacy version 1 protocol.

Compliance with Law 09-08 (Data Protection)

Personal data collected at checkout (name, email, phone, address) is subject to Moroccan Law 09-08 on personal data protection. Ensure you:

• Display a clear privacy policy
• Obtain explicit consent for marketing communications
• Comply with CNDP (Commission Nationale de controle de la protection des Donnees a caractere Personnel) obligations

Stores processing significant data volumes may be required to register with the CNDP.

How ChariBaaS Can Help

Building a robust WooCommerce payment system for Morocco involves navigating technical requirements, regulatory expectations, and local consumer behaviors simultaneously. ChariBaaS through Chari Pay was built precisely to simplify this journey.

What ChariBaaS Brings to Your WooCommerce Store

Ready-to-use plugin Our official WooCommerce plugin installs in a few clicks and is configured in under 30 minutes — no developer required for a standard integration.

All Moroccan payment methods

• Visa and Mastercard (Moroccan and international cards)
• Maroc Pay (QR code, digital wallet)
• Bank transfer (for B2B)
• Cash on Delivery (COD) — unified dashboard management

Modern RESTful API for developers For stores with custom flows, our REST API provides clear documentation, an available PHP SDK, and an autonomous sandbox environment — no need to depend on a banking intermediary.

Built-in compliance 3D Secure 2.0, PCI-DSS Level 1, TLS 1.3 encryption — security and compliance are handled by ChariBaaS, not by you.

Unified dashboard Track all your WooCommerce transactions, refunds, and settlements from a single interface. One-click accounting export.

Fast settlement Funds settled to your Moroccan bank account within J+1 business day (depending on your plan).

French and Arabic support Our technical team responds in French and Arabic — no need to communicate in English with offshore support.

---

Ready to integrate online payments into your WooCommerce store? Explore our online payment service or read our API documentation.

Launching your store or migrating from another platform? Contact our team — we'll guide you through every step.

---

See also: Shopify Payment in Morocco | Payment Institution Regulation in Morocco | Digital Wallet and Maroc Pay