paymob-widget-alpha 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +41 -31
  2. package/main.css +1 -0
  3. package/main.js +468 -423
  4. package/package.json +1 -1
  5. package/styles.css +2 -2
  6. package/Gotham-Bold.otf +0 -0
  7. package/Gotham-Light.otf +0 -0
  8. package/Gotham-Medium.otf +0 -0
  9. package/assets/fonts/Gotham/Gotham-Bold.otf +0 -0
  10. package/assets/fonts/Gotham/Gotham-BoldItalic.otf +0 -0
  11. package/assets/fonts/Gotham/Gotham-Book.otf +0 -0
  12. package/assets/fonts/Gotham/Gotham-BookItalic.otf +0 -0
  13. package/assets/fonts/Gotham/Gotham-Light.otf +0 -0
  14. package/assets/fonts/Gotham/Gotham-LightItalic.otf +0 -0
  15. package/assets/fonts/Gotham/Gotham-Medium.otf +0 -0
  16. package/assets/fonts/Gotham/Gotham-MediumItalic.otf +0 -0
package/README.md CHANGED
@@ -1,30 +1,15 @@
1
- # `paymob-widget`
1
+ # `paymob-widget-alpha`
2
2
  Paymob Installments Widget that can be embedded in any web page to display **0% interest plans** and (optionally) let the user select a plan.
3
3
 
4
4
  ## Installing
5
5
 
6
- ### Package manager
7
-
8
- Using npm:
9
-
10
- ```bash
11
- $ npm install paymob-widget --save
12
- ```
13
-
14
- Once the package is installed, you can import the library using `import`:
15
-
16
- ```js
17
- import PaymobWidget, { PaymobWidget as PaymobWidgetClass } from 'paymob-widget';
18
- ```
19
-
20
- > **Note**: The default export and the named `PaymobWidget` export both point to the same class.
21
6
 
22
7
  ### CDN
23
8
 
24
9
  Using jsDelivr:
25
10
 
26
11
  ```html
27
- <script src="https://cdn.jsdelivr.net/npm/paymob-widget@latest/main.js" type="module"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/main.js" type="module"></script>
28
13
  ```
29
14
 
30
15
  ## Usage
@@ -43,7 +28,6 @@ new PaymobWidget({
43
28
  elementId: 'paymob-widget',
44
29
  amount: 1000,
45
30
  currency: 'EGP',
46
- theme: 'primary',
47
31
  });
48
32
  ```
49
33
 
@@ -60,10 +44,6 @@ new PaymobWidget({
60
44
  theme: 'primary',
61
45
  onSubmit: (plan) => {
62
46
  // plan = { id, tenure, amount }
63
- console.log('[PaymobWidget] onSubmit', plan);
64
-
65
- // Example: redirect to your checkout with selected plan
66
- // window.location.href = `/checkout?planId=${plan.id}&tenure=${plan.tenure}`;
67
47
  },
68
48
  });
69
49
  ```
@@ -76,11 +56,9 @@ The full list of properties is as follows:
76
56
  | --- | --- | --- | --- |
77
57
  | publicKey | String | Yes | Your public key (used to resolve API base URL and authenticate requests). |
78
58
  | elementId | String | Yes | ID of the HTML element where the widget will be rendered. |
79
- | clientSecret | String | No | If provided, it can be used (with `publicKey`) to resolve the correct API base URL. |
80
59
  | theme | `"primary" \| "light" \| "dark"` | No | Widget theme. Default: `"primary"`. |
81
60
  | amount | Number | No | Amount in major units. Default: `300`. |
82
61
  | currency | String | No | Currency code. Default: `"EGP"`. |
83
- | integrationId | Number | No | Optional integration id used when fetching installment plans. |
84
62
  | onSubmit | Function | No | Called when the user selects a plan and clicks **Buy now**. Receives `{ id, tenure, amount }`. |
85
63
 
86
64
  ### `onSubmit` payload
@@ -93,6 +71,45 @@ The full list of properties is as follows:
93
71
  }
