paymob-pixel-alpha 1.0.5 → 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.
- package/README.md +8 -10
- package/main.js +12 -1
- package/package.json +1 -1
- package/styles.css +9 -0
package/README.md
CHANGED
|
@@ -8,13 +8,13 @@ Paymob Web SDK, help our merchant to have the native payment experience.
|
|
|
8
8
|
Using npm:
|
|
9
9
|
|
|
10
10
|
```bash
|
|
11
|
-
$ npm install paymob-pixel --save
|
|
11
|
+
$ npm install paymob-pixel-alpha --save
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
Once the package is installed, you can import the library using `import`:
|
|
15
15
|
|
|
16
16
|
```js
|
|
17
|
-
import { Pixel } from 'paymob-pixel';
|
|
17
|
+
import { Pixel } from 'paymob-pixel-alpha';
|
|
18
18
|
``` -->
|
|
19
19
|
|
|
20
20
|
### CDN
|
|
@@ -22,9 +22,9 @@ import { Pixel } from 'paymob-pixel';
|
|
|
22
22
|
Using unpkg CDN:
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/styles.css">
|
|
26
|
-
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/main.css">
|
|
27
|
-
<script src="https://unpkg.com/paymob-pixel/main.js" type="module"></script>
|
|
25
|
+
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/styles.css">
|
|
26
|
+
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/main.css">
|
|
27
|
+
<script src="https://unpkg.com/paymob-pixel-alpha/main.js" type="module"></script>
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
|
|
@@ -54,7 +54,6 @@ The full list of properties is as follows:
|
|
|
54
54
|
| paymentMethods | Array of String | Pass card for Card Payments ,google-pay for Google Pay && apple-pay for Apple Pay. |
|
|
55
55
|
| elementId | String | ID of the HTML element where the checkout pixel will be embedded. |
|
|
56
56
|
| disablePay | Boolean | pass true If you don’t want to use Paymob’s Pay Button for Card Payment, in this case you will dispatchEvent with name (payFromOutside) to fire the pay. |
|
|
57
|
-
| hideCardHolderName | Boolean | If this parameter is set to true ,then Cardholder Name will be hidden for Card Payments. |
|
|
58
57
|
| showSaveCard | Boolean | If this option is set to TRUE, users will have the option to save their card details for future payment. |
|
|
59
58
|
| forceSaveCard | Boolean | If this option is set to true, the user's card details will be saved automatically without requiring their consent |
|
|
60
59
|
| beforePaymentComplete | Function | Merchants can implement their own custom logic or functions before the payment is processed by Paymob. check the full example below. |
|
|
@@ -73,14 +72,14 @@ The full list of properties is as follows:
|
|
|
73
72
|
<title>Pixels</title>
|
|
74
73
|
<base href="/">
|
|
75
74
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
76
|
-
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/styles.css">
|
|
77
|
-
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/main.css">
|
|
75
|
+
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/styles.css">
|
|
76
|
+
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/main.css">
|
|
78
77
|
</head>
|
|
79
78
|
<body>
|
|
80
79
|
<div style="position: absolute; width: 80%; margin-top: 10%;" id="example"></div>
|
|
81
80
|
<button id="payFromOutsideButton">Pay From Outside Button</button>
|
|
82
81
|
|
|
83
|
-
<script src="https://unpkg.com/paymob-pixel/main.js" type="module"></script>
|
|
82
|
+
<script src="https://unpkg.com/paymob-pixel-alpha/main.js" type="module"></script>
|
|
84
83
|
<script>
|
|
85
84
|
const button = document.getElementById('payFromOutsideButton');
|
|
86
85
|
button.addEventListener('click', function () {
|
|
@@ -97,7 +96,6 @@ The full list of properties is as follows:
|
|
|
97
96
|
showSaveCard: true,
|
|
98
97
|
forceSaveCard: true,
|
|
99
98
|
disablePay: true,
|
|
100
|
-
hideCardHolderName: true,
|
|
101
99
|
cardValidationChanged: (isValid) => {
|
|
102
100
|
console.log("Is valid ? ", isValid)
|
|
103
101
|
},
|
package/main.js
CHANGED
|
@@ -19845,6 +19845,7 @@ function CardElement({
|
|
|
19845
19845
|
};
|
|
19846
19846
|
const handlePaymentResponse = res => {
|
|
19847
19847
|
var _res$data, _res$data2;
|
|
19848
|
+
setShouldSubmitData(false);
|
|
19848
19849
|
const cardHolderInput = document.getElementById('name');
|
|
19849
19850
|
if (cardHolderInput) {
|
|
19850
19851
|
setTimeout(() => cardHolderInput.disabled = false, 1000);
|
|
@@ -19908,6 +19909,7 @@ function CardElement({
|
|
|
19908
19909
|
if (iframe && shouldSubmitData) {
|
|
19909
19910
|
const handlePay = async () => {
|
|
19910
19911
|
var _iframe$contentWindow;
|
|
19912
|
+
if (loading) return;
|
|
19911
19913
|
const cardHolderInput = document.getElementById('name');
|
|
19912
19914
|
if (cardHolderInput) {
|
|
19913
19915
|
cardHolderInput.disabled = true;
|
|
@@ -20021,6 +20023,7 @@ function CardElement({
|
|
|
20021
20023
|
setSelectedDeleteCard(card);
|
|
20022
20024
|
};
|
|
20023
20025
|
const handleSavedCardSubmit = async () => {
|
|
20026
|
+
if (loading) return;
|
|
20024
20027
|
setLoading(true);
|
|
20025
20028
|
if (onBeforePaymentComplete) {
|
|
20026
20029
|
const result = await onBeforePaymentComplete();
|
|
@@ -20113,6 +20116,14 @@ function CardElement({
|
|
|
20113
20116
|
onClick: handleViewSavedCards,
|
|
20114
20117
|
children: "View Saved Cards"
|
|
20115
20118
|
})]
|
|
20119
|
+
}), !isIframeLoaded && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
|
|
20120
|
+
className: "mx-auto my-16 flex items-center gap-4 [&_svg]:fill-gray-700",
|
|
20121
|
+
children: [/*#__PURE__*/(0,jsx_runtime.jsx)(LoaderViewTwo_Loader, {
|
|
20122
|
+
size: "2.5rem"
|
|
20123
|
+
}), /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
|
|
20124
|
+
style: customStyle == null ? void 0 : customStyle.label,
|
|
20125
|
+
children: "Loading Fast Payment Option..."
|
|
20126
|
+
})]
|
|
20116
20127
|
}), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
|
|
20117
20128
|
className: "[&>div:nth-child(even)]:w-[calc(100%-1px)]",
|
|
20118
20129
|
children: [/*#__PURE__*/(0,jsx_runtime.jsx)("iframe", {
|
|
@@ -20153,7 +20164,7 @@ function CardElement({
|
|
|
20153
20164
|
})]
|
|
20154
20165
|
})]
|
|
20155
20166
|
})]
|
|
20156
|
-
}),
|
|
20167
|
+
}), /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
|
|
20157
20168
|
children: [forceSaveCard && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
|
|
20158
20169
|
style: customStyle == null ? void 0 : customStyle.label,
|
|
20159
20170
|
className: "flex h-4 flex-col justify-center text-gray-700 text-sm font-medium leading-6 tracking-[0.01rem]",
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -693,6 +693,11 @@ video {
|
|
|
693
693
|
margin-right: auto;
|
|
694
694
|
}
|
|
695
695
|
|
|
696
|
+
.my-16 {
|
|
697
|
+
margin-top: 4rem;
|
|
698
|
+
margin-bottom: 4rem;
|
|
699
|
+
}
|
|
700
|
+
|
|
696
701
|
.my-2 {
|
|
697
702
|
margin-top: 0.5rem;
|
|
698
703
|
margin-bottom: 0.5rem;
|
|
@@ -2937,3 +2942,7 @@ video {
|
|
|
2937
2942
|
.\[\&_input\]\:pl-6 input {
|
|
2938
2943
|
padding-left: 1.5rem;
|
|
2939
2944
|
}
|
|
2945
|
+
|
|
2946
|
+
.\[\&_svg\]\:fill-gray-700 svg {
|
|
2947
|
+
fill: #344054;
|
|
2948
|
+
}
|