paymob-widget-alpha 1.0.6 → 1.0.8
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.
- package/README.md +21 -10
- package/main.css +1 -1
- package/main.js +2 -2
- 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
|
|
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
|
-
|
|
|
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
|
|
|
@@ -84,10 +90,12 @@ The full list of properties is as follows:
|
|
|
84
90
|
<base href="/" />
|
|
85
91
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
86
92
|
<style>
|
|
87
|
-
#
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
93
|
+
#paymob-widget {
|
|
94
|
+
width: 100%;
|
|
95
|
+
}
|
|
96
|
+
body {
|
|
97
|
+
margin: 0;
|
|
98
|
+
}
|
|
91
99
|
</style>
|
|
92
100
|
</head>
|
|
93
101
|
|
|
@@ -103,9 +111,12 @@ The full list of properties is as follows:
|
|
|
103
111
|
elementId: 'paymob-widget',
|
|
104
112
|
amount: 1000,
|
|
105
113
|
currency: 'EGP',
|
|
114
|
+
integrationId: 123456, // optional
|
|
106
115
|
theme: 'primary', // "primary" | "light" | "dark"
|
|
116
|
+
selectPlan: true,
|
|
107
117
|
onSubmit: (plan) => {
|
|
108
|
-
// `onSubmit` is called
|
|
118
|
+
// `onSubmit` is called only in selectable mode (`selectPlan: true`),
|
|
119
|
+
// when the user selects an installment plan and clicks **Buy now** in the widget.
|
|
109
120
|
// 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
121
|
// plan = { id: 123, tenure: 12, amount: 250 }
|
|
111
122
|
},
|
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:
|
|
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/main.js
CHANGED