Secure Fields Form Elements

API V4 docs / Secure Fields Form

Summary

  1. PayUSecureFields Class
    1. 1.1 PayUSecureFields.Init()
    2. 1.2 PayUSecureFields.createToken()
  2. Form Elements (Fields)
    1. 2.1 formElements.create()
      1. 2.1.1 Form Elements Types
      2. 2.1.2 Form Elements Options
    2. 2.2 formElement.clear()
    3. 2.3 formElement.destroy()
    4. 2.4 formElement.mount()
    5. 2.5 formElement.on()
    6. 2.6 formElement.update()
  3. Styles
    1. 3.1 Style Objects
    2. 3.2 Classes Object

1. PayUSecureFields Class

The class for instantiating the secure fields and tokenizing the card details.

1.1 PayUSecureFields.Init(authData, options?)

Creates an instance of the secure fields.

Parameters:

Name Name Type Description
auth AuthenticationData object (mandatory) Object used for authenticating the merchant with PayU. See Secure Field AuthenticationData below.
options PosFieldsOptions object (optional) Options to pass when instantiating the secure fields. See Secure Field PosFieldsOptions below.

Secure Field AuthenticationData

Name Name Type Description Example
merchantCode string (mandatory) The code assigned by PayU to the merchant MERC_1
sessionId string (mandatory) Session ID generated by using the session API S79fac7b6-4f87-4a17-92b4-bffe16f68f1e

Secure Field PosFieldsOptions

Name Name Type Description Example
directionLtr boolean (optional) Whether to display the fields from left to right or right to left. Default is true (left to right). true
fonts array (optional) A list of custom fonts to be applied to the fields. The fonts must be stored in an array of objects, with each object having an src key and a value (string) referencing the font location. For an example, see Embedding the Secure Fields Form in a Checkout Page. 
[
    {
        src: 'https://fonts.googleapis.com/css?family=Source+Code+Pro'
    }
]
luhnValidation boolean (optional) Whether to check if the card number passed luhn validation. Default is true. true

1.2 PayUSecureFields.createToken(elementType,additionalData)

Returns a token representation of the card data submitted through the secure fields form.

Parameters:

Name Name Type Description
elementType string The type of field for which the token will be created. Can be one of the following: fullCreditCard, creditCard, cardNumber. For an explanation of each field type, see Form Elements Types below.
additionalData object A JSON object containing key - value pairs of additional data. You can use this data to complement the card data provided by the customer. This is parameter is required, as you must pass at least the card holder name.

2. Form Elements (Fields)

Form elements are fields that you can show in your checkout page.

2.1 formElements.create(elementType,options?)

Instantiates a specific form element (field) to show in your checkout page. formElements is an instance returned by PayUSecureFields.Init(options?).

Parameters:

Name Name Type Description
elementType string The type of field to instantiate. See Form Elements Types below.
options object (optional) Additional options to pass when instantiating a field. Form Elements Options below.

2.1.1. Form Elements Types

Field Type Name Description
fullCreditCard Shows input fields for the card number, card expiration date and CVV code
creditCard Shows input fields for the card number and the card expiration date
cardNumber Shows an input field for the card number
creditCardExpiry Shows an input field for the card expiration date
cvv Shows an input field for the CVV code

2.1.2. Form Elements Options

Option Type Description
cardFormat boolean Whether to format the card number on input. Only applicable to card-type input fields. Default is true
maxCardPanLength number The max length of the card number on input. Only applicable to card-type input fields. If the cardFormat option is true, we will add 3 more characters for the spaces used in the format. Default is 22 characters with cardFormat set on true.
classes object Applies the specified class names to the div wrapping the input field. For more information, see Styling the Secure Fields Form.
disabled boolean Disables the input field
includeCardImage boolean Whether to show the card image on input. Only applicable to card-type input fields. Default is true
placeholders object Placeholders for default text to show in an input field. Can be any of the following: cardNumber, cvv, expDate
style object CSS styles for styling the input fields. For more information, see Styling the Secure Fields Form.

2.2 formElement.clear()

Clears the input field. formElement is an instance returned by formElements.create(elementType,options?).

2.3. formElement.destroy()

Unmounts the input field from the DOM. You can only call this once. formElement is an instance returned by formElements.create(elementType,options?).

2.4. formElement.mount(containerSelector)

Mounts a field to the DOM. formElement is an instance returned by formElements.create(elementType,options?).

Parameters:

Name Type Description
containerSelector string The ID of the form’s input element to which to mount the field.

2.5. formElement.on(eventType, callBack)

Binds an event listener to the input field, for events that are triggered when the value of an input field has been changed. formElement is an instance returned by formElements.create(elementType,options?).

Parameters:

Name Type Description
eventType string The type of event that is listened to. Can be one of the following: change, focus, blur.
callBack function A callback function. The function must take a single parameter through which a result object is returned.

The parameter of the callback function will return an object with the following properties:

Name Value Type Description
bin string The first 6 digits of the card identifying the financial institution that issued the card.
complete boolean Wether the card data is inserted and valid. Note: For card fields, this will be true if you disabled the luhn check when instantiating the secure fields.
brand string The card brand. Only returned for card numbers.
empty boolean Whether the input field is empty.
error object An error object if an error occurred on input.

If an error object is returned, its object will have the following properties:

Name Value Type Description
cvv string The result of checking the cvv code on input. Example value: wrong length
pan string The result of checking the account number on input. Example value: not luhn
expiry string The result of checking the card expiration date on input. Example value: passed

2.6. formElement.update(options)

Updates the input field with the specified options. formElement is an instance returned by formElements.create(elementType,options?).

Parameters:

Name Name Type Description
options object (optional) Additional options to pass when instantiating a field. Form Elements Options below.

3. Styles

You can style the secure fields by passing style or classes objects to the formElements.create(elementType,options?) call. For more information, see Styling the Secure Fields Form.

3.1 Style Objects

The following is a list of object key names, representing the field input status to which you can apply styles. Note that the objects must be nested with the style object.

Key Name Description
base Styles that are inherited by the other objects
complete Applied when the field’s input is valid
empty Applied when the field has no input
invalid Applied when the field’s input is invalid

Style Object Style Properties

The following is a list of style properties that you can apply to each object nested within the style object (see Style Objects for a list of objects that can be nested).

Style Type
backgroundColor string
color string
fontFamily string
fontSize string
fontSmoothing string
fontStyle string
fontVariant string
fontWeight string
letterSpacing string
padding string
textAlign string
textDecoration string
textShadow string
textTransform string

Style Object Pseudo Classes and Pseudo Elements

The following is a list of pseudo classes and pseudo elements that you can apply to each object nested within the style object (see Style Objects for a list of objects that you can be nested).

3.2 Classes Object

The following is the list of object key names, representing the field input status for which you can apply custom class names. The default class names are listed as well.

Key Name Description Default class name if not supplied
base The base class applied to the div elements wrapping each input field POSElement
complete The class name to apply to the field’s div element when the field’s input is valid. Note: For card fields, this class will also be applied for invalid input if you disabled the luhn check when instantiating the secure fields. POSElement–complete
empty The class name to apply to the field’s div element when the field has no input POSElement–empty
focus The class name to apply to the field’s div element when the field gets focus POSElement–focus
invalid The class name to apply to the field’s div element when the field’s input is invalid POSElement–invalid