The feature aims to enhance the user experience for merchants by automating the retrieval and display of the cardholder's name from the billing address.
How does it work?
Once the SDK has been included successfully in the project, it’s needed to call the mountCardInput method under the NI namespace, providing a DOM ID of the element you wish to mount the payment card fields onto,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://paypage.sandbox.ngenius-payments.com/hosted-sessions/sdk.js"></script>
</head>
<body>
<!--Your website code goes here-->
<!--below div will have payment form loaded -->
<div id="mount-id"></div> <!--....-->
</body>
<script>
/* Method call to mount the card input on your website */
window.NI.mountCardInput('mount-id'/* the mount id*/,
{ style, // Style configuration you can pass to customize the UI
hostedSessionApiKey, // Hosted Session Key which is used to generate Session ID
language, // language to be passed either "ar" or "en", default: "en"
outletRef, // outlet reference from the portal
onSuccess, // Success callback if hostedSessionApiKey validation succeeds
onFail, // Fail callback if hostedSessionApiKey validation fails,
firstName: 'Mike', // as a part of billingAddress: {firstName,lastName}. By default the value is "<empty>"
lastName: 'Wazowski', // as a part of billingAddress: {firstName,lastName}. By default the value is "<empty>"
onChangeValidStatus: ({
isCVVValid,
isExpiryValid,
isNameValid,
isPanValid }) => {
console.log(isCVVValid, isExpiryValid, isNameValid, isPanValid); }
});
</script>
</html>