← Back to Course

Module -14

Website Types & E-commerce Security

Personal portfolio vs corporate site vs online store — each has different needs. Plus: how online payments actually work to keep customers secure.

Shopify, WooCommerce, Stripe, PayPal, Square. SSL certificates, PCI compliance checkers, security scanning tools. Authentication services (Auth0, Firebase Auth).

E-commerce exploded post-2020. Headless commerce separates frontend from backend. Buy-now-pay-later. Mobile payments. Subscription models everywhere. Trust badges matter more than ever.

Match complexity to needs. Personal sites don't need enterprise features. E-commerce demands trust. Security isn't optional when money is involved.

Part A

Core Concepts

01

Types of Websites

Not all websites are created equal. Understanding the type helps you choose the right tools, hosting, and approach.

👤
Personal / Portfolio
• Showcases individual work/identity
• Usually static content
• Low traffic expectations
• Full creative control
• Often developer's first project
Typical features
About, Projects, Contact, Blog, Resume
Good tools
GitHub Pages, Netlify, Jekyll, Hugo
Personal Websites & Portfolios

Personal sites showcase you: your work, thoughts, identity. Usually static, low traffic, low complexity. Perfect for learning web development. Full creative freedom since you're the only stakeholder.

🏢
Business / Corporate
• Represents a company/organization
• Multiple stakeholders & approvals
• Brand guidelines to follow
• Lead generation focus
• Often needs CMS for updates
Typical features
About, Services, Team, Blog, Contact forms, Careers
Good tools
WordPress, Webflow, Squarespace, custom CMS
Business / Corporate Websites

Business sites represent organizations. More stakeholders, brand constraints, and approval processes. Need content management systems (CMS) so non-technical staff can update. Lead generation (contact forms) is often the primary goal.

🛒
E-commerce / Online Store
• Sells products or services online
• Handles payments (serious security)
• Inventory management
• Shipping/fulfillment integration
• Customer accounts & orders
Typical features
Products, Cart, Checkout, Accounts, Order history
Good tools
Shopify, WooCommerce, BigCommerce, custom
E-commerce / Online Stores

E-commerce sites sell things. Most complex type: payment processing, inventory, shipping, customer accounts, order management. Security is critical — you're handling money and personal data. Often best to use established platforms.

⚙️
Web Application / SaaS
• Interactive software in browser
• User accounts & authentication
• Complex state management
• Often subscription-based
• More app than website
Examples
Figma, Notion, Gmail, Slack, Trello
Technologies
React, Vue, Angular + backends
Web Applications / SaaS

Web apps are software that runs in the browser. More like applications than documents. Complex interactions, user authentication, real-time updates. Figma, Notion, Gmail — these are web apps, not websites.

Hybrid

Many sites blend types: a business site with a blog, an e-commerce store with account dashboards. Start with core needs, add features as required.

02

How E-commerce Works

Online stores have specific requirements. Understanding the pieces helps you build or evaluate e-commerce solutions.

📦
Product Catalog
Items, prices, variants, inventory
🛒
Shopping Cart
Add items, quantities, persist session
💳
Checkout
Shipping, payment, order creation
👤
Customer Accounts
Login, order history, saved addresses
📊
Admin Dashboard
Manage products, orders, customers
🚚
Fulfillment
Shipping rates, tracking, returns
The Pieces of an Online Store

E-commerce requires many systems working together: product management, shopping cart, secure checkout, customer accounts, admin tools, and fulfillment. This is why platforms like Shopify exist — building all this yourself is enormous work.

Shopify
Hosted, easy setup, monthly fee. Best for most stores.
WooCommerce
WordPress plugin, self-hosted. More control, more responsibility.
BigCommerce
Enterprise-focused, robust features, higher cost.
Custom + Stripe
Full control, significant development effort. For unique needs.
E-commerce Platform Options

Shopify is the go-to for most stores — handles everything. WooCommerce adds commerce to WordPress. Custom builds (using Stripe) make sense only for unique requirements. Don't reinvent the wheel for standard e-commerce.

🔒
HTTPS/SSL — Padlock icon shows secure connection
💳
Payment badges — Visa, Mastercard, PayPal logos
⭐
Reviews — Social proof from real customers
📜
Policies — Clear return, privacy, shipping policies
📞
Contact info — Real address, phone, customer service
Building Customer Trust

Customers won't buy if they don't trust you. Trust signals reduce anxiety: SSL padlock, recognizable payment logos, customer reviews, clear policies, and visible contact information. Missing these? Cart abandonment skyrockets.

Cart Abandonment

~70% of shopping carts are abandoned. Main reasons: unexpected costs, required account creation, complex checkout, security concerns, no trust signals.

03

How Online Payments Work

When you enter your credit card online, what actually happens? Understanding this demystifies e-commerce security.

1
Customer enters card on your site
2
Payment processor (Stripe) encrypts & sends to card network
3
Card network (Visa/MC) routes to issuing bank
4
Customer's bank approves/declines transaction
5
Response flows back: Approved ✓ or Declined ✗
All this happens in ~2 seconds
Payment Processing Flow

When you pay online: your card info goes to a payment processor (Stripe), which talks to card networks (Visa/MC), which talk to your bank. The bank approves or declines. This chain takes seconds but involves multiple parties with security at each step.

Card number
4242 4242 4242 4242
→
Token
tok_1Mq...
Tokenization replaces sensitive card data with a random token. Your website only ever sees the token — never the actual card number. If your database is breached, attackers get useless tokens, not cards.
How Stripe Protects Card Data

