paymob-pixel
v1.0.2
Published
Paymob Web SDK, help our merchant to have the native payment experience.
Downloads
1,231
Maintainers
ahmed_elbannaReadme
pixel
Paymob Web SDK, help our merchant to have the native payment experience.
Installing
CDN
Using unpkg CDN:
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/styles.css">
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/main.css">
<script src="https://unpkg.com/paymob-pixel/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. | | hideCardHolderName | Boolean | If this parameter is set to true ,then Cardholder Name will be hidden for Card Payments. | | 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 | | 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 fter 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.
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://unpkg.com/paymob-pixel/styles.css">
<link rel="stylesheet" href="https://unpkg.com/paymob-pixel/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://unpkg.com/paymob-pixel/main.js" type="module"></script>
<script>
const button = document.getElementById('payFromOutsideButton');
button.addEventListener('click', function () {
// Calling pay request
const event = new Event('payFromOutside');
window.dispatchEvent(event);
});
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,
hideCardHolderName: true,
cardValidationChanged: (isValid) => {
console.log("Is valid ? ", isValid)
},
beforePaymentComplete: async () => {
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: {
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>