How to improve billing address pattern?

Question

I'm trying to find the best pattern to use in a sales service flow where some employers will be using an app to sale products in local stores. They will keep in touch with many clients so they need to spend little time on feedback (it's an important issue here).

My problem came up trying to accomplish the best use in the below flow:

Client address is required, but the billing address may be different from the first option.

I've worked two alternatives, but I still have doubts about the best pattern:

Option 1 (with checkbox): unselected by default, when it was selected, appear the billing address with "X" to go back.

Option 2: I've defined a condition with radio buttons. It's much simpler than first but looks better!?

I'm a native Spanish speaker so the labels may need to be improved as well.

Answer 1

check out amazon.com shipping process. you fill out one address ( client address ) there is a check box that says bill to the same address, if the box is unchecked second address form appears.

Answer 2

Ship to a different address?

In the US the distinction is usually between "shipping" and "billing" addresses. I realize this might not map directly to your situation, but the concept might.

The pattern that is most common/simple/effective:

• allows for the capture of one address (whichever address make most sense as default - in most scenarios it's billing, as this changes less frequently than shipping)
• assumes that both addresses are the same
• allows the user to input an alternative address

This is done with by using a checkbox to toggle a the second address form, which is hidden with javascript. The string that accompanies the checkbox usually says something like "Ship to a different address?"

This mockup shows what it looks like when the billing address is default.

^{download bmml source – Wireframes created with Balsamiq Mockups}