Pre-populate Cardholder's Name on Hosted Session Pay Page

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>