Overview

The payment portion of the Checkout process is fairly straightforward. In most cases, the only work a user will have to do is to add a P.O. number and a Customer P.O or reference number. We have also simplified credit card payment entry by 2 form fields.
3 design scenarios are covered below:

1 Scenario - The shipping address is to a drop ship customer 

  1. User must enter both a PO number and a customer PO number or reference (required fields) to progress through remaining checkout steps (Design 1). The "Save and Continue" button remains disabled until 1 character is placed into both entry fields (Design 1a). Once data has been entered, the button becomes enabled.
  2. User has the option to print the PO number to their pack slip or bill of lading for both PO entry options. For drop ship customer's, the "My customer's PO number or reference" will default to being checked.
  3. Select a Payment type will continue to default to "Bill my account."
  4. Rolling over the "i" icons will display our standard roll over layer (Design 1b).
    The roll over for "My PO number" will say "If you do not have a PO number, please enter your full name."
    The roll over for "My Customer's PO number or reference" will say "If you do not have a PO number, please enter a helpful reference."
Design 1Design 1aDesign 1b


2 Scenario - The shipping address is to a non-drop ship customer 

  1. User must enter a PO number (required), but the "My customer's PO number or a reference" is optional. (Design 2 - please note the text change from "required" to optional on step 2.) 
  2. The "Save and Continue" button remains disabled until 1 character is placed into the "My PO number" entry field. (Design 2b)
  3. User has the option to print the PO number to their pack slip or bill of lading for both PO entry options. For non-drop ship customer's, the "My PO number" will default to being checked.
Design 2 - Non Drop-ShipDesign 2b - Non Drop-Ship

 

3 Payment type - Pay by Credit Card

Selecting "Pay by Credit Card" will display a set of form fields below this selection.

The label for each will appear inside the entry field (minus the expires drop downs). Once a user creates focus by placing cursor inside the field, the text will disappear. All fields are required except for Email receipt.

Design 3

 

 

 

 


Wireframe design flows

 

 

 

Current Payment Screens
Bill to my AccountPay by Credit Card

Attachments:

mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
Payment_BillToMyAccount.png (image/png)
Payment_CreditCard.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
image2013-4-29 16:15:7.png (image/png)
image2013-4-29 16:16:25.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
Checkout_Payment_Final.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
Checkout_Payment_1.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_2.png (image/png)
Checkout_Payment_1.png (image/png)
Checkout_Payment_1.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_2.png (image/png)
Checkout_Payment_3.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
Checkout_Payment_1.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_1.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_1c.png (image/png)
Checkout_Payment_2.png (image/png)
Checkout_Payment_3.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
Checkout_Payment_3.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
Checkout_Payment_2b.png (image/png)
Checkout_Payment_1.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_1c.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_1c.png (image/png)
Checkout_Payment_2.png (image/png)
Checkout_Payment_2b.png (image/png)
Checkout_Payment_3.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
Checkout_Payment_1_NewView.png (image/png)
Checkout_Payment_1_NewView.png (image/png)
Checkout_Payment_1_NewViewB.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_1c.png (image/png)
Checkout_Payment_3.png (image/png)
Checkout_Payment_2.png (image/png)
Checkout_Payment_2b.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
mockup_Payment - Checkout.bmml (text/xml)
mockup_Payment - Checkout.png (image/png)
Checkout_Payment_1_NewViewC.png (image/png)
Checkout_Payment_1_NewView.png (image/png)
Checkout_Payment_1_NewView.png (image/png)
Checkout_Payment_1_NewViewB.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_1c.png (image/png)
Checkout_Payment_2.png (image/png)
Checkout_Payment_2b.png (image/png)
Checkout_Payment_3.png (image/png)
Checkout_Payment_1_NewView.png (image/png)
Checkout_Payment_1b.png (image/png)
Checkout_Payment_1c.png (image/png)