Sample Code
Embedded Payment Sample Code
This sample code is a complete example of a payment page that uses the MyFatoorah embedded payment.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embedded Payment</title>
<script src="https://demo.myfatoorah.com/sessions/v1/session.js"></script>
</head>
<body style="background-color: white">
<div style="width: 400px; margin: auto">
<div id="unified-session"></div>
</div>
<script>
var config = {
sessionId: "KWT-226c96d3-b243-4f54-aa38-727c1659ec94", //Add the "SessionId" you received from POST Session Endpoint.
callback: payment, // MyFatoorah calls the callback function after the customer fills in the card and clicks pay or when the customer finishes the steps with GooglePay, STC Pay and Apple Pay or when the customer choose one of hosted payment methods.
containerId: "unified-session", //Enter the div id you created in previous step.
shouldHandlePaymentUrl: true, //default is true, if you want to handle OTP page url by yourself (in case the payment supported embedded) or need to redirect customer to hosted page when choose hosted payment method, set it to false.
eventListener: eventHandler,
subscribedEvents: ['VIEW_READY', "CARD_IDENTIFIED", 'PAYMENT_STARTED', 'PAYMENT_COMPLETED', 'SESSION_STARTED', 'SESSION_CANCELED', '3DS_CHALLENGE_INITIATED', 'OTP_REQUESTED'],
settings: {
loader: {
display: 'none'
},
// applePay: {
// language: "ar",
// style: {
// frameHeight: "10px",
// frameWidth: "100%",
// button: {
// height: "80px",
// type: "subscribe", //["plain", "buy", "pay", "checkout", "continue", "book", "donate", "subscribe", "reload", "add", "topup", "order", "rent", "support", "contribute", "setup", "tip"]
// borderRadius: "10px",
// },
// },
// requiredShippingContactFields: [
// "postalAddress",
// "name",
// "phone",
// "email",
// ],
// requiredBillingContactFields: ["postalAddress", "name", "phone"],
// },
// googlePay: {
// language: "ar",
// style: {
// frameHeight: "70px",
// frameWidth: "100%",
// button: {
// height: "40px",
// type: "book", //Accepted texts ["book", "buy", "checkout", "donate", "order", "pay", "plain", "subscribe"]
// borderRadius: "10px",
// color: "black", //Accepted colors ["black", "white"]
// },
// },
// },
// card: {
// language: "en",
// style: {
// showCardholderName: true,
// hideCardIcons: true,
// cardHeight: "180px",
// tokenHeight: "180px",
// input: {
// color: "black",
// fontSize: "20px",
// fontFamily: "Times",
// inputHeight: "32px",
// inputMargin: "-1px",
// borderColor: "black",
// //backgroundColor: "green",
// borderWidth: "1px",
// borderRadius: "30px",
// outerRadius: "10px",
// // boxShadow: "0 0 10px 5px purple, 0 0 15px 10px lightblue",
// placeHolder: {
// color: "red",
// holderName: "Name On Card",
// cardNumber: "Number",
// expiryDate: "MM/YY",
// securityCode: "CVV",
// },
// },
// text: {
// saveCard: "Save card info for future payments",
// addCard: "Use another Card!",
// deleteAlert: {
// title: "Delete",
// message: "Are you sure?",
// confirm: "YES",
// cancel: "NO",
// },
// },
// label: {
// display: false,
// color: "black",
// fontSize: "13px",
// fontWeight: "bold",
// fontFamily: "Times",
// text: {
// holderName: "Card Holder Name",
// cardNumber: "Card Number",
// expiryDate: "Expiry Date",
// securityCode: "Security Code",
// },
// },
// error: {
// borderColor: "red",
// //boxShadow: "0 0 10px 5px purple, 0 0 15px 10px lightblue",
// borderRadius: "8px",
// },
// button: {
// textContent: "Pay",
// fontSize: "16px",
// fontFamily: "Times",
// color: "white",
// backgroundColor: "#4daee0",
// height: "30px",
// borderRadius: "8px",
// width: "70%",
// margin: "0 auto",
// cursor: "pointer",
// },
// separator: {
// useCustomSeparator: false,
// textContent: "Enter your card",
// fontSize: "20px",
// color: "#4daee0",
// fontFamily: "sans-serif",
// textSpacing: "2px",
// lineStyle: "dashed",
// lineColor: "black",
// lineThickness: "3px",
// },
// },
// },
// stcPay: {
// mobileNumber: "0548220713",
// // language: "en",
// style: {
// frameHeight: "40px",
// frameWidth: "100%",
// input: {
// color: "#582490",
// fontSize: "14px",
// fontFamily: "'roboto', sans-serif",
// inputHeight: "40px",
// borderColor: "black",
// borderWidth: "2px",
// borderRadius: "9px",
// placeHolder: {
// mobileNumber: "05________",
// otpValue: "Enter OTP!",
// },
// },
// button: {
// borderRadius: "9px",
// height: "40px",
// },
// },
// },
},
};
myfatoorah.init(config);
//Embedded Functions
function payment(response) {
console.log(JSON.stringify(response));
}
function eventHandler(event) {
console.log("Event received:" + JSON.stringify(event));
}
//This function enables you to update the amount displayed on Apple Pay and Google Pay after the initiation of the config.
function updateAmount(amount) {
myfatoorah.updateAmount(amount);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embedded Payment</title>
<script src="https://demo.myfatoorah.com/sessions/v1/session.js"></script>
</head>
<body style="background-color: white">
<div style="width: 400px; margin: auto">
<div id="unified-session"></div>
</div>
<!-- This is a div element for the CVV Component -->
<div
style="
width: 400px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
"
;
margin-bottom:
5px;
>
<div id="cvv-component"></div>
</div>
<!-- This is a button for the submit CVV -->
<button onclick="submitCvv()">Submit CVV</button>
<script>
var sessionId = "KWT-d2a00b6d-9e9b-4971-bc70-b10eade6a785"; //Add the "SessionId" you received from POST Session Endpoint.
var configCvvView = {
sessionId: sessionId,
containerId: "cvv-component",
callback: proceedCvv,
shouldHandlePaymentUrl: true,
// style: {
// frameHeight: "100px",
// error: {
// borderColor: "violet",
// borderRadius: "10px",
// //boxShadow: "10px 10px 5px #888888",
// },
// input: {
// color: "black",
// fontSize: "20px",
// fontFamily: "Sofia",
// inputHeight: "30px",
// inputMargin: "1px",
// borderColor: "blue",
// borderWidth: "3px",
// borderRadius: "25px",
// boxShadow: "",
// placeHolder: "security code(cvv)",
// },
// label: {
// display: true,
// color: "green",
// fontSize: "25px",
// fontWeight: "900",
// fontFamily: "Sofia",
// text: "cvv",
// },
// },
};
myfatoorah.initCvv(configCvvView);
//CVV Functions
function proceedCvv(response) {
if (response.isSuccess) {
console.log("proceedCvv response >>\n" + JSON.stringify(response));
} else {
console.error("proceedCvv Error >> " + JSON.stringify(response));
}
}
function submitCvv() {
myfatoorah.submitCvv("TKN-0fb06aac-634d-418a-bf78-953202b67b53");
}
</script>
</body>
</html>Updated about 2 hours ago