Sample Code
Embedded Payment Integration sample code
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 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: "", // Here, add your Country Code.
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;
})
// 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>Embedded Payment</title>
<style></style>
</head>
<body>
<h1>Embedded Payment</h1>
<script src="https://demo.myfatoorah.com/applepay/v2/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",
text: "Pay with", // Accepted texts ["", "Buy with", "Pay with", "Check Out with", "Continue with", "Book with", "Donate with", "Subscribe with", "Reload with", "Add Money with", "Top Up with", "Order with", "Rent with", "Support with", "Contribute with", "Tip with", "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;
};
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>Embedded Payment</title>
<style></style>
</head>
<body>
<h1>Embedded Payment</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;
};
function updateAmount(amount) {
myFatoorahGP.updateAmount(amount);
};
</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
*/
'countryCode' => '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 protected]',
//'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 + `&iframeEnabled=true`;
//Optional: Display the pop up where you will load the iframe
//modal.style.display = 'block';
}
});
}
Updated 3 months ago