Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Checkout Forms

Related:

Promo Codes

Promo Code Form

Apply a Promo Code

Promo Code Form Error

Apply a Promo Code

Promo Code Applied, Only One Allowed

Apply a Promo Code

Promotion WOAS50 applied

All Sales Final - An Additional 50% Off Sale Products Only

Promo Code Applied, More Than One Allowed

Apply a Promo Code

Promotion WOAS50 applied

All Sales Final - An Additional 50% Off Sale Products Only

Two Promo Codes Applied, Two Allowed

Apply a Promo Code

Promotion WOAS50 applied

All Sales Final - An Additional 50% Off Sale Products Only

Promotion WOAS50 applied

All Sales Final - An Additional 50% Off Sale Products Only

Gift Cards

Gift Card Form

Pay with a Gift Card

Gift Card Form Error

Pay with a Gift Card

Applied Gift Cards

Pay with a Gift Card

Gift Card ending in 0123

$25.00 applied from gift card

$0.00 card balance

Gift Card ending in 9999

$36.14 applied from gift card

$13.86 card balance

$0.00 remaining order balance

Gift Card Balance Check

Pay with a Gift Card

Saved Credit Card

Visa ending in 0023 Expires Jan 2018

Saved Credit Card (No Expiration)

Visa ending in 0023

Credit Card Dialogs

Add New Credit Card Dialog (No Saved Addresses)

Add Credit Card

Add New Credit Card Dialog (Has Saved Addresses)

Add Credit Card

Edit Credit Card Dialog (No Saved Addresses)

Edit Credit Card

Edit Credit Card Dialog (Has Saved Addresses)

Edit Credit Card

Security Code Bubbles

Use the data-cccode-label attribute to point to the radio element label the bubble is matched with. A full example is viewable on the Signed in Payment variation.

What’s this?

Close

What is a Card Verification

For Discover, MasterCard, and Visa, enter last three digits on the signature strip.

For American Express, enter the four digits in small print on the front of the card.

New Billing Address

Use the cccode-showaddress class to show the billing address form options.

with Billing Address Option

What’s this?

Close

What is a Card Verification

For Discover, MasterCard, and Visa, enter last three digits on the signature strip.

For American Express, enter the four digits in small print on the front of the card.

New Billing Address

To move the security code bubble around with the appropriate radio button selection on the Signed in Payment variation, add data-cccode-radio to each radio input element. Also add data-cccode-needs-billing-address if the billing address form fields should be shown.