Tokenization is how modern payment processors keep cards safe. The actual card number never touches your server. Stripe's JavaScript collects the card, sends it directly to Stripe, and returns a token. You store only the token.

PCI DSS
Payment Card Industry Data Security Standard — rules for handling card data. Required by Visa/Mastercard. Fines for non-compliance.
If you handle cards yourself:
• Network segmentation
• Encryption everywhere
• Security audits
• Penetration testing
• $50k-500k+ compliance costs
If you use Stripe/PayPal:
• They handle PCI compliance
• You fill out a simple SAQ
• Cards never touch your server
• Much lower liability
• Much lower cost
PCI DSS: The Security Standard

PCI DSS is the security standard for handling card data. Full compliance is complex and expensive. But if you use Stripe, PayPal, or Shopify, they handle PCI compliance. You just need to not do stupid things (like logging card numbers).

⚠️HTTP
Data sent in plain text. Anyone on the network can read it. Browsers show "Not Secure" warning.
🔒HTTPS
Data encrypted in transit. Can't be read even if intercepted. Padlock icon shows secure.
SSL/TLS certificates enable HTTPS. Let's Encrypt provides free certificates. All hosting platforms include them. There's no excuse for HTTP in 2024.
HTTPS: The Foundation

HTTPS encrypts all data between browser and server. Without it, anyone on the network (coffee shop WiFi, ISP) could read passwords, cards, everything. Modern hosting platforms provide free SSL certificates via Let's Encrypt.

3D Secure

3D Secure (Verified by Visa, Mastercard SecureCode) adds a second authentication step. Reduces fraud and shifts liability from merchant to bank.

04

User Authentication Security

When users create accounts on your site, you're responsible for protecting their credentials.

NEVER do this:
database.save({ password: "hunter2" })
Storing plain text passwords = disaster waiting to happen
Always hash passwords:
database.save({ password: bcrypt.hash("hunter2") })
// Stored: $2b$10$dG1r...
Hash is one-way. Can't recover original password.
Secure Password Handling

Never store passwords in plain text. Use bcrypt or similar to hash passwords. Hashes are one-way — even you can't recover the original. If your database leaks, attackers get useless hashes, not passwords.

"Sign in with..."
G
🍎
🐙
OAuth lets users log in with existing accounts (Google, Apple, GitHub). You never see their password — Google confirms identity. Reduces friction and security responsibility.
Social Login (OAuth)

OAuth ("Sign in with Google") delegates authentication to trusted providers. Users don't create yet another password. You don't store credentials. The provider confirms identity. Win-win for security and UX.

🔑
Something you know
Password
📱
Something you have
Phone, hardware key
👆
Something you are
Fingerprint, face
2FA requires two different factors. Even if password is stolen, attacker needs your phone too. SMS codes, authenticator apps, or hardware keys (YubiKey).
Two-Factor Authentication

Two-factor authentication requires proof from two categories: something you know (password) + something you have (phone) or something you are (fingerprint). Makes stolen passwords useless without the second factor.

Security is hard. Authentication has countless edge cases: password reset flows, session management, brute force protection, account lockout... Use proven solutions.
Auth0 — Full-featured, enterprise-ready
Firebase Auth — Google's solution, easy integration
Supabase Auth — Open source alternative
Clerk — Modern, developer-friendly
Don't Build Auth Yourself

Authentication is security-critical with many edge cases. Don't build it yourself unless you have security expertise. Use services like Auth0, Firebase Auth, or Clerk — they've solved the hard problems and handle ongoing security updates.

Passkeys

Passkeys (WebAuthn) are replacing passwords — cryptographic keys tied to devices. More secure, no passwords to steal. Apple, Google, Microsoft all support them now.

Part H

Self-Assessment

15

Self-Assessment

Test your understanding of Website Types & E-commerce Security. Click each question to reveal the answer.

Q1

What's the main difference between a website and a web application?

Click to reveal
Q2

Why should you use Shopify instead of building e-commerce from scratch?

Click to reveal
Q3

What is tokenization and why does it protect credit cards?

Click to reveal
Q4

What is PCI DSS and how do you handle it?

Click to reveal
Q5

Why should you never store passwords in plain text?

Click to reveal
Q6

What is OAuth and why is it more secure than passwords?

Click to reveal

Key Takeaways

Match complexity to website type
Personal → Business → E-commerce → Web App

Personal sites are simple. Business sites need CMS. E-commerce needs security. Web apps need everything. Don't over-engineer a portfolio; don't under-engineer a store.

Use e-commerce platforms, don't build
ShopifyWooCommerce

Building e-commerce from scratch is enormous work. Shopify, WooCommerce handle cart, checkout, payments, inventory. Focus on your products, not plumbing.

Card numbers never touch your server
4242... → tok_1Mq... (token)

Stripe/PayPal tokenize cards client-side. You only see tokens. If your database is breached, attackers get useless tokens. This is why you use payment processors.

Let Stripe handle PCI compliance
$50k+ audit → Stripe handles it

Full PCI compliance is expensive and complex. Payment processors are already compliant. Use them and you inherit their compliance with minimal paperwork.

HTTPS everywhere, no exceptions
🔒 Free via Let's Encrypt

HTTPS encrypts all traffic. Without it, anyone on the network can read sensitive data. All modern hosting includes free SSL certificates. There's no excuse.

Use auth services, don't build
Auth0Firebase

Authentication has countless security edge cases. Use Auth0, Firebase Auth, or Clerk — they've solved the hard problems. OAuth (Sign in with Google) is even better.