DEV Community

Ali Hamza
Ali Hamza

Posted on

Day 71 of Learning MERN Stack

#node #mongodb #express #javascript

Hello Dev Community! 👋

It is officially Day 71 of my unbroken 100-day full-stack engineering run! After mastering polymorphic multi-part storage configurations yesterday, today I successfully crossed into core transactional operations: Engineering a High-Fidelity "Confirm and Pay" Checkout View and Wiring Database Inbound Array Modifications!

In real-world booking platforms, processing a successful transaction requires more than updating an absolute view; you have to link documents relationally across collections. Today, I wired that entire execution pipeline together!

🧠 What I Handled on Day 71 (Checkout Engineering & Target Mutations)

As displayed across my latest system files in "Screenshot (164).png" and "Screenshot (165).jpg", handling payments runs through structured backend steps:

1. High-Fidelity Checkout Component (/reserve)

I built out the detailed split-pane verification interface visible in "Screenshot (164).png". The layout captures target trip date selections, total guests parameter caps, card input structures, and computes subtotal ledgers dynamically:

  • Base Compute: $9000 x 5 nights = $45000.
  • Transactional Upgrades: Appending structured service charges ($85) and local tax calculations ($42) to update the final sum directly to $45127.

2. Live Document Array Mutators (MongoDB User List Insertion)

The most crucial logic happens when the user clicks the primary validation trigger labeled Confirm and pay:

  • The inbound route controller extracts the targeted property identity token (home._id) via an embedded hidden input container.
  • Instead of running isolation updates, it issues an atomized update operation straight into our MongoDB user records array (e.g., using Mongoose operators like $push or tracking active profiles inside our custom data state loops).
  • This appends the exact property listing target ID directly into the user's booking history array database matrix!

🛠️ View Markup Code Integration View

As showcased in my VS Code script structure in "Screenshot (165).jpg", the pricing breakdown variables parse raw parameters to create an adaptive enterprise layout experience:


html
<!-- Excerpt from payment.ejs showing price summaries -->
<div class="price-details-box">
    <h2>Price details</h2>
    <p>$<%= home.price %> x 5 nights</p>
    <p>Service fee: $85</p>
    <p>Taxes: $42</p>
    <strong>Total (USD): $<%= home.price * 5 + 85 + 42 %></strong>
</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)