paymob-pixel-alpha 1.1.7 → 1.1.9
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 +124 -28
- package/main.js +1103 -308
- package/package.json +1 -1
- package/styles.css +682 -626
package/README.md
CHANGED
|
@@ -30,9 +30,9 @@ Using jsDelivr:
|
|
|
30
30
|
<!-- Using unpkg:
|
|
31
31
|
|
|
32
32
|
```html
|
|
33
|
-
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel
|
|
34
|
-
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel
|
|
35
|
-
<script src="https://unpkg.com/paymob-pixel
|
|
33
|
+
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/styles.css">
|
|
34
|
+
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/main.css">
|
|
35
|
+
<script src="https://unpkg.com/paymob-pixel/main.js" type="module"></script>
|
|
36
36
|
``` -->
|
|
37
37
|
|
|
38
38
|
## Usage
|
|
@@ -166,30 +166,59 @@ The full list of functions is as follows:
|
|
|
166
166
|
console.log("====> onPaymentCancel")
|
|
167
167
|
},
|
|
168
168
|
customStyle: {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
169
|
+
HideCardIcons: true,
|
|
170
|
+
HideCardLabel: true,
|
|
171
|
+
Direction: 'rtl',
|
|
172
|
+
Label_Text: {
|
|
173
|
+
cardLabel: "بيانات البطاقة"
|
|
174
|
+
savedCardsLabel: 'البطاقات المحفوطة',
|
|
175
|
+
saveCardConsentLabel: 'حفظ البطاقة',
|
|
176
|
+
},
|
|
177
|
+
Placeholder_Text: {
|
|
178
|
+
holderName: 'الاسم علي البطاقة',
|
|
179
|
+
cardNumber:'رقم البطاقة',
|
|
180
|
+
expiryDate:'سنة / شهر',
|
|
181
|
+
securityCode:'(CVV) الرمز الامني'
|
|
182
|
+
},
|
|
183
|
+
Error_Text: {
|
|
184
|
+
holderName: 'مطلوب اسم حامل البطاقة',
|
|
185
|
+
cardNumber: {
|
|
186
|
+
required: 'مطلوب رقم البطاقة',
|
|
187
|
+
invalid: 'رقم البطاقة غير صحيح'
|
|
188
|
+
},
|
|
189
|
+
expiryDate: {
|
|
190
|
+
required: 'مطلوب تاريخ انتهاء الصلاحية',
|
|
191
|
+
invalid: 'تاريخ انتهاء الصلاحية غير صحيح'
|
|
192
|
+
},
|
|
193
|
+
},
|
|
194
|
+
Button_Text: {
|
|
195
|
+
viewSavedCardsBtn: 'عرض البطاقات المحفوظة',
|
|
196
|
+
addNewCardBtn: 'إضافة بطاقة جديدة'
|
|
197
|
+
},
|
|
198
|
+
Font_Family: 'monospace',
|
|
199
|
+
Font_Size_Label: '18',
|
|
200
|
+
Font_Size_Input_Fields: '18',
|
|
201
|
+
Font_Size_Payment_Button: '28',
|
|
202
|
+
Font_Weight_Label: 400,
|
|
203
|
+
Font_Weight_Input_Fields: 400,
|
|
204
|
+
Font_Weight_Payment_Button: 900,
|
|
205
|
+
Color_Container: '#b7ffe4',
|
|
206
|
+
Color_Border_Input_Fields: '#f00',
|
|
207
|
+
Color_Border_Payment_Button: '#f00',
|
|
208
|
+
Radius_Border: '50',
|
|
209
|
+
Color_Disabled: '#c153bf',
|
|
210
|
+
Color_Error: '#4a6',
|
|
211
|
+
Color_Primary: '#c153bf',
|
|
212
|
+
Color_Input_Fields: 'yellow',
|
|
213
|
+
Text_Color_For_Label: '#f00',
|
|
214
|
+
Text_Color_For_Payment_Button: '#f00',
|
|
215
|
+
Text_Color_For_Input_Fields: '#f00',
|
|
216
|
+
Color_For_Text_Placeholder: '#c153bf',
|
|
217
|
+
Width_of_Container: '100%',
|
|
218
|
+
Vertical_Padding: '50',
|
|
219
|
+
Vertical_Spacing_between_components: '8',
|
|
220
|
+
Container_Padding: '50'
|
|
221
|
+
}
|
|
193
222
|
});
|
|
194
223
|
};
|
|
195
224
|
</script>
|
|
@@ -207,6 +236,18 @@ The full list of functions is as follows:
|
|
|
207
236
|
# `Pixel Tokenization`
|
|
208
237
|
Use Pixel SDK for only card tokenization.
|
|
209
238
|
|
|
239
|
+
## Installing
|
|
240
|
+
|
|
241
|
+
### CDN
|
|
242
|
+
|
|
243
|
+
Using jsDelivr:
|
|
244
|
+
|
|
245
|
+
```html
|
|
246
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css">
|
|
247
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css">
|
|
248
|
+
<script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
|
|
249
|
+
```
|
|
250
|
+
|
|
210
251
|
## Usage
|
|
211
252
|
|
|
212
253
|
```js
|
|
@@ -225,7 +266,8 @@ The full list of properties is as follows:
|
|
|
225
266
|
| elementId | String | ID of the HTML element where the checkout pixel will be embedded. |
|
|
226
267
|
| supportedNetworks | Array | List of Supported networks. |
|
|
227
268
|
| hideCardHolderName | Boolean | If this option is set to false, will hide the card holder name input. |
|
|
228
|
-
| cardValidationChanged | Function | This Functionality will be processed whenever card validation status changed
|
|
269
|
+
| cardValidationChanged | Function | This Functionality will be processed whenever card validation status changed.|
|
|
270
|
+
| customStyle | Object | You can pass custom styles, for more details check the full example below.
|
|
229
271
|
|
|
230
272
|
## Functions
|
|
231
273
|
The full list of functions is as follows:
|
|
@@ -273,6 +315,60 @@ The full list of functions is as follows:
|
|
|
273
315
|
supportedNetworks: ['visa', 'mada'],
|
|
274
316
|
cardValidationChanged: (isValid) => {
|
|
275
317
|
console.log("Is valid ? ", isValid)
|
|
318
|
+
},
|
|
319
|
+
customStyle: {
|
|
320
|
+
HideCardIcons: true,
|
|
321
|
+
HideCardLabel: true,
|
|
322
|
+
Direction: 'rtl',
|
|
323
|
+
Label_Text: {
|
|
324
|
+
cardLabel: "بيانات البطاقة"
|
|
325
|
+
savedCardsLabel: 'البطاقات المحفوطة',
|
|
326
|
+
saveCardConsentLabel: 'حفظ البطاقة',
|
|
327
|
+
},
|
|
328
|
+
Placeholder_Text: {
|
|
329
|
+
holderName: 'الاسم علي البطاقة',
|
|
330
|
+
cardNumber:'رقم البطاقة',
|
|
331
|
+
expiryDate:'سنة / شهر',
|
|
332
|
+
securityCode:'(CVV) الرمز الامني'
|
|
333
|
+
},
|
|
334
|
+
Error_Text: {
|
|
335
|
+
holderName: 'مطلوب اسم حامل البطاقة',
|
|
336
|
+
cardNumber: {
|
|
337
|
+
required: 'مطلوب رقم البطاقة',
|
|
338
|
+
invalid: 'رقم البطاقة غير صحيح'
|
|
339
|
+
},
|
|
340
|
+
expiryDate: {
|
|
341
|
+
required: 'مطلوب تاريخ انتهاء الصلاحية',
|
|
342
|
+
invalid: 'تاريخ انتهاء الصلاحية غير صحيح'
|
|
343
|
+
},
|
|
344
|
+
},
|
|
345
|
+
Button_Text: {
|
|
346
|
+
viewSavedCardsBtn: 'عرض البطاقات المحفوظة',
|
|
347
|
+
addNewCardBtn: 'إضافة بطاقة جديدة'
|
|
348
|
+
},
|
|
349
|
+
Font_Family: 'monospace',
|
|
350
|
+
Font_Size_Label: '18',
|
|
351
|
+
Font_Size_Input_Fields: '18',
|
|
352
|
+
Font_Size_Payment_Button: '28',
|
|
353
|
+
Font_Weight_Label: 400,
|
|
354
|
+
Font_Weight_Input_Fields: 400,
|
|
355
|
+
Font_Weight_Payment_Button: 900,
|
|
356
|
+
Color_Container: '#b7ffe4',
|
|
357
|
+
Color_Border_Input_Fields: '#f00',
|
|
358
|
+
Color_Border_Payment_Button: '#f00',
|
|
359
|
+
Radius_Border: '50',
|
|
360
|
+
Color_Disabled: '#c153bf',
|
|
361
|
+
Color_Error: '#4a6',
|
|
362
|
+
Color_Primary: '#c153bf',
|
|
363
|
+
Color_Input_Fields: 'yellow',
|
|
364
|
+
Text_Color_For_Label: '#f00',
|
|
365
|
+
Text_Color_For_Payment_Button: '#f00',
|
|
366
|
+
Text_Color_For_Input_Fields: '#f00',
|
|
367
|
+
Color_For_Text_Placeholder: '#c153bf',
|
|
368
|
+
Width_of_Container: '100%',
|
|
369
|
+
Vertical_Padding: '50',
|
|
370
|
+
Vertical_Spacing_between_components: '8',
|
|
371
|
+
Container_Padding: '50'
|
|
276
372
|
}
|
|
277
373
|
})
|
|
278
374
|
// Submit Call
|