E-commerce Web Page: Carts, Payments, Accounts and Security

Topic: Y2-3 Designing an e-commerce web page

How online shops work, explained step by step: shopping carts, payment gateways used in Ghana, user accounts, CAPTCHA and two-factor login, and security principles (Year 2); building a product page and connecting it to a database so products load automatically (Year 3).

View resource Free to join

What's inside

When you shop on Jumia or Melcom Online, you browse products, drop them in a cart, log in, pay with MoMo or a card, then track your order until it arrives. Behind that smooth experience are several parts working together. This note explains each part of an e-commerce (online shopping) website and how to build a simple one.

SUMMARIZED NOTES

Year 1: Year 1 covers the components of web pages and how to plan a website, which are the foundations for an online shop. Check out the Year notes.
Year 2: Shopping carts, payment gateways, user account management (including CAPTCHA and two-factor login), and security and trustworthiness.
Year 3: Building a simple e-commerce product page with HTML and CSS, and connecting it to a database with PHP.

Year 2: The parts of an online shop

The shopping cart

At Kumasi City Mall or Shoprite you carry a basket and fill it before paying. An online shopping cart is the virtual version: it lets you pick items, see what you've chosen, and pay when ready. It has four parts. The cart container is the "basket" holding your items. The item list shows each item's name, quantity and price. The cart controls are buttons to change quantities, remove items or go to checkout. The summary shows the total to pay; for example, two T-shirts at GH₵ 580.99 each and shoes at GH₵ 358.99 give a total of GH₵ 1,520.97.

Payment gateways

A payment gateway is a digital cashier. It takes your payment details, sends them securely to the seller's bank, checks the payment is accepted, then tells both you and the seller. It is a bridge between buyer and seller that makes payment safe, successful and fast. Gateways matter for security (encrypting card details), convenience (cards, mobile money and more), efficiency (payments in seconds) and compliance (following standards such as PCI-DSS, the Payment Card Industry Data Security Standard).

Payment gateways used in Ghana include Hubtel (MTN MoMo, AT Money, Telecel Cash, cards and QR codes), ExpressPay, Slydepay, iPay, Paystack, Flutterwave, the MTN Mobile Money API, Zeepay (linking international remittances to mobile money) and Global Accelerex. Developers practise with "sandbox" test versions, such as PayPal or Stripe, so no real money moves.

User accounts

An account makes shopping personal and safe. It lets you see your order history, saved items and vouchers and check out quickly; track orders ("Being prepared", "Shipped", "Delivered"); contact customer support; and keep your private details protected by a secure login.

Open the full resource free with a TudHub account.

More on Designing an e-commerce web page

Other resources you can find on TudHub.