Getting Started

Pixel (Embedded)

Outcome - Integrate Paymob's pre-built UI (Pixel) in the merchant's checkout.

Last Updated Date - September 7, 2026

Pre-Requisites

Integrate the Intention API as described in the documentation for the Create Payment Intention API.
Include the following script and stylesheets in your HTML file

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.css">
<script src="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.js" type="module"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.css">
<script src="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.js" type="module"></script>

Usage Overview

Implementation begins by creating a new Pixel instance with configuration parameters including public key, client secret, payment methods, and styling options.

The Pixel SDK supports three payment methods: card payments, Google Pay, and Apple Pay. Merchants can customize the user experience through callback functions like beforePaymentComplete, afterPaymentComplete, and onPaymentCancel.

Properties

Property name

Type

Definition

publicKey	String	To know how to get your public key, please check the Getting Integration Credentials page.
clientSecret	String	Once you fire the Intention API, you will receive "client_secret" in the API Response, which will be used in the Pixel SDK. Client Secret is unique for each Order, and it expires in an hour.
paymentMethods	Array of Strings	Pass "card" for Card Payments, "google-pay" for Google Pay, and "apple-pay" for Apple Pay.
elementId	String	ID of the HTML element where the checkout pixel will be embedded.
disablePay	Boolean	Pass true. If you don't want to use Paymob's Pay Button for Card Payment, in this case, you will dispatchEvent with the name (payFromOutside) to fire the pay.
showSaveCard	Boolean	If this option is set to TRUE, users will have the option to save their card details for future payments.
forceSaveCard	Boolean	If this option is set to true, the user's card details will be saved automatically without requiring their consent
afterPaymentComplete	Function	This Functionality will be processed after payment is processed by Paymob. Check the full example below.
customStyle	Object	You can pass custom styles, including Arabic/RTL localization (set Direction: 'rtl' plus Arabic text objects); for more details, check the full example below.

Events

We have one event that will be used if you want to trigger the payment from a custom Pay button, not Pixel's Pay button:

Event

Definition

payFromOutside

In case you need to use your own pay button instead of the SDK pay button.

Functions

Function

Definition

cardValidationChanged	This Functionality will be processed whenever the card validation status changes.
beforePaymentComplete	Merchants can implement their own custom logic or functions before the payment is processed by Paymob.
afterPaymentComplete	This Functionality will be processed after the payment is processed by Paymob.
onPaymentCancel	This function applies exclusively to Apple Pay. Merchants can implement their own custom logic to handle scenarios where a user cancels the Apple Pay payment by closing the Apple Pay SDK.
updateIntentionData	Update the intention data within the SDK if any changes occur to the intention. For more details, refer to the Intention Update API documentation.

Full sample

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pixel Experience</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/styles.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.css">
  <style>
    .content {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: center;
      margin-top: 2rem;
    }
    #paymob-elements {
      width: 50%;
    }
    #payFromOutsideButton {
      padding: 0.5rem;
      background-color: blue;
      color: white;
      border-radius: 0.2rem;
    }
  </style>
