Instructions for Nilon – Payment Token Customized UI

Home Instructions for Nilon – Payment Token Customized UI

Using this Nilon checkout plugin, user will be able to complete payment by entering:

Customer will have the ability to:

Card Number

Expiry date

CVV

The Nilon payment gateway allows you to use an iframe to embed the payment pages into your website.

Using the iframe mode requires the merchant web site to use the HTTPS protocol on all of its pages.

If you wish to implement a custom checkout experience while still limiting your PCI compliance, the recommended approach is to use the Nilon Checkout plugin iFrame. 

Precondition: HTML based web application for embedding Nilon Checkout.

Our Nilon Payment gateway support Major payment such as 

Prerequisite

Create an Account on the Nilon Portal 

Signup for the test API keys for developers  

Enabling Pay UI

Login to the virtual terminal, navigate to Main Menu ‘Manage’ then ‘Pay UI’ Sub Menu

  • If you need to create a sandbox account, please follow the steps in the link.

Trusted URL: URL’s need to be set in production so that the iframe can be activated only from the websites its supposed to be activated from. Separate multiple domains with commas.
Ex: https://www.yourdomain.com, https://subdomain.yourdomain.com

CSS: Specify the style sheet to be used, this CSS is based on generic Nilon Style sheet. Your styles can be applied by overriding specific parts of the CSS. This field is optional.

Key: The key that will be generated by Nilon, has to be used as authentication key to authenticate the iframe on your end.

Integration steps

Implementing on your page

Code for Developers

Configuration parameters

These are the mandatory parameters that need to be added to your <script> tag to configure PayUI checkout parameters:

Parameter Description

data-key

The key generated by Nilon to authenticate Pay UI

data-mode

accepted values: token, payment
token: will set the mode of the Pay UI for tokenization only
payment: will set the mode of the Pay UI for payment

data-displayMode

Accepted values: popup, inline
popup: will create a modal popup of the UI in a parent page
inline: will create an inline content within the parent page

data-firstname
Add parameter to enter First name field on the UI
data-lastname
Add parameter to enter Last name field on the UI.
data-city
Add parameter to enter City field on the UI
data-address
Add parameter to enter Address field on the UI
data-state
Add parameter to enter State field on the UI
data-zipcode
Add parameter to enter Zip Code field on the UI
data-email

Add parameter to enter email-Id field on the UI

data-phone

Add parameter to enter Phone no field on the UI

data-invoiceno

Add parameter to enter invoicefield on the UI

UI reference