Developers
HomeMerchantsDevelopers

How to setup the hosted session SDK to support wallets

Before you start

This guide will show the additional part to support wallets, so we assume that you have already integrated with the WebSDK component for N-Genius Online. If this is not the case, you should refer to Web SDK Integration Guide.

Mount the payment form on your website 

<!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>
    <div id="wallet_iframe"></div>
  </body>
  <script>
    /* Method call to mount the card input on your website */
    window.NI.mountCardInput('mount-id'/* the mount id*/, {
      style, 
      hostedSessionApiKey, 
      language, 
      outletRef, 
      onSuccess, 
      onFail,
      multiplePaymentMethods. // boolan flag this responsible for enable the merchant to see digital payments like wallets
      orderDetails, // if the multiplePaymentMethods is true this feild mandatory to send to the SDK the amount and currncy 
      onChangePaymentMethod: ({ selectedPaymentType, selectedDigitalPayment }) => {
        if (selectedPaymentType === 'DIGITAL_PAYMENTS' && selectedDigitalPayment) {
          enableMakePaymentButton(); // as example
        }
      },
      onChangeValidStatus: ({
    		isCVVValid,
    		isExpiryValid,
    		isNameValid,
    		isPanValid
  		}) => {
    		console.log(isCVVValid, isExpiryValid, isNameValid, isPanValid);
  		}
    });
  </script>
</html>

The following parameters are required when initializing this method:

  • style, hostedSessionApiKey, outletRef, onSuccess, onFail, onChangeValidStatus: These fields are already documented in the Web SDK Integration Guide.
  • multiplePaymentMethods (Boolean): Determines whether digital payment options such as wallets are displayed. When set to true, the UI will present two tabs:
    • Card: For traditional card payments.
    • Digital Payments: Includes wallets like Apple Pay and Google Pay.

🚧

Warning: Apple Pay will only be available on the Safari browser.

  • onChangePaymentMethod (Function): A callback function triggered when the selected payment tab changes. The function receives an object with the following properties:
    -selectedPaymentType: Either DIGITAL_PAYMENTS or CARD.
    -selectedDigitalPayment: The specific digital payment method selected, such as GOOGLE_PAY, APPLE_PAY, etc.
  • orderDetails (Object, Required when multiplePaymentMethods is true): Contains details about the transaction. Expected format:
{
  "amount": 100, // Number: Transaction amount
  "currency": "AED", // String: Currency code
  "formattedAmount": "1.00" // String: Formatted transaction amount
}

To setup Samsung Pay, we have to make some changes on NI.generateSessionId():

async function createSession() {
  try {
    const response = await window.NI.generateSessionId({
     mountId: 'wallet_iframe',
     containerId: 'wallet_modal'
    });
    sessionId = response.session_id;
  } catch (err) {
    console.error(err);
  }
}

we have to pass an object to generateSessionId The function receives an object with the following properties:

  • mountId (String, Mandatory): The ID of the container where the iframe will be injected to display the Samsung Pay portal.
  • containerId (String, Optional): If the mountId is wrapped within a container that needs to be displayed, this property can be passed. When provided, the container's display property will be set to block.
    Below is an example:
 <div id="wallet_modal" style="display: none;">
     <div id="wallet_iframe"></div>
 </div>

In this scenario, passing the containerId to generateSessionId, will change the display to block.