New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Payment card details #80

Open
govuk-design-system opened this Issue Jan 15, 2018 · 6 comments

Comments

7 participants
@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 15, 2018

Use this issue to discuss the payment card details pattern in the GOV.UK Design System.

What

Help users provide card details so that you can make payments to them or accept payments from them.

This pattern was contributed to the Design System by Sonia Turcotte at GDS on 9 August 2018.

Why

This pattern:

  • alerts teams to the existence of the GOV.UK Pay platform
  • helps teams who can't use Pay to capture users payment card details
@frankieroberto

This comment has been minimized.

Copy link
Collaborator

frankieroberto commented Jul 17, 2018

Any component for this should be tested with the 'remember bank card details' feature on modern browsers, which can save users lots of time (and make payment possible, if they don't have their card with them).

This might mean adding the following autocomplete values: cc-number, cc-exp-month, cc-exp-year, etc. (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete for the full list).

@dashouse dashouse changed the title Payment details Card details Jul 27, 2018

@dashouse

This comment has been minimized.

Copy link

dashouse commented Jul 27, 2018

I have split out this Issue, this is now specific to Card details. There is a separate issue for Bank details

@timpaul timpaul changed the title Card details Payment card details Aug 8, 2018

@timpaul timpaul changed the title Payment card details Card details Aug 8, 2018

@amyhupe amyhupe changed the title Card details Payment card details Aug 9, 2018

@ignaciaorellana ignaciaorellana moved this from To do to In progress in GOV.UK Design System Community Backlog Aug 13, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Aug 28, 2018

Working group review session

This proposal was reviewed by a panel of designers from GDS, HMRC, DWP, DEFRA and Home Office on the 16 August 2018.

The panel agreed that:

  • the pattern should be published in the GOV.UK Design System
  • payment summary and cardholder address details were out of scope

The panel also made the following recommendations.

Design

  • Consider another way of highlighting the logo of the card instead of greying out the other ones to help users with certain visual impairments
  • Consider adding text alongside the card logos

Guidance

  • Add information about the range of users, browsers and assistive technology that the pattern has been tested with
  • Add information explaining how the pattern has been made accessible eg alt text on card logos
  • Explain that the field order follows the order that the information is presented on the card
  • Describe the behaviour of the card lookup feature when JavaScript is not available
  • Add accessibility criteria for the pattern
  • Explain when and how to to let browsers autofill a user’s card details
  • Clarify that people should either use GOV.UK Pay or follow the guidance in the design pattern
  • Explain that asking for multiple card details on the page, rather than one field per page, helps users to transcribe the details from their card

Examples

  • Add an error state example for when incorrect details are entered
  • Add coded examples for the reusable parts of the pattern
  • Show how the pattern works on mobile devices

Many thanks to @soniaturcotte for contributing this pattern.

@timpaul timpaul moved this from In progress to Published in GOV.UK Design System Community Backlog Sep 20, 2018

@dashouse

This comment has been minimized.

Copy link

dashouse commented Oct 15, 2018

Dropbox Paper audit

On 15 October 2018 the Design System team reviewed a Dropbox Paper document discussing the Credit card details pattern.

The aim was to reduce the number of places containing guidance and code by:

  • migrating relevant, useful content into the Design System itself
  • recording important research findings in the community backlog
  • removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

Updates to the Design System

The Design System team has carried out the following update to ensure that relevant, useful content from the Dropbox Paper file is added to the Design System.

  • Add guidance to the Design System saying not to assume that the name on the card is the same as the user's name entered elsewhere in the service
@mikeash82

This comment has been minimized.

Copy link

mikeash82 commented Nov 28, 2018

@gavinwye commented on 31 Jan 2017

Collecting bank account details
image

Displaying bank account details
image

@alex16wake commented on 25 Jul 2017

image

@adamliptrot-oc commented on 30 Oct 2017

Do we have any UR on the best way to present a Sort-code input? With the 3 input option shown in one of the screenshots how would you mark up that? It feels like the label for each input would be odd for screenreaders.

@jenrahm commented on 31 Oct 2017

image

image

@jennifer-hodgson commented on 8 Mar

Repayments service
Prototype here: https://www.prototypes.tax.service.gov.uk/repayments-prototype/version2/refund-and-bank-details
repayments

@36degrees

This comment has been minimized.

Copy link

36degrees commented Nov 29, 2018

@mikeash82 there is a separate issue for bank details.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment