paymob-widget-alpha 1.0.6 → 1.0.7

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 (3) hide show
  1. package/README.md +15 -6
  2. package/main.css +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -26,24 +26,28 @@ Then instantiate the widget:
26
26
  new PaymobWidget({
27
27
  publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
28
28
  elementId: 'paymob-widget',
29
- amount: 1000,
29
+ amount: 1000, // amount in cents
30
30
  currency: 'EGP',
31
+ integrationId: 123456, // optional
31
32
  });
32
33
  ```
33
34
 
34
35
  ### Selectable mode example
35
36
 
36
- To let the user select an installment plan and handle the selection in your app, pass an `onSubmit` callback.
37
+ To let the user select an installment plan and handle the selection in your app, enable `selectPlan` and pass an `onSubmit` callback.
37
38
 
38
39
  ```js
39
40
  new PaymobWidget({
40
41
  publicKey: 'egy_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
41
42
  elementId: 'paymob-widget',
42
- amount: 1000,
43
+ amount: 1000, // amount in cents
43
44
  currency: 'EGP',
45
+ integrationId: 123, // optional
44
46
  theme: 'primary',
47
+ selectPlan: true,
45
48
  onSubmit: (plan) => {
46
- // `onSubmit` is called when the user selects an installment plan and clicks **Buy now** in the widget.
49
+ // `onSubmit` is called only in selectable mode (`selectPlan: true`),
50
+ // when the user selects an installment plan and clicks **Buy now** in the widget.
47
51
  // The callback receives a `plan` object (e.g. `id`, `tenure`, `amount`) so you can create an order / continue your checkout flow in your app.
48
52
  // plan = { id: 123, tenure: 12, amount: 250 }
49
53
  },
@@ -61,7 +65,9 @@ The full list of properties is as follows:
61
65
  | theme | `"primary" \| "light" \| "dark"` | No | Widget theme. Default: `"primary"`. |
62
66
  | amount | Number | No | Amount in major units. Default: `300`. |
63
67
  | currency | String | No | Currency code. Default: `"EGP"`. |
64
- | onSubmit | Function | No | Called when the user selects a plan and clicks **Buy now**. Receives `{ id, tenure, amount }`. |
68
+ | integrationId | Number | No | Paymob integration ID. If provided, it will be sent when fetching installment plans. |
69
+ | selectPlan | Boolean | No | If `true`, the widget allows selecting a plan and will show **Buy now** actions. Default: `false`. |
70
+ | onSubmit | Function | No | Selectable mode only (`selectPlan: true`). Called when the user selects a plan and clicks **Buy now**. Receives `{ id, tenure, amount }`. |
65
71
 
66
72
  ### `onSubmit` payload
67
73
 
@@ -103,9 +109,12 @@ The full list of properties is as follows:
103
109
  elementId: 'paymob-widget',
104
110
  amount: 1000,
105
111
  currency: 'EGP',
112
+ integrationId: 123456, // optional
106
113
  theme: 'primary', // "primary" | "light" | "dark"
114
+ selectPlan: true,
107
115
  onSubmit: (plan) => {
108
- // `onSubmit` is called when the user selects an installment plan and clicks **Buy now** in the widget.
116
+ // `onSubmit` is called only in selectable mode (`selectPlan: true`),
117
+ // when the user selects an installment plan and clicks **Buy now** in the widget.
109
118
  // The callback receives a `plan` object (e.g. `id`, `tenure`, `amount`) so you can create an order / continue your checkout flow in your app.
110
119
  // plan = { id: 123, tenure: 12, amount: 250 }
111
120
  },
package/main.css CHANGED
@@ -35,4 +35,4 @@
35
35
  .item-selector_item-selector__OE34y{display:flex;align-items:flex-start;border:.0625rem solid #eaecf0;border-radius:.75rem;background:#fff;transition:border-color .2s,box-shadow .2s;cursor:pointer;gap:.75rem}.item-selector_item-selector__OE34y[data-item-selector-size=sm]{padding:.75rem}.item-selector_item-selector__OE34y[data-item-selector-size=md]{padding:1rem}.item-selector_item-selector__OE34y[data-item-selector-checked=true]{border-color:#144dff}.item-selector_item-selector__OE34y[data-item-selector-hovered=true]:not([data-item-selector-disabled=true]){border-color:#144dff}.item-selector_item-selector__OE34y[data-item-selector-focused=true]:not([data-item-selector-disabled=true]){border-color:#144dff;box-shadow:0rem 0rem 0rem .25rem #b9caff,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.item-selector_item-selector__OE34y[data-item-selector-selected=true]:not([data-item-selector-disabled=true]){border-color:#144dff}.item-selector_item-selector__OE34y[data-item-selector-disabled=true]{border-color:#eaecf0;background:#fcfcfd;opacity:.8;cursor:not-allowed}.item-selector_item-selector__OE34y[data-item-selector-disabled=true][data-item-selector-disabled=true]:is(.item-selector_item-selector__OE34y[data-item-selector-disabled=true]) [data-checkbox-base-hovered=true]::before{border-color:#d0d5dd;background-color:#f9fafb}
36
36
  .accordion_accordion__ohrAi{border-radius:.5rem;padding:1rem}.accordion_accordion__chevron-holder__61mzP{margin-inline-start:auto}.accordion_accordion__chevron-holder__61mzP path{fill:#475467}.accordion_accordion__ohrAi summary{cursor:pointer;padding-inline:0;display:flex;gap:.75rem}.accordion_accordion__ohrAi[data-accordion-type=bordered_box]{border:.0625rem solid #eaecf0}.accordion_accordion__ohrAi[data-accordion-type=bordered_box] .accordion_accordion__chevron-holder__61mzP{height:1.5rem}.accordion_accordion__ohrAi[data-accordion-type=bordered_box] .accordion_accordion__chevron-holder__61mzP svg{width:1.5rem;height:1.5rem}.accordion_accordion__ohrAi[data-accordion-type=transparent_box]{width:100%}.accordion_accordion__ohrAi[data-accordion-type=transparent_box] .accordion_accordion__chevron-holder__61mzP{height:1.25rem}.accordion_accordion__ohrAi[data-accordion-type=transparent_box] .accordion_accordion__chevron-holder__61mzP svg{width:1.25rem;height:1.25rem}.accordion_accordion__ohrAi[data-accordion-header-alignment=start] summary{align-items:flex-start}.accordion_accordion__ohrAi[data-accordion-header-alignment=center] summary{align-items:center}.accordion_accordion__ohrAi[data-accordion-header-alignment=end] summary{align-items:flex-end}.accordion_accordion__ohrAi[data-accordion-with-divider=true][open][data-accordion-type=bordered_box] summary{border-bottom:.0625rem solid #eaecf0;margin-bottom:1rem;padding-bottom:1rem}.accordion_accordion__ohrAi[data-accordion-with-divider=true][open][data-accordion-type=transparent_box] summary{border-bottom:0;padding:1rem 1.5rem}.accordion_accordion__ohrAi[data-accordion-with-divider=true][open][data-accordion-type=transparent_box] .accordion_accordion__body__3Sf-3{padding:0 1.5rem 1rem}.accordion_accordion__ohrAi[data-accordion-with-divider=true]:not([open])[data-accordion-type=transparent_box] summary{border-bottom:.0625rem solid #eaecf0;padding:1rem 1.5rem}
37
37
  .button_btn__nkOul{width:fit-content;display:flex;align-items:center;justify-content:center;border-radius:.5rem;border:none;cursor:pointer;user-select:none}.button_btn__nkOul:disabled{cursor:not-allowed}.button_btn__label__jT32k{color:#667085}html[dir=ltr] .button_btn__label__jT32k,html[lang=en] .button_btn__label__jT32k{font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:400}html[dir=rtl] .button_btn__label__jT32k,html[lang=ar] .button_btn__label__jT32k{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1rem;font-weight:400}.button_btn__nkOul svg{width:100%;height:100%}html[dir=ltr] [data-btn-size=sm],html[lang=en] [data-btn-size=sm],html[dir=ltr] [data-btn-size=md],html[lang=en] [data-btn-size=md]{font-family:"Inter",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:600}html[dir=rtl] [data-btn-size=sm],html[lang=ar] [data-btn-size=sm],html[dir=rtl] [data-btn-size=md],html[lang=ar] [data-btn-size=md]{font-family:"Cairo",sans-serif;font-size:.875rem;font-style:normal;line-height:1.5rem;letter-spacing:.01rem;font-weight:700}[data-btn-size=sm]{gap:.5rem;padding:.25rem .75rem}[data-btn-size=sm]:has(>svg:only-child){padding:.5rem}[data-btn-size=sm] svg{width:1rem;height:1rem}[data-btn-size=md]{gap:.5rem;padding:.5rem .75rem}[data-btn-size=md]:has(>svg:only-child){padding:.625rem}[data-btn-size=md] svg{width:1.25rem;height:1.25rem}[data-btn-size=lg]{gap:.5rem;padding:.625rem 1rem}html[dir=ltr] [data-btn-size=lg],html[lang=en] [data-btn-size=lg]{font-family:"Inter",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:600}html[dir=rtl] [data-btn-size=lg],html[lang=ar] [data-btn-size=lg]{font-family:"Cairo",sans-serif;font-size:1rem;font-style:normal;line-height:1.75rem;font-weight:700}[data-btn-size=lg]:has(>svg:only-child){padding:.75rem}[data-btn-size=lg] svg{width:1.5rem;height:1.5rem}[data-btn-size=xl]{gap:.5rem;padding:.625rem 1.25rem}html[dir=ltr] [data-btn-size=xl],html[lang=en] [data-btn-size=xl]{font-family:"Inter",sans-serif;font-size:1.125rem;font-style:normal;line-height:2rem;font-weight:600}html[dir=rtl] [data-btn-size=xl],html[lang=ar] [data-btn-size=xl]{font-family:"Cairo",sans-serif;font-size:1.125rem;font-style:normal;line-height:2rem;font-weight:700}[data-btn-size=xl]:has(>svg:only-child){padding:.75rem}[data-btn-size=xl] svg{width:1.75rem;height:1.75rem}[data-btn-size="2xl"],[data-btn-size=full]{gap:.5rem;padding:.75rem 1.5rem}html[dir=ltr] [data-btn-size="2xl"],html[lang=en] [data-btn-size="2xl"],html[dir=ltr] [data-btn-size=full],html[lang=en] [data-btn-size=full]{font-family:"Inter",sans-serif;font-size:1.25rem;font-style:normal;line-height:2.25rem;font-weight:600}html[dir=rtl] [data-btn-size="2xl"],html[lang=ar] [data-btn-size="2xl"],html[dir=rtl] [data-btn-size=full],html[lang=ar] [data-btn-size=full]{font-family:"Cairo",sans-serif;font-size:1.25rem;font-style:normal;line-height:2.25rem;font-weight:700}[data-btn-size="2xl"]:has(>svg:only-child),[data-btn-size=full]:has(>svg:only-child){padding:.875rem}[data-btn-size="2xl"] svg,[data-btn-size=full] svg{width:2rem;height:2rem}[data-btn-size=full]{width:100%}[data-btn-variant=link]{padding:0}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]),.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]){color:#fff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]) path,.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]) path{fill:#fff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]) circle,.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]) circle{stroke:#fff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]){background-color:#144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]):hover{background-color:#103ecc}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]):focus{background-color:#144dff;box-shadow:0rem 0rem 0rem .25rem #b9caff,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=contained]):disabled{background-color:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):hover){background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled){color:#144dff;border:.0625rem solid #144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled) path{fill:#144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):hover{background-color:#e8edff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):focus{box-shadow:0rem 0rem 0rem .25rem #b9caff,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled{color:#a1b8ff;border:.0625rem solid #a1b8ff;background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled path{fill:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=outlined]):disabled circle{stroke:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]){background-color:rgba(0,0,0,0);border:none}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled){color:#144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled) path{fill:#144dff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):hover{color:#103ecc}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):hover path{fill:#103ecc}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled{color:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled path{fill:#a1b8ff}.button_btn__nkOul:is([data-btn-color=primary][data-btn-variant=link]):disabled circle{stroke:#a1b8ff}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):hover){background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled){color:#344054;border:.0625rem solid #d0d5dd}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled) path{fill:#344054}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):hover{background-color:#f2f4f7}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):focus{box-shadow:0rem 0rem 0rem .25rem #f2f4f7,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled{color:#d0d5dd;border:.0625rem solid #eaecf0;background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled path{fill:#d0d5dd}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=outlined]):disabled circle{stroke:#d0d5dd}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]){background-color:rgba(0,0,0,0);border:none}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled){color:#475467}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled) path{fill:#475467}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):hover{color:#344054}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):hover path{fill:#344054}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled{color:#98a2b3}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled path{fill:#98a2b3}.button_btn__nkOul:is([data-btn-color=secondary][data-btn-variant=link]):disabled circle{stroke:#98a2b3}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]){background-color:#cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]):hover{background-color:#990d31}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]):focus{background-color:#cc1142;box-shadow:0rem 0rem 0rem .25rem #ffb9cb,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=contained]):disabled{background-color:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):hover){background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled){color:#cc1142;border:.0625rem solid #cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled) path{fill:#cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):hover{background-color:#ffe8ee}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):focus{box-shadow:0rem 0rem 0rem .25rem #ffb9cb,0rem .0625rem .125rem 0rem rgba(16,24,40,.05)}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled{color:#ffa1ba;border:.0625rem solid #ffa1ba;background-color:rgba(0,0,0,0)}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled path{fill:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=outlined]):disabled circle{stroke:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]){background-color:rgba(0,0,0,0);border:none}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled){color:#cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):hover):not(.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled) path{fill:#cc1142}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):hover{color:#990d31}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):hover path{fill:#990d31}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled{color:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled path{fill:#ffa1ba}.button_btn__nkOul:is([data-btn-color=danger][data-btn-variant=link]):disabled circle{stroke:#ffa1ba}
38
- .moda_item__YfVFi [class*=checkbox-wrapper]{width:100% !important}.moda_button__5O3E3{width:100%}.moda_button__5O3E3 button{width:100% !important;min-width:100% !important}@media(max-width: 355px){.moda_hideUnder355__xkCFd{display:none !important}}@media(max-width: 279px){.moda_hideUnder279__RWnMV{display:none !important}}@media(max-width: 360px){.moda_hideUnder360__-0Wab{display:none !important}}.moda_interestWrapper__4AY28{width:100px;height:100px;overflow:hidden;flex-shrink:0}@media(max-width: 387px){.moda_interestWrapper__4AY28{width:80px;height:80px}}@media(max-width: 362px){.moda_interestWrapper__4AY28{width:70px;height:70px}}.moda_interestImage__Bhrz4{width:100%;height:100%;object-fit:contain}
38
+ .moda_item__YfVFi [class*=checkbox-wrapper]{width:100% !important}.moda_button__5O3E3{width:100%}.moda_button__5O3E3 button{width:100% !important;min-width:100% !important}@media(max-width: 355px){.moda_hideUnder355__xkCFd{display:none !important}}@media(max-width: 279px){.moda_hideUnder279__RWnMV{display:none !important}}@media(max-width: 360px){.moda_hideUnder360__-0Wab{display:none !important}}.moda_interestWrapper__4AY28{width:100px;height:100px;overflow:hidden;flex-shrink:0}@media(max-width: 403px){.moda_interestWrapper__4AY28{width:70px;height:70px}}.moda_interestImage__Bhrz4{width:100%;height:100%;object-fit:contain}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "paymob-widget-alpha",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "keywords": ["paymob","widget","paymob-widget"],
5
5
  "main": "./main.js",
6
6
  "license": "MIT",