</head>
<body>
  <div class="header" style="padding: 1rem; background-color: rgb(233, 255, 207);">
    Hello in my website
  </div>
  <div class="wrapper">
    <div class="content">
      <div id="paymob-elements"></div>
      <button id="payFromOutsideButton">Pay From Outside Button</button>
    </div>
  </div>
  <div class="footer"></div>
  <script src="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.js" type="module"></script>
  <script type="module">
    const BASE_URL = {
      "EGY": "https://accept.paymob.com/",
      "OMN": "https://oman.paymob.com/",
      "KSA": "https://ksa.paymob.com/",
      "UAE": "https://uae.paymob.com/"
    }
    const CONFIG = {
      PUBLIC_KEY: 'egy_pk_test_yVnwxxxxxxxxxxxxxxxxxxxxxxx',
      SECRET_KEY: 'egy_sk_test_3f1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      CLIENT_SECRET: 'egy_csk_test_cad1xxxxxxxxxxxxxxxxxxxxx',
      INTENTION_API_URL: BASE_URL.EGY + 'v1/intention/'
    };
    let pixel_instance = new Pixel({
      publicKey: CONFIG.PUBLIC_KEY,
      clientSecret: CONFIG.CLIENT_SECRET,
      paymentMethods: ['card', 'google-pay', 'apple-pay'],
      elementId: 'paymob-elements',
      disablePay: true,
      showSaveCard: false,
      forceSaveCard: true,
      beforePaymentComplete: async () => {
        console.log('Before payment start');
        console.log('Waiting for 5 seconds...');
        await new Promise(res => setTimeout(() => res(''), 5000));
        console.log('Before payment end');
      },
      afterPaymentComplete: async (response) => {
        console.log('After payment logic');
        console.log(response);
        await new Promise(res => setTimeout(() => res(''), 5000));
      },
      onPaymentCancel: () => {
        console.log('Payment has been canceled');
      },
      cardValidationChanged: (isValid) => {
        if (isValid === true) {
          button.style = "display: block;"
          console.log("valid");
        } else {
          button.style = "display: none;"
          console.log("not valid");
        }
      },
      customStyle: {
        Font_Family: 'Gotham',
        Font_Size_Label: '16',
        Font_Size_Input_Fields: '16',
        Font_Size_Payment_Button: '14',
        Font_Weight_Label: 400,
        Font_Weight_Input_Fields: 200,
        Font_Weight_Payment_Button: 600,
        Color_Container: '#FFF',
        Color_Border_Input_Fields: '#D0D5DD',
        Color_Border_Payment_Button: '#A1B8FF',
        Radius_Border: '8',
        Color_Disabled: '#A1B8FF',
        Color_Error: '#CC1142',
        Color_Primary: '#144DFF',
        Color_Input_Fields: '#FFF',
        Text_Color_For_Label: '#000',
        Text_Color_For_Payment_Button: '#FFF',
        Text_Color_For_Input_Fields: '#000',
        Color_For_Text_Placeholder: '#667085',
        Width_of_Container: '100%',
        Vertical_Padding: '40',
        Vertical_Spacing_between_components: '18',
        Container_Padding: '0',
        // --- Localization / RTL (Arabic) ---
        Direction: 'rtl',
        Label_Text: {
          cardLabel: "بيانات البطاقة",
          savedCardsLabel: 'البطاقات المحفوظة',
          saveCardConsentLabel: 'حفظ البطاقة',
          cardEndingLabel: 'تنتهي بـ'
        },
        Placeholder_Text: {
          holderName: 'الاسم علي البطاقة',
          cardNumber: 'رقم البطاقة',
          expiryDate: 'سنة / شهر',
          securityCode: '(CVV) الرمز الامني'
        },
        Error_Text: {
          cardNumber: {
            required: 'مطلوب رقم البطاقة',
            invalid: 'رقم البطاقة غير صحيح'
          },
          expiryDate: {
            required: 'مطلوب تاريخ انتهاء الصلاحية',
            invalid: 'تاريخ انتهاء الصلاحية غير صحيح'
          },
          securityCode: 'مطلوب الرمز الامني (CVV)',
          holderName: 'مطلوب اسم حامل البطاقة'
        },
        Button_Text: {
          viewSavedCardsBtn: 'عرض البطاقات المحفوظة',
          addNewCardBtn: 'إضافة بطاقة جديدة',
          payBtn: 'ادفع'
        },
        Hint_Text: {
          saveCardConsentHint: 'سيتم حفظ تفاصيل البطاقة لاستخدامها في المستقبل.',
          cvvModalTitle: 'رمز CVV',
          cvvVisaMastercardQuestion: 'هل لديك بطاقة ماستركارد أو فيزا؟',
          cvvVisaMastercardHint: 'هو رمز مكون من 3 أرقام موجود على ظهر البطاقة.',
          cvvAmexQuestion: 'هل لديك بطاقة أمريكان إكسبريس؟',
          cvvAmexHint: 'هو رمز مكون من 4 أرقام موجود في الجهة الأمامية فوق رقم البطاقة.'
        }
      }
    });
    const button = document.getElementById('payFromOutsideButton');
    button?.addEventListener('click', async function() {
      console.log('Updating payment intention...');
      const myHeaders = new Headers();
      myHeaders.append("Authorization", `Token ${CONFIG.SECRET_KEY}`);
      myHeaders.append("Content-Type", "application/json");
    });
  </script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pixel Experience</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/styles.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.css">
  <style>
    .content {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: center;
      margin-top: 2rem;
    }
    #paymob-elements {
      width: 50%;
    }
    #payFromOutsideButton {
      padding: 0.5rem;
      background-color: blue;
      color: white;
      border-radius: 0.2rem;
    }
  </style>
