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

You can enhance your customers' checkout experience by automatically displaying the cardholder’s name on the payment form using the N-Genius Hosted Session SDK.

This is useful when you already know the user’s name from their billing address and want to pre-fill it on the hosted fields.


How It Works

Once you’ve included the Hosted Session SDK in your page, simply call the window.NI.mountCardInput method to mount the secure card input fields on your form. As part of the configuration, you can pass the customer’s first and last name to pre-populate the corresponding fields.


Example Integration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pre-fill Cardholder Name</title>
  <script src="https://paypage.sandbox.ngenius-payments.com/hosted-sessions/sdk.js"></script>
</head>
<body>
  <div id="mount-id"></div>

  <script>
    window.NI.mountCardInput('mount-id', {
      style: {/* your custom styling */},

      // 🔑 Use the correct field name: apiKey
      apiKey: 'HOSTED_SESSION_API_KEY',

      language: 'en',
      outletRef: 'YOUR_OUTLET_REFERENCE',
      firstName: 'Mike',
      lastName: 'Wazowski',

      onSuccess: () => {
        console.log('Session validation succeeded');
      },

      onFail: (error) => {
        console.error('Session validation failed', error);
      },

      onChangeValidStatus: ({
        isCVVValid,
        isExpiryValid,
        isNameValid,
        isPanValid
      }) => {
        console.log('Field validation:', {
          isCVVValid,
          isExpiryValid,
          isNameValid,
          isPanValid
        });
      }
    });
  </script>
</body>
</html>

Where to Find Your Credentials

  • apiKey
    Go to Sandbox Portal
    Settings > Service Accounts > New
    Choose "Hosted Session Service Account" from the Type dropdown.
The screenshot illustratred the steps required to setup an API key from within the N-Genius portal. Select Settings > New, and configured the details on screen.

Hosted Session SDK API Key

  • outletRef
    Navigate to Settings > Organisational Hierarchy, then click on your outlet
    (indicated by a square icon with a circle inside).
    The Reference value appears in the panel on the right.
The screenshot illustrates the steps required to copy the outlet reference from within the n-genius portal.

Outlet Reference