94
72
  ```
95
73
 
74
+ ### Full HTML example
75
+
76
+ ```html
77
+ <!DOCTYPE html>
78
+ <html lang="en">
79
+ <head>
80
+ <meta charset="utf-8" />
81
+ <title>Paymob Widget Example</title>
82
+ <base href="/" />
83
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
84
+ <style>
85
+ #example {
86
+ width: 80%;
87
+ margin: 10% auto 0;
88
+ }
89
+ </style>
90
+ </head>
91
+
92
+ <body>
93
+ <div id="paymob-widget"></div>
94
+
95
+ <script src="https://cdn.jsdelivr.net/npm/paymob-widget-alpha@latest/main.js" type="module" ></script>
96
+
97
+ <script>
98
+ new PaymobWidget({
99
+ publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
100
+ elementId: 'paymob-widget',
101
+ amount: 1000,
102
+ currency: 'EGP',
103
+ theme: 'primary', // "primary" | "light" | "dark"
104
+ onSubmit: (plan) => {
105
+ // plan = { id, tenure, amount }
106
+ },
107
+ });
108
+ </script>
109
+ </body>
110
+ </html>
111
+ ```
112
+
96
113
  ## Notes
97
114
 
98
115
  - **Rendering**: The widget renders a React app into your `elementId` container.
@@ -106,10 +123,3 @@ The full list of properties is as follows:
106
123
  - **Container not found**: Ensure an element exists with the same id passed in `elementId`.
107
124
  - **No plans available**: Verify `publicKey`, `currency`, `amount`, and that installment plans exist for the given product/amount.
108
125
 
109
- ## Development
110
-
111
- Run unit tests:
112
-
113
- ```bash
114
- $ nx test paymob_widget
115
- ```
package/main.css CHANGED
@@ -28,6 +28,7 @@
28
28
  @import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap);
29
29
  @import url(https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap);
30
30
  @import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap);
31
+ @keyframes modal_slideIn__uUuXp{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes modal_slideUp__2GwQS{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.modal_root__sfoqg{position:fixed;inset:0;z-index:10000}.modal_rootMobile__wzN8Q{display:flex;justify-content:flex-end;align-items:stretch}.modal_rootDesktop__CiQty{display:block}.modal_overlay__D1Rh8{position:absolute;inset:0;z-index:0;cursor:pointer;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.modal_panel__odrOu{position:relative;z-index:1;width:100%}.modal_panelMobile__Pyh\+r{margin-left:0;margin-right:0;margin-top:auto;margin-bottom:0;height:80vh;max-height:80vh;max-width:100%;animation:modal_slideUp__2GwQS .3s ease-out}.modal_panelDesktop__YwVRJ{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;height:100%;max-height:100%;max-width:550px;animation:modal_slideIn__uUuXp .3s ease-out}.modal_closeFloatingMobile__Z3pkR{position:absolute;left:50%;top:-50px;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.18);z-index:2}.modal_closeFloatingDesktop__3W3cX{position:absolute;left:-45px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.18)}.modal_dialog__fapVk{height:100%;max-height:100%;width:100%;display:flex;flex-direction:column;background-color:#fff}.modal_dialogMobile__awaMW{overflow:hidden;box-shadow:0 -4px 24px rgba(0,0,0,.15);border-radius:24px 24px 0 0}.modal_dialogDesktop__z8dIY{overflow:visible;box-shadow:-4px 0 24px rgba(0,0,0,.15);border-radius:0}.modal_dialog__fapVk[data-theme=primary]{--modal-header-bg: #144dff;--modal-title-color: #ffffff;--modal-powered-color: #d0d5dd}.modal_dialog__fapVk[data-theme=dark]{--modal-header-bg: #081f66;--modal-title-color: #ffffff;--modal-powered-color: #d0d5dd}.modal_dialog__fapVk[data-theme=light]{--modal-header-bg: #e8edff;--modal-title-color: #101828;--modal-powered-color: #667085}.modal_header__oe722{position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 16px;background-color:var(--modal-header-bg);color:var(--modal-title-color)}.modal_title__0XpA9{font-size:14px;font-weight:600}.modal_poweredRow__VXaw8{display:flex;align-items:flex-end;gap:4px}.modal_poweredLabel__a3hHx{font-size:12px;line-height:1;display:flex;align-items:flex-end;color:var(--modal-powered-color)}.modal_logo__jcucM{height:17px;object-fit:contain}.modal_body__SQUnU{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}.modal_footer__GKw2U{border-top:1px solid #f3f4f6;padding:16px}.modal_closeIcon__RJJ9p{width:10px;height:10px}
31
32
  .badge_badge__zVreJ{width:fit-content;height:fit-content;display:flex;align-items:center;justify-content:center;border-radius:1rem;gap:.25rem;mix-blend-mode:multiply}.badge_badge__zVreJ svg,.badge_badge__zVreJ img{width:1rem;height:1rem}.badge_badge__zVreJ img{border-radius:50%}[data-badge-size=sm]{padding:0 .5rem}html[dir=ltr] [data-badge-size=sm],html[lang=en] [data-badge-size=sm]{font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:500}html[dir=rtl] [data-badge-size=sm],html[lang=ar] [data-badge-size=sm]{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:600}[data-badge-size=md],[data-badge-size=lg]{padding:0 .75rem}html[dir=ltr] [data-badge-size=md],html[lang=en] [data-badge-size=md]{font-family:"Inter",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:500}html[dir=rtl] [data-badge-size=md],html[lang=ar] [data-badge-size=md]{font-family:"Cairo",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:600}html[dir=ltr] [data-badge-size=lg],html[lang=en] [data-badge-size=lg]{font-family:"Inter",sans-serif;font-size:1.125rem;font-style:normal;line-height:2rem;font-weight:500}html[dir=rtl] [data-badge-size=lg],html[lang=ar] [data-badge-size=lg]{font-family:"Cairo",sans-serif;font-size:1.125rem;font-style:normal;line-height:2rem;font-weight:600}[data-badge-color=gray],[data-badge-color=grey]{color:#344054;background-color:#f2f4f7}[data-badge-color=gray]:not([data-badge-type=country]):not([data-badge-type=avatar]) path,[data-badge-color=grey]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#344054 !important}[data-badge-color=primary]{color:#144dff;background-color:#e8edff}[data-badge-color=primary]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#144dff !important}[data-badge-color=green]{color:#038f6e;background-color:#e6f7f3}[data-badge-color=green]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#038f6e !important}[data-badge-color=yellow]{color:#dc6803;background-color:#fffaeb}[data-badge-color=yellow]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#dc6803 !important}[data-badge-color=red]{color:#cc1142;background-color:#ffe8ee}[data-badge-color=red]:not([data-badge-type=country]):not([data-badge-type=avatar]) path{fill:#cc1142 !important}
32
33
  .checkbox-base_checkbox-base__EOx8c{position:relative;display:block;display:flex;align-items:center;justify-content:center;flex-shrink:0}.checkbox-base_checkbox-base__input__yOneo{position:absolute;opacity:0;width:100%;height:100%;margin:0}.checkbox-base_checkbox-base__input__yOneo:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #d0d5dd;background-color:#f9fafb;cursor:not-allowed}.checkbox-base_checkbox-base__input__yOneo:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:after{cursor:not-allowed;border-color:rgba(0,0,0,0)}.checkbox-base_checkbox-base__input__yOneo:checked+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #144dff;background-color:#144dff}.checkbox-base_checkbox-base__input__yOneo:checked+.checkbox-base_checkbox-base__checkbox__cRTaH:after{border-color:#fff}.checkbox-base_checkbox-base__input__yOneo:checked:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #d0d5dd;background-color:#f9fafb}.checkbox-base_checkbox-base__input__yOneo:checked:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:after{background-color:rgba(0,0,0,0);border-color:#d0d5dd}.checkbox-base_checkbox-base__checkbox__cRTaH{cursor:pointer;display:inline-block;position:relative;width:100%;height:100%}.checkbox-base_checkbox-base__checkbox__cRTaH:before{content:"";box-sizing:border-box;position:absolute;width:100%;height:100%;border:.0625rem solid #d0d5dd;background-color:#fff;transition:200ms linear}.checkbox-base_checkbox-base__checkbox__cRTaH:after{content:"";position:absolute;top:50%;left:50%;transition:200ms linear}html[dir=ltr] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=en] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-end:solid rgba(0,0,0,0);border-block-end:solid rgba(0,0,0,0)}html[dir=rtl] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=ar] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-start:solid rgba(0,0,0,0);border-block-end:solid rgba(0,0,0,0)}.checkbox-base_checkbox-base__checkbox__cRTaH:hover:before,.checkbox-base_checkbox-base__checkbox__cRTaH[data-checkbox-base-hovered=true]:before{border:.0625rem solid #144dff;background-color:#e8edff}.checkbox-base_checkbox-base__checkbox__cRTaH:focus:before,.checkbox-base_checkbox-base__checkbox__cRTaH[data-checkbox-base-focused=true]:before{border:.0625rem solid #144dff;background-color:#fff}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{width:18.75%;height:43.75%;transform:translate(-50%, -60%) rotate(45deg)}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-icon=dash] .checkbox-base_checkbox-base__checkbox__cRTaH:after{width:45%;height:10%;transform:translate(-50%, -65%)}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm]{width:1rem;height:1rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm] .checkbox-base_checkbox-base__checkbox__cRTaH:before{border-radius:.25rem}html[dir=ltr] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=en] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-end-width:.0625rem;border-block-end-width:.0625rem}html[dir=rtl] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=ar] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-start-width:.0625rem;border-block-end-width:.0625rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=sm][data-checkbox-base-icon=dash] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-width:0;border-block-end-width:.0625rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md]{width:1.25rem;height:1.25rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md] .checkbox-base_checkbox-base__checkbox__cRTaH:before{border-radius:.375rem}html[dir=ltr] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=en] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-end-width:.125rem;border-block-end-width:.125rem}html[dir=rtl] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after,html[lang=ar] .checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=tick] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-inline-start-width:.125rem;border-block-end-width:.125rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-size=md][data-checkbox-base-icon=dash] .checkbox-base_checkbox-base__checkbox__cRTaH:after{border-width:0;border-block-end-width:.125rem}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__checkbox__cRTaH:before{border-radius:50%}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__checkbox__cRTaH:after{width:40%;height:40%;border-radius:50%;background-color:rgba(0,0,0,0);transform:translate(-50%, -50%);border:none}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__input__yOneo:checked+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #144dff;background-color:#144dff}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__input__yOneo:checked+.checkbox-base_checkbox-base__checkbox__cRTaH:after{background-color:#fff}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__input__yOneo:checked:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:before{border:.0625rem solid #d0d5dd;background-color:#f9fafb}.checkbox-base_checkbox-base__EOx8c[data-checkbox-base-type=radio] .checkbox-base_checkbox-base__input__yOneo:checked:disabled+.checkbox-base_checkbox-base__checkbox__cRTaH:after{background-color:#d0d5dd}
33
34
  .checkbox_checkbox-wrapper__zjCk3{width:fit-content;display:flex;gap:.5rem;cursor:pointer}.checkbox_checkbox-wrapper__text-box__XGApL{display:flex;flex-direction:column;gap:.5rem}.checkbox_checkbox-wrapper__text-box__row__2k\+Wo{display:flex;align-items:center;gap:.5rem}.checkbox_checkbox-wrapper__text-box__text__JezoX{color:#344054}.checkbox_checkbox-wrapper__text-box__badge__HmR8b{margin-inline-start:.25rem}.checkbox_checkbox-wrapper__text-box__hint-text__FYD4b{color:#475467;font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.125rem;letter-spacing:.01rem;font-weight:400}html[dir=rtl] .checkbox_checkbox-wrapper__text-box__hint-text__FYD4b,html[lang=ar] .checkbox_checkbox-wrapper__text-box__hint-text__FYD4b{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1.125rem;letter-spacing:.01rem;font-weight:400}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-disabled=true]{pointer-events:none}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=sm] .checkbox_checkbox-wrapper__text-box__text__JezoX{line-height:.8rem !important;font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:500}html[dir=rtl] .checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=sm] .checkbox_checkbox-wrapper__text-box__text__JezoX,html[lang=ar] .checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=sm] .checkbox_checkbox-wrapper__text-box__text__JezoX{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:600}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=md] .checkbox_checkbox-wrapper__text-box__text__JezoX{line-height:.82rem !important;font-family:"Inter",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:500}html[dir=rtl] .checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=md] .checkbox_checkbox-wrapper__text-box__text__JezoX,html[lang=ar] .checkbox_checkbox-wrapper__zjCk3[data-checkbox-size=md] .checkbox_checkbox-wrapper__text-box__text__JezoX{font-family:"Cairo",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:600}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-alignment=start]{align-items:flex-start}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-alignment=end]{align-items:flex-end}.checkbox_checkbox-wrapper__zjCk3[data-checkbox-alignment=center]{align-items:center}.checkbox_checkbox-wrapper__zjCk3:has(div[class*=badge]){align-items:flex-start}.checkbox_checkbox-wrapper__zjCk3:has(div[class*=badge]) div[data-checkbox-base-size]{margin-block-start:.25rem}