</head>
<body>
  <div class="header" style="padding: 1rem; background-color: rgb(233, 255, 207);">
    Hello in my website
  </div>
  <div class="wrapper">
    <div class="content">
      <div id="paymob-elements"></div>
      <button id="payFromOutsideButton">Pay From Outside Button</button>
    </div>
  </div>
  <div class="footer"></div>
  <script src="https://cdn.jsdelivr.net/npm/paymob-pixel@latest/main.js" type="module"></script>
  <script type="module">
    const BASE_URL = {
      "EGY": "https://accept.paymob.com/",
      "OMN": "https://oman.paymob.com/",
      "KSA": "https://ksa.paymob.com/",
      "UAE": "https://uae.paymob.com/"
    }
    const CONFIG = {
      PUBLIC_KEY: 'egy_pk_test_yVnwxxxxxxxxxxxxxxxxxxxxxxx',
      SECRET_KEY: 'egy_sk_test_3f1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      CLIENT_SECRET: 'egy_csk_test_cad1xxxxxxxxxxxxxxxxxxxxx',
      INTENTION_API_URL: BASE_URL.EGY + 'v1/intention/'
    };
    let pixel_instance = new Pixel({
      publicKey: CONFIG.PUBLIC_KEY,
      clientSecret: CONFIG.CLIENT_SECRET,
      paymentMethods: ['card', 'google-pay', 'apple-pay'],
      elementId: 'paymob-elements',
      disablePay: true,
      showSaveCard: false,
      forceSaveCard: true,
      beforePaymentComplete: async () => {
        console.log('Before payment start');
        console.log('Waiting for 5 seconds...');
        await new Promise(res => setTimeout(() => res(''), 5000));
        console.log('Before payment end');
      },
      afterPaymentComplete: async (response) => {
        console.log('After payment logic');
        console.log(response);
        await new Promise(res => setTimeout(() => res(''), 5000));
      },
      onPaymentCancel: () => {
        console.log('Payment has been canceled');
      },
      cardValidationChanged: (isValid) => {
        if (isValid === true) {
          button.style = "display: block;"
          console.log("valid");
        } else {
          button.style = "display: none;"
          console.log("not valid");
        }
      },
      customStyle: {
        Font_Family: 'Gotham',
        Font_Size_Label: '16',
        Font_Size_Input_Fields: '16',
        Font_Size_Payment_Button: '14',
        Font_Weight_Label: 400,
        Font_Weight_Input_Fields: 200,
        Font_Weight_Payment_Button: 600,
        Color_Container: '#FFF',
        Color_Border_Input_Fields: '#D0D5DD',
        Color_Border_Payment_Button: '#A1B8FF',
        Radius_Border: '8',
        Color_Disabled: '#A1B8FF',
        Color_Error: '#CC1142',
        Color_Primary: '#144DFF',
        Color_Input_Fields: '#FFF',
        Text_Color_For_Label: '#000',
        Text_Color_For_Payment_Button: '#FFF',
        Text_Color_For_Input_Fields: '#000',
        Color_For_Text_Placeholder: '#667085',
        Width_of_Container: '100%',
        Vertical_Padding: '40',
        Vertical_Spacing_between_components: '18',
        Container_Padding: '0',
        // --- Localization / RTL (Arabic) ---
        Direction: 'rtl',
        Label_Text: {
          cardLabel: "بيانات البطاقة",
          savedCardsLabel: 'البطاقات المحفوظة',
          saveCardConsentLabel: 'حفظ البطاقة',
          cardEndingLabel: 'تنتهي بـ'
        },
        Placeholder_Text: {
          holderName: 'الاسم علي البطاقة',
          cardNumber: 'رقم البطاقة',
          expiryDate: 'سنة / شهر',
          securityCode: '(CVV) الرمز الامني'
        },
        Error_Text: {
          cardNumber: {
            required: 'مطلوب رقم البطاقة',
            invalid: 'رقم البطاقة غير صحيح'
          },
          expiryDate: {
            required: 'مطلوب تاريخ انتهاء الصلاحية',
            invalid: 'تاريخ انتهاء الصلاحية غير صحيح'
          },
          securityCode: 'مطلوب الرمز الامني (CVV)',
          holderName: 'مطلوب اسم حامل البطاقة'
        },
        Button_Text: {
          viewSavedCardsBtn: 'عرض البطاقات المحفوظة',
          addNewCardBtn: 'إضافة بطاقة جديدة',
          payBtn: 'ادفع'
        },
        Hint_Text: {
          saveCardConsentHint: 'سيتم حفظ تفاصيل البطاقة لاستخدامها في المستقبل.',
          cvvModalTitle: 'رمز CVV',
          cvvVisaMastercardQuestion: 'هل لديك بطاقة ماستركارد أو فيزا؟',
          cvvVisaMastercardHint: 'هو رمز مكون من 3 أرقام موجود على ظهر البطاقة.',
          cvvAmexQuestion: 'هل لديك بطاقة أمريكان إكسبريس؟',
          cvvAmexHint: 'هو رمز مكون من 4 أرقام موجود في الجهة الأمامية فوق رقم البطاقة.'
        }
      }
    });
    const button = document.getElementById('payFromOutsideButton');
    button?.addEventListener('click', async function() {
      console.log('Updating payment intention...');
      const myHeaders = new Headers();
      myHeaders.append("Authorization", `Token ${CONFIG.SECRET_KEY}`);
      myHeaders.append("Content-Type", "application/json");
    });
  </script>
</body>
</html>

Sections

Pixel (Embedded)

Pre-Requisites

Usage Overview

Properties

Events

Functions

Full sample

Test Credentials

On this page