I am currently designing a single page checkout form. I would appreciate some feedback on the lengths of my input fields.
In the Billing and Shipping sections, I have staggered the length of the fields, trying to keep the size of the input field relative to the size of the expected input.
However, in the Payment section, all the input fields are of the same length. Do you think this breaks the consistency of the form since the Billing and Shipping sections have staggered lengths for input fields? Should I try to vary the lengths of the inputs in the payment section so that it looks more like the other sections?
The more consistent you can be the better. In my opinion keeping the fields justified like you have in the billing section feels cleaner. A couple quick wins would be extending the city and country field widths to match the others, then put the state and zip on the same line.
Bonus: In a previous life I worked on a one-page checkout option that floated the three sections from left to right. That was fun, but looking back, the flow of the version you have might be easier on the user. Seeing all three sections floated left to right could potentially be overwhelming.
As Luke Wroblewski points out in "Web Form Design", the size of of an input field can help provide your form fields with affordance. The way you've adjusted the field lengths in the billing and shipping sections are good because they provide the user with an idea of what they're expected to enter. It would be a good idea to be consistent and have the input fields in the payment details section also have field lengths that closely match the space needed for the user to enter the appropriate data.
As an aside, you might find the article "The Ultimate UX Design of: the Credit Card Payment Form" useful while working on the payment details section. Good luck on your project!
Aesthetically, input elements look better if they're equal widths, but on the other hand input elements that are only as wide as they each need to be will hint what they're for, as mentioned.
As an aside, I would put the Cancel and Buy buttons beside each other (ie, flush-right with Buy on the right) because doing so ensures that the user will see both and reinforces the fact that they're siblings (ie, they affect the same form in different ways).