pixel

Paymob Web SDK, help our merchant to have the native payment experience.

Installing

$3

Using jsDelivr:

`html

`

Usage

`js
new Pixel({
publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
clientSecret: 'are_csk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
paymentMethods: ['card', 'google-pay', 'apple-pay'],
elementId: 'example'
});
`

> Note: If Google Pay is passed as Payment Method , you must include Google Pay SDK
> `html
>
> `

Properties

The full list of properties is as follows:
| Property | Type | Definition |
| --------------------- | -------------- | -------------- |
| publicKey | String | It can be accessed from Merchant’s Dashboard → Settings → Account Info. |
| clientSecret | String | Once you fire Intention API, you will receive “client_secret” in the API Response , which will be used in the Pixel SDK. Client Secret is unique for each Order and it expires in an hour. |
| paymentMethods | Array of String | Pass card for Card Payments ,google-pay for Google Pay && apple-pay for Apple Pay. |
| elementId | String | ID of the HTML element where the checkout pixel will be embedded. |
| 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. |
| showSaveCard | Boolean | If this option is set to TRUE, users will have the option to save their card details for future payment. |
| forceSaveCard | Boolean | If this option is set to true, the user's card details will be saved automatically without requiring their consent |
| cardValidationChanged | Function | This Functionality will be processed whenever card validation status changed. |
| beforePaymentComplete | Function | Merchants can implement their own custom logic or functions before the payment is processed by Paymob. check the full example below. |
| afterPaymentComplete | Function | This Functionality will be processed after payment is processed by Paymob. check the full example below. |
| onPaymentCancel | Function | This function applies exclusively to Apple Pay. Merchants can implement their own custom logic to handle scenarios where a user cancels the Apple Pay payment by closing the Apple Pay SDK. |
| customStyle | Object | You can pass custom styles, for more details check the full example below.




Events

The full list of events is as follows:
| Event | Definition |
| ------- | --------- |
| payFromOutside | In case you need to use you pay button instead of SDK pay button.

Functions

The full list of functions is as follows:
| Function | Props | Definition |
| --------------------- | -------------- | -------------- |
| updateIntentionData | elementId | Update intention data inside the SDK, in case any updates happend on the intention.

Custom Pay Button Example

> Add disablePay to hide SDK pay button
> `js
> new Pixel({
> publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
> clientSecret: 'are_csk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
> paymentMethods: ['card', 'google-pay', 'apple-pay'],
> elementId: 'example',
> disablePay: true,
> });
> `
> Then you can fire payFromOutside event when ever you want to start the payment, this will not work with Google-pay or Apple-pay
> `js
> window.dispatchEvent(new Event('payFromOutside'));
> `

Update Intention Example

> Whenever you made any update to the intention via API, you will need to update the intention data inside the SDK.
> `js
> const response = await Pixel.updateIntentionData();
> `
> updateIntentionData will return the response of the latest retrieve intention request.
>
>> Note: In case you have multiple instance of Pixel within the same page, you have to pass the elementId to updateIntentionData
>> `js
>> const response = await Pixel.updateIntentionData("example");
>> `
>

Full Example

`html












Pay From Outside Button






`

 

---

 

Pixel Tokenization

Use Pixel SDK for only card tokenization.

Installing

$3

Using jsDelivr:

`html

`

Usage

`js
new Pixel({
publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
elementId: 'example',
supportedNetworks: ['visa', 'mada']
});
`


Properties

The full list of properties is as follows:
| Property | Type | Definition |
| --------------------- | -------------- | -------------- |
| publicKey | String | It can be accessed from Merchant’s Dashboard → Settings → Account Info. |
| elementId | String | ID of the HTML element where the checkout pixel will be embedded. |
| supportedNetworks | Array | List of Supported networks. |
| hideCardHolderName | Boolean | If this option is set to false, will hide the card holder name input. |
| cardValidationChanged | Function | This Functionality will be processed whenever card validation status changed.|
| customStyle | Object | You can pass custom styles, for more details check the full example below.

Functions

The full list of functions is as follows:
| Function | Props | Definition |
| --------------------- | -------------- | -------------- |
| submit | elementId | Submit the card data and return the tokenized card.

Submit Example

> Use to fire the tokenization request and get the tokenized card data.
> `js
> const response = await Pixel.submit();
> `
> submit will return the response of the tokenization request .
>
>> Note: In case you have multiple instance of Pixel within the same page, you have to pass the elementId to submit
>> `js
>> const response = await Pixel.submit("example");
>> `
>

Full Example

`html













Submit


``