paymob-pixel-alpha 1.1.6 → 1.1.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 +105 -3
- package/main.js +558 -285
- package/package.json +1 -1
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
|
|
@@ -81,7 +81,7 @@ The full list of events is as follows:
|
|
|
81
81
|
The full list of functions is as follows:
|
|
82
82
|
| Function | Props | Definition |
|
|
83
83
|
| --------------------- | -------------- | -------------- |
|
|
84
|
-
| updateIntentionData |
|
|
84
|
+
| updateIntentionData | elementId | Update intention data inside the SDK, in case any updates happend on the intention.
|
|
85
85
|
|
|
86
86
|
|
|
87
87
|
## Custom Pay Button Example
|
|
@@ -108,6 +108,12 @@ The full list of functions is as follows:
|
|
|
108
108
|
> const response = await Pixel.updateIntentionData();
|
|
109
109
|
> ```
|
|
110
110
|
> **updateIntentionData** will return the response of the latest retrieve intention request.
|
|
111
|
+
>
|
|
112
|
+
>> **Note**: In case you have multiple instance of Pixel within the same page, you have to pass the **elementId** to **updateIntentionData**
|
|
113
|
+
>> ```js
|
|
114
|
+
>> const response = await Pixel.updateIntentionData("example");
|
|
115
|
+
>> ```
|
|
116
|
+
>
|
|
111
117
|
|
|
112
118
|
## Full Example
|
|
113
119
|
|
|
@@ -189,5 +195,101 @@ The full list of functions is as follows:
|
|
|
189
195
|
</script>
|
|
190
196
|
<script src="https://pay.google.com/gp/p/js/pay.js"></script>
|
|
191
197
|
</body>
|
|
198
|
+
</html>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
# `Pixel Tokenization`
|
|
208
|
+
Use Pixel SDK for only card tokenization.
|
|
209
|
+
|
|
210
|
+
## Usage
|
|
211
|
+
|
|
212
|
+
```js
|
|
213
|
+
new Pixel({
|
|
214
|
+
publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
|
|
215
|
+
elementId: 'example',
|
|
216
|
+
supportedNetworks: ['visa', 'mada']
|
|
217
|
+
});
|
|
218
|
+
```
|
|
219
|
+
## Properties
|
|
220
|
+
|
|
221
|
+
The full list of properties is as follows:
|
|
222
|
+
| Property | Type | Definition |
|
|
223
|
+
| --------------------- | -------------- | -------------- |
|
|
224
|
+
| publicKey | String | It can be accessed from Merchant’s Dashboard → Settings → Account Info. |
|
|
225
|
+
| elementId | String | ID of the HTML element where the checkout pixel will be embedded. |
|
|
226
|
+
| supportedNetworks | Array | List of Supported networks. |
|
|
227
|
+
| 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.
|
|
229
|
+
|
|
230
|
+
## Functions
|
|
231
|
+
The full list of functions is as follows:
|
|
232
|
+
| Function | Props | Definition |
|
|
233
|
+
| --------------------- | -------------- | -------------- |
|
|
234
|
+
| submit | elementId | Submit the card data and return the tokenized card.
|
|
235
|
+
|
|
236
|
+
## Submit Example
|
|
237
|
+
> Use to fire the tokenization request and get the tokenized card data.
|
|
238
|
+
> ```js
|
|
239
|
+
> const response = await Pixel.submit();
|
|
240
|
+
> ```
|
|
241
|
+
> **submit** will return the response of the tokenization request .
|
|
242
|
+
>
|
|
243
|
+
>> **Note**: In case you have multiple instance of Pixel within the same page, you have to pass the **elementId** to **submit**
|
|
244
|
+
>> ```js
|
|
245
|
+
>> const response = await Pixel.submit("example");
|
|
246
|
+
>> ```
|
|
247
|
+
>
|
|
248
|
+
|
|
249
|
+
## Full Example
|
|
250
|
+
|
|
251
|
+
```html
|
|
252
|
+
<!DOCTYPE html>
|
|
253
|
+
<html lang="en">
|
|
254
|
+
|
|
255
|
+
<head>
|
|
256
|
+
<meta charset="utf-8" />
|
|
257
|
+
<title>Pixel Tokenization</title>
|
|
258
|
+
<base href="/">
|
|
259
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
260
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css">
|
|
261
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css">
|
|
262
|
+
</head>
|
|
263
|
+
|
|
264
|
+
<body>
|
|
265
|
+
<div id="example"></div>
|
|
266
|
+
<button id="btn-submit">Submit</button>
|
|
267
|
+
<script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
|
|
268
|
+
<script>
|
|
269
|
+
onload = (event) => {
|
|
270
|
+
new Pixel({
|
|
271
|
+
publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
|
|
272
|
+
elementId: 'example',
|
|
273
|
+
supportedNetworks: ['visa', 'mada'],
|
|
274
|
+
cardValidationChanged: (isValid) => {
|
|
275
|
+
console.log("Is valid ? ", isValid)
|
|
276
|
+
}
|
|
277
|
+
})
|
|
278
|
+
// Submit Call
|
|
279
|
+
const submitBtn = document.getElementById('btn-submit');
|
|
280
|
+
submitBtn.addEventListener('click', async () => {
|
|
281
|
+
try {
|
|
282
|
+
const response = await Pixel.submit();
|
|
283
|
+
console.log("Response:", response.data)
|
|
284
|
+
|
|
285
|
+
} catch (error) {
|
|
286
|
+
console.log("Error:", error)
|
|
287
|
+
|
|
288
|
+
}
|
|
289
|
+
})
|
|
290
|
+
};
|
|
291
|
+
</script>
|
|
292
|
+
</body>
|
|
293
|
+
|
|
192
294
|
</html>
|
|
193
295
|
```
|