Pattern Library · Netlify Credit Card Modal

A presentation at Pattern Library · Netlify Credit Card Modal in August 2019 in by Christopher Murphy

Slide 1

Slide 1

Netlify Credit Card Modal
Mr Murphy ® · @fehler
Pattern Library Example Files · 2018–[…]

Slide 2

Slide 2

Netlify’s credit card modal is a lovely example of a delightful interaction pattern for entering credit card details. As you enter your card details on the left side, the credit card updates with those details on the right side.

Slide 3

Slide 3

Netlify is the tool we used to build bbuis.org. It manages continuous deployment to our server.

Slide 4

Slide 4

Clicking ‘Change payment method’ (1) launches a modal dialog, which greys out the screen and focuses on credit card details.

Slide 5

Slide 5

  1. A grey overlay fades in. 2. The modal dialog animates in from top to bottom.

Slide 6

Slide 6

  1. Enter your credit card details on the left; and 2. They appear on the ‘credit card’ on the right.

Slide 7

Slide 7

This pattern continues – enter on left (1), animate on right (2) – as you enter the rest of the details.

Slide 8

Slide 8

When entering the CVV number (1), the ‘credit card’ spins to reveal the back of the card (2). This is a delightful interaction.

Slide 9

Slide 9

Entering a card beginning with 4 (indicating a Visa card) changes the card branding to Visa.

Slide 10

Slide 10

Entering a card beginning with 5 (indicating a MasterCard) changes the card branding to MasterCard.

Slide 11

Slide 11

If you found this deck useful, follow me on Twitter: @fehler. I’m in the process of breaking down 15+ years of workshop content into small, easily consumable components. I’ll be tweeting as I’ve finished and shared these components. Cheers!

—Christopher Murphy, @fehler

Slide 12

Slide 12