Paymob-pixel-alpha NPM

`pixel`

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

Installing

CDN

Using jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css">
<script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>

Usage

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
<script src="https://pay.google.com/gp/p/js/pay.js"></script>

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. | | clientSecre | 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
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
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.
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
const response = await Pixel.updateIntentionData("example");

Full Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pixels</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css">
    </head>
    <body>
        <div style="position: absolute; width: 80%; margin-top: 10%;" id="example"></div>
        <button id="payFromOutsideButton">Pay From Outside Button</button>
        
        <script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
        <script>
            const button = document.getElementById('payFromOutsideButton');
            button.addEventListener('click', function () {
                // Calling pay request
                window.dispatchEvent(new Event('payFromOutside'));
            });
            onload = (event) => {
                new Pixel({
                    publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
                    clientSecret: 'are_csk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
                    paymentMethods: ['card', 'google-pay', 'apple-pay'],
                    elementId: 'example',
                    showSaveCard: true,
                    forceSaveCard: true,
                    disablePay: true,
                    cardValidationChanged: (isValid) => {
                        console.log("Is valid ? ", isValid)
                    },
                    beforePaymentComplete: async (paymentMethod) => {
                        console.log('Before payment start');
                        console.log('We are waiting for 5 seconds');
                        await new Promise(res => setTimeout(() => res(''),5000))
                        console.log('Before payment end');
                        return true
                    },
                    afterPaymentComplete: async (res) => {
                        console.log('After payment');
                        console.log(res)
                    },
                    onPaymentCancel: async () => {
                        console.log("====> onPaymentCancel")
                    },
                    customStyle: {
                      HideCardIcons: true,
                      Direction: 'rtl',
                      Label_Text: {
                        cardLabel: "بيانات البطاقة"
                      },
                      Placeholder_Text: {
                        holderName: 'الاسم علي البطاقة',
                        cardNumber:'رقم البطاقة',
                        expiryDate:'سنة / شهر',
                        securityCode:'(CVV) الرمز الامني'
                      },
                      Error_Text: {
                        holderName: 'مطلوب اسم حامل البطاقة',
                        cardNumber: 'مطلوب رقم البطاقة',
                        expiryDate: 'مطلوب تاريخ انتهاء الصلاحية',
                        securityCode: 'مطلوب رمز CVV مكون من 3 أرقام'
                      },
                      Font_Family: 'monospace',
                      Font_Size_Label: '18',
                      Font_Size_Input_Fields: '18',
                      Font_Size_Payment_Button: '28',
                      Font_Weight_Label: 400,
                      Font_Weight_Input_Fields: 400,
                      Font_Weight_Payment_Button: 900,
                      Color_Container: '#b7ffe4',
                      Color_Border_Input_Fields: '#f00',
                      Color_Border_Payment_Button: '#f00',
                      Radius_Border: '50',
                      Color_Disabled: '#c153bf',
                      Color_Error: '#4a6',
                      Color_Primary: '#c153bf',
                      Color_Input_Fields: 'yellow',
                      Text_Color_For_Label: '#f00',
                      Text_Color_For_Payment_Button: '#f00',
                      Text_Color_For_Input_Fields: '#f00',
                      Color_For_Text_Placeholder: '#c153bf',
                      Width_of_Container: '100%',
                      Vertical_Padding: '50',
                      Vertical_Spacing_between_components: '8',
                      Container_Padding: '50'
                    }
                });
            };
        </script>
        <script src="https://pay.google.com/gp/p/js/pay.js"></script>
  </body>
</html>

`Pixel Tokenization`

Use Pixel SDK for only card tokenization.

Installing

CDN

Using jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css">
<script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>

Usage

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.
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
const response = await Pixel.submit("example");

Full Example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Pixel Tokenization</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css">
</head>

<body>
    <div id="example"></div>
    <button id="btn-submit">Submit</button>
    <script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
    <script>
      onload = (event) => {
        new Pixel({
          publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
          elementId: 'example',
          supportedNetworks: ['visa', 'mada'],
          cardValidationChanged: (isValid) => {
            console.log("Is valid ? ", isValid)
          },
          customStyle: {
            HideCardIcons: true,
            Direction: 'rtl',
            Label_Text: {
              cardLabel: "بيانات البطاقة"
            },
            Placeholder_Text: {
              holderName: 'الاسم علي البطاقة',
              cardNumber:'رقم البطاقة',
              expiryDate:'سنة / شهر',
              securityCode:'(CVV) الرمز الامني'
            },
            Error_Text: {
              holderName: 'مطلوب اسم حامل البطاقة',
              cardNumber: 'مطلوب رقم البطاقة',
              expiryDate: 'مطلوب تاريخ انتهاء الصلاحية',
              securityCode: 'مطلوب رمز CVV مكون من 3 أرقام'
            },
            Font_Family: 'monospace',
            Font_Size_Label: '18',
            Font_Size_Input_Fields: '18',
            Font_Size_Payment_Button: '28',
            Font_Weight_Label: 400,
            Font_Weight_Input_Fields: 400,
            Font_Weight_Payment_Button: 900,
            Color_Container: '#b7ffe4',
            Color_Border_Input_Fields: '#f00',
            Color_Border_Payment_Button: '#f00',
            Radius_Border: '50',
            Color_Disabled: '#c153bf',
            Color_Error: '#4a6',
            Color_Primary: '#c153bf',
            Color_Input_Fields: 'yellow',
            Text_Color_For_Label: '#f00',
            Text_Color_For_Payment_Button: '#f00',
            Text_Color_For_Input_Fields: '#f00',
            Color_For_Text_Placeholder: '#c153bf',
            Width_of_Container: '100%',
            Vertical_Padding: '50',
            Vertical_Spacing_between_components: '8',
            Container_Padding: '50'
          }
        })
        // Submit Call
        const submitBtn = document.getElementById('btn-submit');
        submitBtn.addEventListener('click', async () => {
          try {
            const response = await Pixel.submit();
            console.log("Response:", response.data)

          } catch (error) {
            console.log("Error:", error)

          }
        })
      };
    </script>
</body>

</html>

paymob pixel paymob-pixel

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago