Chapter 13
Task H: Entering Additional Payment Details

Our customer is enthusiastic about our progress, but after playing with the new checkout feature for a few minutes, she has a question: how does a user enter payment details? It’s a great question, since there isn’t a way to do that. Making that possible is somewhat tricky, because each payment method requires different details. If users want to pay with a credit card, they need to enter a card number and expiration date. If they want to pay with a check, we’ll need a routing number and an account number. And for purchase orders, we need the purchase order number.

Although we could put all five fields on the screen at once, the customer immediately balks at the poor user experience that would result. Can we show the appropriate fields, depending on what payment type is chosen? Changing elements of a user interface dynamically is certainly possible with some JavaScript, but it’s quite a bit more complex than the JavaScript we’ve used thus far. Rails calls JavaScript like this app-like JavaScript, and it includes a tool named Webpacker that will help us manage it. Webpacker will handle a lot of complex setup for us so that we can focus most of our efforts on giving our customer—and our users—a great experience checking out. (Refer back to Chapter 1, ​Installing Rails​, for installation instructions for the tools used in this chapter.)