A presentation at Pattern Library · Netlify Credit Card Modal by Mr Murphy
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.
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
These materials aren’t associated with an event, they’re designed to accompany my new book on user interface design, ‘Building Beautiful UIs’, which I’m working on to accompany my BBUIs course at The School of Design.
I’m writing the book live using GitHub + Jekyll + Netlify to serve a live site: As I update the book’s content on GitHub it automatically updates the site. This voodoo was created for me by the talented team at Little Thunder.
Sorry, Notist. I’m not really using my account for presentations. I’m using my account so I can share these files using your lovely interface.
for free. You
can too.