The shopping cart checkout screens

The web toolkit

Iframe descriptions

Other components

Building the page

Implementing in WordPress

Implementing in HTML

Configuring CSS styles

Iframe CSS styles

The checkout screens

Club selection and signup

The account manager

Proceed to Checkout buttonThe checkout screen appears when the online shopper clicks Proceed to Checkout in the shopping cart screen. Like the product details display, the <DIV> and iframe for this component replace those for the product catalog <DIV> automatically; they need not be added to the host page, and their appearance on the page is likewise defined by the same .framediv and .frame styles. The text within the checkout iframe is styled with CSS classes in the master style sheet; they begin with the string "Checkout."

Further, the checkout screen actually consists of six separate screens, which appear as the customer completes the steps in the checkout process:

Checkout method

Billing information

Shipping information

Manage shipping addresses

Payment information

Order review


Checkout method



Billing information



Shipping information



Manage shipping addresses



Payment information



Order review