Sample Code
Embedded Payment
This sample code is a complete example of a payment page that uses the MyFatoorah embedded payment form.
<!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>Card View</title>
<style></style>
</head>
<body>
<h1>Card View</h1>
<script src="https://demo.myfatoorah.com/cardview/v2/session.js"></script>
<div style="width:400px">
<div id="card-element"></div>
</div>
<button onclick="submit()">Pay Now</button>
<script>
var config = {
countryCode: "", // Here, add your Country Code.
sessionId: "", // Here you add the "SessionId" you receive from InitiateSession Endpoint.
cardViewId: "card-element",
supportedNetworks: "v,m,ae,md", //This field accepts "v,m,ae,md". This will control the cardBrand that the customers can enter.
//v: Visa, m: MasterCard, ae: Amex, md: Mada
onCardBinChanged: handleBinChanges,
// The following style is optional.
style: {
hideCardIcons: false,
direction: "ltr",
cardHeight: 130,
tokenHeight: 130,
input: {
color: "black",
fontSize: "13px",
fontFamily: "sans-serif",
inputHeight: "32px",
inputMargin: "0px",
borderColor: "c7c7c7",
borderWidth: "1px",
borderRadius: "8px",
boxShadow: "",
placeHolder: {
holderName: "Name On Card",
cardNumber: "Number",
expiryDate: "MM / YY",
securityCode: "CVV",
}
},
text: {
saveCard: "Save card info for future payment.",
addCard: "Use another Card!",
deleteAlert: {
title: "Delete",
message: "Test",
confirm: "yes",
cancel: "no"
}
},
label: {
display: false,
color: "black",
fontSize: "13px",
fontWeight: "normal",
fontFamily: "sans-serif",
text: {
holderName: "Card Holder Name",
cardNumber: "Card Number",
expiryDate: "Expiry Date",
securityCode: "Security Code",
},
},
error: {
borderColor: "red",
borderRadius: "8px",
boxShadow: "0px",
},
},
};
myFatoorah.init(config);
function submit() {
myFatoorah.submit()
// On success
.then(function (response) {
// Here you need to pass session id to you backend here
var sessionId = response.sessionId;
var cardBrand = response.cardBrand;
var cardIdentifier = response.cardIdentifier;
})
// In case of errors
.catch(function (error) {
console.log(error);
});
}
function handleBinChanges(bin){
console.log(bin);
}
</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>Apple Pay</title>
<style></style>
</head>
<body>
<h1>Apple Pay</h1>
<script src="https://demo.myfatoorah.com/applepay/v3/applepay.js"></script>
<div style="width:400px">
<div id="card-element"></div>
</div>
<script>
var config = {
sessionId: "", // Here you add the "SessionId" you receive from InitiateSession Endpoint.
countryCode: "KWT", // Here, add your Country Code.
currencyCode: "KWD", // Here, add your Currency Code.
amount: "10", // Add the invoice amount.
cardViewId: "card-element",
callback: payment,
style:{
frameHeight: 51,
button: {
height: "35px",
type: "Pay", // Accepted texts ["Plain", "Buy", "Pay", "Check Out", "Continue", "Book", "Donate", "Subscribe", "Reload", "Add Money", "Top Up", "Order", "Rent", "Support", "Contribute", "Tip", "Set Up"]
borderRadius: "8px"
}
}
};
myFatoorahAP.init(config);
function payment(response) {
// Here you need to pass session id to you backend here
var sessionId = response.sessionId;
var cardBrand = response.cardBrand;
var cardIdentifier = response.cardIdentifier;
};
function updateAmount(amount) {
myFatoorahAP.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>Google Pay</title>
<style></style>
</head>
<body>
<h1>Google Pay</h1>
<script src="https://demo.myfatoorah.com/googlepay/v1/googlepay.js"></script>
<div style="width:400px">
<div id="card-element"></div>
</div>
<script>
var config = {
sessionId: "", // Here you add the "SessionId" you receive from InitiateSession Endpoint.
countryCode: "KWT", // Here, add your Country Code.
currencyCode: "KWD", // Here, add your Currency Code.
amount: "10", // Add the invoice amount.
cardViewId: "card-element",
callback: payment,
style: {
frameHeight: 51,
button: {
height: "40px",
text: "pay", // Accepted texts ["book", "buy", "checkout", "donate", "order", "pay", "plain", "subscribe"]
borderRadius: "8px",
color: "black", // Accepted colors ["black", "white", "default"]
language: "en"
}
}
};
myFatoorahGP.init(config);
function payment(response) {
// Here you need to pass session id to you backend here
var sessionId = response.sessionId;
var cardBrand = response.cardBrand;
var cardIdentifier = response.cardIdentifier;
};
function updateAmount(amount) {
myFatoorahGP.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>STC Pay</title>
<style>
</style>
<link rel="icon" href="Asset 1@4x.png">
</head>
<body>
<h1>STC Pay</h1>
<script src="https://demo.myfatoorah.com/stcPay/v1/stcpay.js"></script>
<div style="width:800px; margin:auto;">
<div id="mf-stc-pay"></div>
</div>
<script>
let sessionId = "4693e012-cb21-4963-a7a0-f3848c8fd432";
let countryCode = "KWT";
let amount = "1000";
var configStcPay = {
sessionId: sessionId,
countryCode: countryCode,
amount: amount,
mobileNumber: "0537974429",
containerId: "mf-stc-pay",
sessionStarted:sessionStarted,
callback: paymentStc,
style: {
frameHeight: 180,
input: {
color: "#582490",
<!-- fontSize: "20px", -->
fontFamily: "'roboto', sans-serif",
<!-- inputHeight: "40px", -->
borderColor: "#582490",
borderWidth: "3px",
borderRadius: "15px",
placeHolder: {
mobileNumber: "05________",
otpValue: "Enter your OTP!"
}
},
button: {
borderRadius: "15px",
<!-- height: "40px" -->
}
}
};
myFatoorahStc.init(configStcPay);
<!-- myFatoorahStc.submitOtp("1234"); -->
function paymentStc(response) {
if (response.isSuccess) {
console.log(response);
var sessionId = response.sessionId;
console.log("SessionID >> ", sessionId);
} else {
console.log(response);
}
}
function sessionStarted(response)
{
<!-- Here you need to display the OTP UI to the customer -->
var sessionId = response.sessionId;
console.log("response from SessionStarted >> ", response);
};
</script>
</body>
</html>
<?php
/* For simplicity check our PHP SDK library here https://myfatoorah.readme.io/php-library */
//PHP Notice: To enable MyFatoorah auto-update, kindly give the write/read permissions to the library folder
//use zip file
include 'myfatoorah-library-2.2/MyfatoorahLoader.php';
include 'myfatoorah-library-2.2/MyfatoorahLibrary.php';
//use composer
//require 'vendor/autoload.php';
//use MyFatoorah\Library\API\Payment\MyFatoorahPayment;
/* --------------------------- Configurations ------------------------------- */
//Test
$mfConfig = [
/**
* API Token Key (string)
* Accepted value:
* Live Token: https://myfatoorah.readme.io/docs/live-token
* Test Token: https://myfatoorah.readme.io/docs/test-token
*/
'apiKey' => '',
/*
* Country ISO Code (string)
* Accepted value: KWT, SAU, ARE, QAT, BHR, OMN, JOD, or EGY. Check https://docs.myfatoorah.com/docs/iso-lookups
*/
'countryCode' => 'KWT',
/**
* Test Mode (boolean)
* Accepted value: true for the test mode or false for the live mode
*/
'isTest' => true,
];
/* --------------------------- InitiateSession Endpoint --------------------- */
//------------- Post Fields -------------------------
//Check https://docs.myfatoorah.com/docs/InitiateSession#request-model
$postFields = [
//Fill optional data
//'CustomerIdentifier' => 'string', //optional
//'SaveToken' => false, //optional
];
//------------- Call the Endpoint -------------------------
try {
$mfObj = new MyFatoorahPayment($mfConfig);
$data = $mfObj->InitiateSession($postFields);
$sessionId = $data->SessionId;
$link = 'https://docs.myfatoorah.com/docs/embedded-payment-sample-code';
//Display the result to your customer
echo '<h3><u>Summary:</u></h3>';
echo "You should draw the card view with session ID <b>$sessionId</b> as described in the link below then call the ExecutePayment Endpoint.<br>";
echo "<a href='$link' target='_blank'>$link</a><br><br>";
echo '<h3><u>InitiateSession Response Data:</u></h3><pre>';
print_r($data);
echo '</pre>';
} catch (Exception $ex) {
echo $ex->getMessage();
die;
}
?>
<!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>Card View Payment</title>
<style></style>
</head>
<body>
<h1>Card View Payment</h1>
<script src="https://demo.myfatoorah.com/cardview/v2/session.js"></script>
<div style="width:400px">
<div id="card-element"></div>
</div>
<button onclick="submit()">Pay Now</button>
<script>
var config = {
countryCode: "<?php echo $data->CountryCode; ?>", // Here, add your Country Code.
sessionId: "<?php echo $data->SessionId; ?>", // Here you add the "SessionId" you receive from InitiateSession Endpoint.
cardViewId: "card-element",
onCardBinChanged: handleBinChanges,
// The following style is optional.
style: {
hideCardIcons: false,
direction: "ltr",
cardHeight: 130,
tokenHeight: 130,
input: {
color: "black",
fontSize: "13px",
fontFamily: "sans-serif",
inputHeight: "32px",
inputMargin: "0px",
borderColor: "c7c7c7",
borderWidth: "1px",
borderRadius: "8px",
boxShadow: "",
placeHolder: {
holderName: "Name On Card",
cardNumber: "Number",
expiryDate: "MM / YY",
securityCode: "CVV",
}
},
text: {
saveCard: "Save card info for future payment.",
addCard: "Use another Card!",
deleteAlert: {
title: "Delete",
message: "Test",
confirm: "yes",
cancel: "no"
}
},
label: {
display: false,
color: "black",
fontSize: "13px",
fontWeight: "normal",
fontFamily: "sans-serif",
text: {
holderName: "Card Holder Name",
cardNumber: "Card Number",
expiryDate: "Expiry Date",
securityCode: "Security Code",
},
},
error: {
borderColor: "red",
borderRadius: "8px",
boxShadow: "0px",
},
},
};
myFatoorah.init(config);
function submit() {
myFatoorah.submit()
// On success
.then(function (response) {
// Here you need to pass session id to you backend here
var sessionId = response.sessionId;
var cardBrand = response.cardBrand;
alert("Call the ExecutePayment endpoint using session Id" + sessionId);
})
// In case of errors
.catch(function (error) {
console.log(error);
});
}
function handleBinChanges(bin) {
console.log(bin);
}
</script>
</body>
</html>
Call ExecutePayment with SessionID
<?php
/* For simplicity check our PHP SDK library here https://myfatoorah.readme.io/php-library */
//PHP Notice: To enable MyFatoorah auto-update, kindly give the write/read permissions to the library folder
//use zip file
include 'myfatoorah-library-2.2/MyfatoorahLoader.php';
include 'myfatoorah-library-2.2/MyfatoorahLibrary.php';
//use composer
//require 'vendor/autoload.php';
//use MyFatoorah\Library\MyFatoorah;
//use MyFatoorah\Library\API\Payment\MyFatoorahPayment;
/* --------------------------- Configurations ------------------------------- */
//Test
$mfConfig = [
/**
* API Token Key (string)
* Accepted value:
* Live Token: https://myfatoorah.readme.io/docs/live-token
* Test Token: https://myfatoorah.readme.io/docs/test-token
*/
'apiKey' => '',
/*
* Country ISO Code (string)
* Accepted value: KWT, SAU, ARE, QAT, BHR, OMN, JOD, or EGY. Check https://docs.myfatoorah.com/docs/iso-lookups
*/
'vcCode' => 'KWT',
/**
* Test Mode (boolean)
* Accepted value: true for the test mode or false for the live mode
*/
'isTest' => true,
];
/* --------------------------- ExecutePayment Endpoint --------------------- */
$invoiceValue = 50;
$displayCurrencyIso = 'KWD';
//Fill customer address array
/* $customerAddress = array(
'Block' => 'Blk #', //optional
'Street' => 'Str', //optional
'HouseBuildingNo' => 'Bldng #', //optional
'Address' => 'Addr', //optional
'AddressInstructions' => 'More Address Instructions', //optional
); */
//Fill invoice item array
/* $invoiceItems[] = [
'ItemName' => 'Item Name', //ISBAN, or SKU
'Quantity' => '2', //Item's quantity
'UnitPrice' => '25', //Price per item
]; */
//Fill suppliers array
/* $suppliers = [
[
'SupplierCode' => 1,
'InvoiceShare' => '2',
'ProposedShare' => null,
]
]; */
//Parse the phone string
$phone = MyFatoorah::getPhone('+965 123456789');
//------------- Post Fields -------------------------
//Check https://docs.myfatoorah.com/docs/execute-payment#request-model
$postFields = [
//Fill required data
'InvoiceValue' => $invoiceValue,
'SessionId' => '73ce3faf-e954-4234-b24f-524f4a8f9b23',
//Fill optional data
//'CustomerName' => 'fname lname',
//'DisplayCurrencyIso' => $displayCurrencyIso,
//'MobileCountryCode' => $phone[0],
//'CustomerMobile' => $phone[1],
//'CustomerEmail' => 'email@example.com',
//'CallBackUrl' => 'https://example.com/callback.php',
//'ErrorUrl' => 'https://example.com/callback.php', //or 'https://example.com/error.php'
//'Language' => 'en', //or 'ar'
//'CustomerReference' => 'orderId',
//'CustomerCivilId' => 'CivilId',
//'UserDefinedField' => 'This could be string, number, or array',
//'ExpiryDate' => '', //The Invoice expires after 3 days by default. Use 'Y-m-d\TH:i:s' format in the 'Asia/Kuwait' time zone.
//'CustomerAddress' => $customerAddress,
//'InvoiceItems' => $invoiceItems,
//'Suppliers' => $suppliers,
];
//------------- Call the Endpoint -------------------------
try {
$mfObj = new MyFatoorahPayment($mfConfig);
$data = $mfObj->executePayment($postFields);
//You can save payment data in database as per your needs
$invoiceId = $data->InvoiceId;
$paymentLink = $data->PaymentURL;
//Display the result to your customer
//Redirect your customer to complete the payment process
echo '<h3><u>Summary:</u></h3>';
echo "To pay the invoice ID <b>$invoiceId</b>, click on:<br>";
echo "<a href='$paymentLink' target='_blank'>$paymentLink</a><br><br>";
echo '<h3><u>ExecutePayment Response Data:</u></h3><pre>';
print_r($data);
echo '</pre>';
} catch (Exception $ex) {
echo $ex->getMessage();
die;
}
Create ExecutePayment method for the OTP to appear in an iframe
//For the full implementation of the card view, review the sample code above
<button onclick="submit()">Pay Now</button>
//Here you will call the submit() function like we normally do in the card view
//when the user clicks on the payment button
function submit() {
myFatoorah.submit()
// On success
.then(function (response) {
// Here you need to pass session id to you backend here
var sessionId = response.sessionId;
var cardBrand = response.cardBrand;
//Call the ExecutePaymentCall method that is defined below
executePaymentCall(sessionId);
})
// In case of errors
.catch(function (error) {
alert(error);
});
}
//call execute payment method after click pay button
function executePaymentCall(sessionId){
$.ajax({
cache: false,
type: "POST",
url: "executePayment.php",
data: {
sessionId: sessionId
},
success: function (response)
{
console.log(response);
//Get the iframe that you added in the page
var iframe = document.getElementById('iframeContainer');
iframe.src = response;
//Optional: Display the pop up where you will load the iframe
//modal.style.display = 'block';
}
});
}
Updated 5 months ago