How Online Payments Work — From Checkout to Bank Account

The Money Chain

When someone pays for something online, money doesn't just magically appear in your bank account. It travels through a chain of companies — each one doing a specific job — before it lands with you. This chain is called the payment stack.

At its simplest, the payment stack has three main players:

• The customer — the person buying something, using a credit card or digital wallet
• The payment processor / gateway — the tool that takes the card details and talks to the bank (Stripe, PayPal, Square)
• The merchant's bank — the business's bank, which receives the money after the card network approves it

Every time you buy something online, this chain runs. It usually takes 2–3 business days for the money to actually arrive in the seller's bank account, even though the purchase itself feels instant.

Why Understanding This Saves You Headaches

If you're selling anything online — a course, a tool, a product — you'll eventually run into a payment problem. A charge gets disputed. A card gets declined. Money takes longer than expected to arrive. If you don't know how the system works, these things feel like magic bad luck. If you do know how it works, they're fixable problems.

For example, many new sellers panic when a customer disputes a charge (called a "chargeback"). But a chargeback is just the customer's bank asking your bank: "Did this purchase actually happen?" Knowing this helps you prepare the right documents to win the dispute.

The 5-Step Payment Journey

Here's what actually happens from click to cash:

Stripe Checkout in Action

Here's what a simple Stripe payment integration looks like in code. You call Stripe's function, pass the amount and currency, and Stripe handles everything else — the card details, the authorization, the settlement.

// Load Stripe library
const stripe = require('stripe')('sk_test_your_key');

// Create a payment intent — this starts the whole chain
const paymentIntent = await stripe.paymentIntents.create({
  amount: 2900,      // $29.00 (amounts are in cents)
  currency: 'usd',   // US dollars
  customer: 'cus_123',
});

// Stripe returns a "client secret" — your frontend uses this
// to show the secure card form without ever touching your server
res.send({ clientSecret: paymentIntent.client_secret });

Notice the amount is 2900 — that's $29.00 in cents, because most payment systems count in the smallest currency unit. One dollar = 100 cents.

// When the customer fills in their card and clicks Pay:
const result = await stripe.confirmCardPayment(clientSecret, {
  payment_method: {
    card: cardElement,   // Stripe's safe card input box
    billing_details: { name: 'Alex Rivera' }
  }
});

// result.paymentIntent.status === 'succeeded' means it worked!
if (result.paymentIntent.status === 'succeeded') {
  console.log('Payment complete! Money is on its way.');
}

That's it — a complete, secure payment in about 20 lines of code. Stripe handles the card network, the authorization, and the settlement. You just handle the result.

Knowledge Check

Test what you learned with this quick quiz.