GOV.UK Pay JS Commons

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

• Browsered scripts
• Utilities
• Nunjucks filters
• Releasing a new version

Browsered scripts

This is a colection of client side scripts we use throught the 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

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

Nunjucks filters

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>

Releasing a new version

Versions are released to npm, to do so you need to be a member of https://www.npmjs.com/org/govuk-pay.

Once you are a member run the following commands

• make sure you are on the latest master version of pay-js-commons
• npm login (if you’re not already logged in)
• npm version major|minor|patch depending on which sort of release it is
• npm publish
• A new commit is created automatically to increment the version, create a PR and merge this

Once you have done this it should be available instantly you can check by visiting https://www.npmjs.com/package/@govuk-pay/pay-js-commons and looking for your release, should say published a few seconds ago.

Then you can go around our repos bumping the version in this sort of fashion.