Overview

Outcome - Understand the checkout experiences supported by Paymob, and know when to use Unified Checkout vs. Pixel.

Paymob offers two flexible checkout experiences to help you accept payments online. Each experience supports different merchant needs and integration preferences, while both rely on Paymob’s Intention API as the initial step.

Checkout Options

Unified Checkout

Unified Checkout is Paymob’s redirect-based payment experience. When a customer is ready to pay, you redirect them to Paymob’s hosted checkout page, where they enter their payment details and complete the transaction.

The flow generally involves creating a payment intention, then directing the customer’s browser to the hosted checkout using the generated client secret

Pixel

Pixel is Paymob’s JavaScript SDK that enables an embedded checkout experience directly on your site or application. Instead of redirecting the customer to a separate page, Pixel allows you to integrate payment elements inside your own UI.

Pixel is ideal for:

• Seamless, branded checkout experiences
• Embedded Card, Apple Pay, and Google Pay
• Businesses that want checkout UI inside their website without redirection

Pixel accepts configuration (such as payment methods and an HTML container ID) and uses the client secret from the previously created intention to render the payment UI in place.

How They Work

Both checkout experiences share the same initial requirement:

1. Create an intention Use the intention API to specify the payment amount, currency, and available methods. This returns a client secret that is unique to that payment attempt.
2. Render checkout
3. Unified Checkout: Redirect the customer to a hosted payment page using the client secret.
4. Pixel: Embed the payment UI inside your site using the SDK and client secret.

Choosing Between Unified Checkout and Pixel