Pattern Library · Netlify Credit Card Modal

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

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.

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

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

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

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

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

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

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

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

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