GOV.UK Pay JS Commons

Reusable js scripts for GOV.UK Pay Node.js projects

• Browsered scripts
• Utilities
• Nunjucks filters
• HTTPS base client
• Releasing a new version

Browsered scripts

This is a collection of client side scripts we use throughout GOV.UK Pay in the browser. We call it browsered because they are written in Node.js and browsered by Browserify to make them safe for all our browsers. We browserify within the microservice when it’s compiled.

List of scripts

• Field validation

Field Validation

This is a collection of validators that can be applied to inputs that will check the values and display errors using the GOV.UK elements styling.

Validators:

• required
• currency
• email
• phone
• https
• belowMaxAmount
• passwordLessThanTenChars
• isFieldGreaterThanMaxLengthChars
• isNaxsiSafe

Required

This requires a value from a given input

<form data-validate>
  <div class="govuk-form-group">
    <label for="name">Your name</label>
    <input name="name" data-validate="required" value="" />
  </div>
</form>

Currency

This requires the value is a valid currency amount i.e. “10” or ”9.99”.

<form data-validate>
  <div class="govuk-form-group">
    <label for="amount">Amount</label>
    <input name="amount" data-validate="required currency" value="" />
  </div>
</form>

Email

This requires the value is a valid email address with a TLD on the end (as technically an email doesn’t need one).

<form data-validate>
  <div class="govuk-form-group">
    <label for="email">Your email address</label>
    <input name="email" data-validate="email" value="" />
  </div>
</form>

Phone

This requires the value is a 11 digit phone number, it isn’t concerned with spacing, so 077 777 777 77 and 07777777777 are both valid.

<form data-validate>
  <div class="govuk-form-group">
    <label for="phone">Phone number</label>
    <input name="phone" data-validate="phone" value="" />
  </div>
</form>

HTTPS

This requires a link to begin with https://

<form data-validate>
  <div class="govuk-form-group">
    <label for="url">Return URL</label>
    <input name="url" data-validate="https" value="" />
  </div>
</form>

Number is less than maximum value

This requires the value is less than £100,000 as that has been deemed sensible…

<form data-validate>
  <div class="govuk-form-group">
    <label for="price">Amount</label>
    <input name="price" data-validate="belowMaxAmount" value="" />
  </div>
</form>

Password

This requires a password be at least 10 chars

<form data-validate>
  <div class="govuk-form-group">
    <label for="password">Password</label>
    <input name="password" data-validate="passwordLessThanTenChars" value="" />
  </div>
</form>

Maximum character limit

This requires a value be less than a certain number of characters. This limit is set within a data-attribute

<form data-validate>
  <div class="govuk-form-group">
    <label for="title">Title</label>
    <input name="title" data-validate="isFieldGreaterThanMaxLengthChars" data-validate-max-length="255" value="" />
  </div>
</form>

NAXSI

This checks whether a field contains characters than would cause NAXSI to get upset, meaning characters that look like code injection i.e. < > ; : ` ( ) " \' = | , ~ [ ]

<form data-validate>
  <div class="govuk-form-group">
    <label for="title">Title</label>
    <input name="title" data-validate="isNaxsiSafe" value="" />
  </div>
</form>

Utilities

Nunjucks filters

These are small functions that power the nunjucks filters but can also be used for server side stuff too.

These get loaded in to the Nunjucks environment and then can apply changes to variables in templates.

For example if a country comes in as ISO code EN it can be converted to it’s name like so

  <p>{{ countryCode | countryISOtoName }}</p>

Or a pence value can be converted to GBP

  <dl>
    <dt>Amount:</dt>
    <dd>{{ amount | penceToPounds }}</dd>
  </dl>

Axios base client

Used in our Node.js apps to call APIs such as connector or ledger.

Uses the NPM Axios library.

The base client provides the following configuration options:

• onRequestStart - Callback function before starting a API request. Mainly used for logging.
• onSuccessResponse - Callback function when request has completed successfully.
• onFailureResponse - Callback function when request has failed.
• acceptAllStatusCodes - boolean
  • By default all non 2xx responses are considered failed requests.
  • Set this to true and all status codes are considered a successful request. You code will then need to handle the response appropriately. Currently, only pay-frontend requires this to be set to true.

Built in in retry functionality

If a GET request provides a response with the error message ECONNRESET - the the Axios base client will automatically try that request another 2 times - 3 times in total.

By default, on each failed request, it will call the onFailureResponse callback.

If acceptAllStatusCodes=true, then it will call the onSuccessResponse callback.

Releasing

After a pull request is merged, Concourse will automatically create a new release pull request that increments the package version.

This pull request must be reviewed and merged by a developer.

Once the release pull request is merged, GitHub Actions will publish the new versioned package to NPM.

IMPORTANT: Other pull requests will be blocked from merging until the release pull request is merged or closed.