Implement a custom user interface to enter payment details

Less than 5 minutes to read

You can build a custom user interface so user can enter payment information manually.

You are then able to combine that data into a single bank payment file, and submit it to a bank.

To build a custom UI, retrieve the definition of supported bank payment file formats from Payments Out Service. Find out more about getting supported bank payment file formats.

Each definition contains rules whose sourceValidation element provides the data you need to implement UI fields.

We recommend your app parses these rules and automatically detects and uses any new elements implemented. You will then be able to avoid unnecessary development effort to support changes in the bank payment file formats.

Example rule

This is an example of a rule contained in a supported file format definition:

{
    "ruleId": "59cac637-0063-4250-bc62-55d2c39231e1",
    "type": "Header",
    "sourceValidation": {
        "jsonPath": "userIdentification.name",
        "optionality": "Required",
        "regex": "^.{1,26}$",
        "uiLabel": "Company Name",
        "example": "Sage Aus Ltd.",
        "description": "A company or user name from 1 to 26 characters in length",
        "errorMessage": "must contain at least 1 character and no more than 26 characters."
    },
    "destination": {
        "destination": "31-56"
    }
}

In this rule:

optionality defines whether the UI field is required or optional.
regex provides a regular expression that validates user input entered in the UI field.
uiLabel provides a text label for the UI field.
example provides an example value for the UI field.
description provides a description of what a user should enter in the UI field.
errorMessage provides an error message to display if user input validation fails.