paymob-widget-alpha
v1.0.11
Published
Paymob Installments Widget that can be embedded in any web page to display **0% interest plans** and (optionally) let the user select a plan.
Readme
paymob-widget-alpha
Paymob Installments Widget that can be embedded in any web page to display 0% interest plans and (optionally) let the user select a plan.
Installing
CDN
Using jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/main.js" type="module"></script>Usage
Create a container element in your page:
<div id="paymob-widget"></div>Then instantiate the widget:
new PaymobWidget({
publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
elementId: 'paymob-widget',
amount: 1000, // amount in cents
currency: 'EGP',
integrationId: 123, // optional
});Selectable mode example
To let the user select an installment plan and handle the selection in your app, enable customerCanSelect and pass an onSubmit callback.
new PaymobWidget({
publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
elementId: 'paymob-widget',
amount: 1000, // amount in cents
currency: 'EGP',
integrationId: 123, // optional
theme: 'primary',
customerCanSelect: true, // Enable the customer to select a plan.
onSubmit: (plan) => {
// `onSubmit` is called when the user clicks **Buy now**.
// In selectable mode (`customerCanSelect: true`), `plan` will be provided after the user selects a plan.
// plan = { id: 123, tenure: 12, amount: 250 }
// In non-selectable mode (`customerCanSelect: false`), `onSubmit` is called with no payload.
},
});Properties
The full list of properties is as follows:
| Property | Type | Required | Definition |
| --- | --- | --- | --- |
| publicKey | String | Yes | Your public key (used to resolve API base URL and authenticate requests). |
| elementId | String | Yes | ID of the HTML element where the widget will be rendered. |
| theme | "primary" \| "light" \| "dark" | No | Widget theme. Default: "primary". |
| amount | Number | No | Amount in major units. Default: 300. |
| currency | String | No | Currency code. Default: "EGP". |
| integrationId | Number | No | Paymob integration ID. If provided, it will be sent when fetching installment plans. |
| customerCanSelect | Boolean | No | If true, the widget allows selecting a plan and will show Buy now actions. Default: false. |
| onSubmit | Function | No | Called when the user clicks Buy now. In selectable mode (customerCanSelect: true), it receives { id, tenure, amount }. In non-selectable mode (customerCanSelect: false), it is called with no payload. |
onSubmit payload
{
id: string | number, // installment plan id
tenure: number, // number of months
amount: number // monthly amount
}Full HTML example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Paymob Widget Example</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#paymob-widget {
width: 100%;
margin: 10% auto 0;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div id="paymob-widget"></div>
<script src="https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/main.js" type="module"></script>
<script>
window.onload = () => {
new PaymobWidget({
publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
elementId: 'paymob-widget',
amount: 1000,
currency: 'EGP',
integrationId: 123, // optional
theme: 'primary', // "primary" | "light" | "dark"
customerCanSelect: true, // Enable the customer to select a plan.
onSubmit: (plan) => {
// `onSubmit` is called when the user clicks **Buy now**.
// In selectable mode (`customerCanSelect: true`), `plan` will be provided after the user selects a plan.
// plan = { id: 123, tenure: 12, amount: 250 }
// In non-selectable mode (`customerCanSelect: false`), `onSubmit` is called with no payload.
},
});
};
</script>
</body>
</html>Notes
- Rendering: The widget renders a Installment Widget into your
elementIdcontainer. - Isolation: UI is rendered inside a Shadow DOM wrapper to reduce CSS conflicts with the host page.