Skip to content
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 security reassurance test #2165

Merged
merged 23 commits into from
Oct 28, 2019
Merged

Payment security reassurance test #2165

merged 23 commits into from
Oct 28, 2019

Conversation

tjsilver
Copy link
Contributor

@tjsilver tjsilver commented Oct 24, 2019

Why are you doing this?

We are testing the placement of a 'secure transaction' indicator to reassure users that their payment is secure.

Trello Card

Changes

  • Add 'secure transaction' indicator with padlock to either of 1. top of page, 2. middle of page, 3. bottom of page.
  • Put a grey background on the Stripe card form and button.

Screenshots

Control - mobile

image

Control - desktop

image

V1_securetop - mobile

image

V1_securetop - desktop

image

V2_securemiddle - mobile

image

V2_securemiddle - desktop

image

V3_securebottom - Stripe Elements - mobile

image

V3_securebottom - Direct debit Monthly/Annual

image

V3_ securebottom - Stripe elements - desktop

image

V3_securebottom - Paypal single

image

V3_securebottom - Paypal Monthly/Annual

image

V4_grey - grey background on Stripe elements container - no secure transaction indicator

image

@@ -837,6 +842,17 @@ form {
width: 100%;
}

.form__submit--secure {
margin: -6px -10px 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we achieve similar top and bottoms for margins and padding using $gu-v-spacing / 2 instead? For code and vis consistency?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe - I couldn't get $gu-v-spacing to work with negative values but maybe we can pair on this?

Copy link
Contributor

@jlieb10 jlieb10 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have a look at my comments and let me know what you think/if you have questions. I'd also like to hold off on merging until the test design concerns are addressed.

Copy link
Contributor

@ionamckendrick ionamckendrick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work. Happy with everything design wise. Including the tweak to the control 👍

@tjsilver tjsilver added the Do Not Merge May still be WIP or unstable label Oct 24, 2019
@tjsilver tjsilver force-pushed the ts-payment-security-design branch from 7b0af3c to 2b5de61 Compare October 25, 2019 11:51
Copy link
Member

@tomrf1 tomrf1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great work!

@tjsilver tjsilver requested a review from jlieb10 October 28, 2019 11:53
@tjsilver tjsilver dismissed jlieb10’s stale review October 28, 2019 12:41

I've addressed the points raised.

@tjsilver tjsilver removed the Do Not Merge May still be WIP or unstable label Oct 28, 2019
@tjsilver tjsilver merged commit f4b76d5 into master Oct 28, 2019
@tjsilver tjsilver deleted the ts-payment-security-design branch October 28, 2019 13:08
@prout-bot
Copy link

Seen on PROD (merged by @tjsilver 11 minutes and 47 seconds ago)

Sentry Release: support-client-side, support

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

Successfully merging this pull request may close these issues.

6 participants