CHECKOUT SYSTEM APPLICATION

TECHNOLOGIES

BACKENDphp logo
DATABASEmysql logo
FRONTENDjquery logo
PROCESSING GATEWAYCYBERSOURCE
STYLINGCSS
MARKUPHTML 5
Checkout System image

DEVELOPMENT

FRAMEWORK PROPRIETARY
DESIGN PATTERN MVC
TEMPLATE ENGINE NO

This customer checkout system was developed to integrate seemlessly with the client's current custom shopping cart, their various backend order tracking applications and their custom Content Management System.

The checkout system's sole purpose was to facilitate the processing of customer orders, while notifying the correct employees of current transactions, interfacing those transactions with numerous accounting, commission calculating, and other in-house financial tracking applications.

The system was responsible for:

  1. Display customer's order
  2. Displaying any changes made to the final order
  3. Promo code validation
  4. Calculation of the subtotal, shipping and handling, location based sales tax, promo code (if applicable and valid), and total
  5. Calculate regional salon commission and apply commission to correct salon geographically
  6. Credit Card processing
  7. Order Confirmation
  8. Email multiple employees based on order conditions
  9. Email customer about processed order and receipt

BACK

 CHECKOUT SYSTEM DETAILS

 ORDER SUMMARY

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Display item SKU, Short Description, Item Size, Item Price and Extended Price
  •  Calculate Subtotal
  •  Calculate Shipping and Handling
  •  Calculate Sales Tax
  •  Validate and Calculate Promotion Discount
  •  Calculate Final Total

 WHAT DARYL DID

 BACKEND70% CHECKOUT SYSTEM FUNCTIONALITY

ALL CHECKOUT SYSTEM INTERFACING FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS AND DESIGN

A user would see their final items, and all other calculations based off their user account data when logged in as part of the checkout process.

Back to top of web development portfolio TOP

 REVIEW ITEM

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  View Item Image
  •  View Item Description
  •  View Item Ingredients

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

Even deep in the checkout process all item images, description, and ingredients are available for the customer to reference without navigating away from the flow of purchase.

Back to top of web development portfolio TOP

 DISCOUNT INVALID

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Validate Promotion Code
  •  Display Validity of Code

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

This would check the validity of a promo code by using ajax and a json callback to communicate with the database.

Back to top of web development portfolio TOP

 DISCOUNT ERROR

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Validate Promotion Code
  •  Display Validity Code Parameters

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

The validity of promo codes had date, time, and price variables to take into account.

Back to top of web development portfolio TOP

 SKU DISCOUNT

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Valid Promotion Code - SKU based

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

Valid promotion conditions could be either item based, subtotal percentage based, subtotal specific amount based, and more. This was SKU based.

Back to top of web development portfolio TOP

 MULTI SKU DISCOUNT

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Valid Promotion Code - Multi SKU based

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

Valid promotion conditions could be either item based, subtotal percentage based, subtotal specific amount based, and more. This was a Multi SKU based condition in order to qualify for the discount.

Back to top of web development portfolio TOP

 FREE SHIPPING

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Valid Promotion
  •  Valid Customer
  •  Valid Subtotal
  •  Apply Shipping Discount

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

Some promotional discounts had conditions based on either promotion code, customer rank, or order subtotal in order to qualify for free shipping.

Back to top of web development portfolio TOP

 FLAT DISCOUNT

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Valid Promotion
  •  Valid Customer
  •  Valid Subtotal

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

Some promotions offered discounts to qualifying customers a flat amount off determined by customer rank, type of promotion, or even currency and country of order origin.

Back to top of web development portfolio TOP

 EXPIRED PROMOTIONS

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Validate Promotion Code

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

Invalid promotions - Display expired on date.

Back to top of web development portfolio TOP

 PREMATURE PROMOTIONS

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Validate Promotion Code

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

Invalid promotions - premature promotion. Display date when promotion starts.

Back to top of web development portfolio TOP

 PROMO COMBINATIONS

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Validate Promotion Code
  •  Apply Promotion Code
  •  Verify and apply other qualifing discounts and/or promotions

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTENDGRAPHICS

Multiple promotion and discount combinations based off items being ordered, type of promotion applied, and customer account rank.

Back to top of web development portfolio TOP

 CREDIT CARD INFO

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Order summary with discounts, tax, and shipping applied
  •  Credit Card Information
  •  Credit Card Validation
  •  Checkout Stage

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND70% HTML, GRAPHICS

Credit card information and verification. Preprocessing checkout stage.

Back to top of web development portfolio TOP

 CREDIT APPLY SETUP

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  Comission based credit for client salons
  •  Customer salon selection
  •  Apply on processing stage - if successful
  •  Checkout Stage

 WHAT DARYL DID

 BACKEND70% BACKEND PROCESSING FUNCTIONALITY
 FRONTEND
20% FRONTEND JS FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND30% BACKEND PROCESSING
  FRONTEND
SOME HTML,NONE OF THE JAVASCRIPT, AND NO GRAPHICS

Certain salons would get commission credit for a purchase based off of geographic location. Most of this code was already written by another developer. The app needed to be integrated and functioning with the checkout system.

Back to top of web development portfolio TOP

 CC PROCESSING

Detail Image of Portfolio item Checkout System - image 1
VIEW IMAGE

FUNCTIONALITY

  •  CC Validation
  •  Gateway Processing
  •  Database record insertions and updates
  •  Receipt emailed to the customer
  •  Correct employees notified of an order
  •  Company qualifying client - credit applied and notified
  •  Final Checkout Stage

 WHAT DARYL DID

 BACKENDALL FUNCTIONALITY
 FRONTENDALL FUNCTIONALITY

 WHAT DARYL DID NOT DO

  BACKEND-
  FRONTEND70% HTML, GRAPHICS

Credit card information validated and processed interfacing with Cybersource gateway API. Multiple database table manipulations for new orders and inventory updates. Both the customer and the correct employees needed to be notified of the order. Customer emailed a reciept, employees notifications. Company clients also notified that commission was applied to their account and the amount. The customer was redirected and displayed reasons if Credit Card processing failed. If succesful, order summary displayed as a receipt.

Back to top of web development portfolio TOP