Manual UPI payments
Customers scanned a QR code and typed their transaction ID by hand. Every payment had to be matched against the bank statement.
← All work
Case study · E-commerce website · Social media ads
KIO Organics & Foods
An online store for pure honey, wood-pressed oils and desi ghee from Nandyal, Andhra Pradesh. Customers browse, add to cart and pay with PhonePe, Google Pay, Paytm, cards or net banking — and every payment is verified on the server before the order is confirmed. Alongside the store, I run KIO's social media ads.
- ClientKIO Organics and Foods
- IndustryOrganic & natural foods
- LocationNandyal, Andhra Pradesh
- My roleDesign, development & social media ads
7products across Honey, Oils & Ghee
8ways to pay, incl. Cash on Delivery
100%online payments verified on the server
2automatic emails for every order
The challenge
Great products, no easy way to buy online
KIO makes raw honey, wood-pressed oils and desi ghee. The brand needed a website that looks as premium as the jars on the shelf — and a checkout Indian shoppers trust, without extra work for the owner.
Mobile-first buyers
Most customers shop on phones and expect to pay with the UPI app they already use.
Order follow-up
The owner needed full order details — customer, products, payment — in one place, the moment an order is placed.
Storefront
A warm, natural look that matches the brand
Deep forest green, warm cream and honey-gold, with a classic serif for headings. Every product card shows size options, price with MRP, key highlights and two clear actions.
- Shop by category — Honey, Oil and Ghee menus, search and an “All Products” page.
- Sizes and prices on the card — switching ½ Ltr / 1 Ltr updates the price instantly.
- Add to Cart or Buy Now — Buy Now skips the cart and goes straight to checkout.
Product pages
Everything a careful buyer wants to know
Each product has an image gallery, size and quantity selectors, and tabs for description, ingredients, storage and FAQ. Related products keep people browsing.
- Clear delivery promise — “Ships in 2–5 business days, Pan India” right under the buy buttons.
- Easy to update — all products and prices live in one data file, so the owner can change a price without touching the design.
Cart
A cart that does the maths
Change quantities with + and −; pressing − on the last item removes it. The summary shows subtotal, shipping (free above ₹599), 5% tax and the final total.
Checkout & payments
PhonePe
Google Pay
Paytm
Any UPI app
Debit / Credit card
Net banking
Wallets
Cash on Delivery
Pay the way you already pay
Two short steps: delivery details, then every payment option listed separately with its own icon. The Pay button moves right under the chosen option with a smooth animation and shows the exact amount.
PhonePeGoogle PayPaytmAny UPI appDebit / Credit cardNet bankingWalletsCash on Delivery
Under the hood
How an online payment is confirmed
Payments run through Razorpay. The website never trusts the browser for money: the server works out the price, and the payment is checked twice before the order is marked paid.
- 1Customer taps PayThe cart is sent to the server — product and size only, no prices.
- 2Server prices the orderPrices come from the product list on the server, so nobody can change the amount.
- 3Razorpay opensThe chosen method opens first — UPI app, card, bank or wallet.
- 4Signature checkThe server verifies Razorpay's secure signature.
- 5Double-checkThe server asks Razorpay to confirm the payment and the exact amount.
- 6Order confirmedMarked paid; emails go to the customer and the owner.
Keys stay on the server
The Razorpay secret key is only used in server code and never reaches the browser.
No double processing
If the same payment is confirmed twice, the order is updated and emailed only once.
Backup confirmation
A Razorpay webhook confirms the payment even if the customer closes the page too early.
After the order
Everyone knows what happened, straight away
A clear confirmation page with order ID, products, total, “Paid Online ✓” and the Razorpay payment ID — plus two automatic emails.
- Email to the customer — a branded confirmation with an itemised bill and payment status.
- Email to the owner — customer, address, products and verified payment details, with a one-tap button to message the customer.
On mobile
Built for the phone in your customer's hand
Also built in
The details that make a store feel complete
Customer accounts
Sign up with email or Google; see past orders and payment history.
Wishlist
Save products with a heart on every card; the count shows in the header.
Search
Find honey, oils or ghee quickly from the header.
Shipping rules
Free shipping above ₹599, a flat fee below it, 5% tax worked out automatically.
Blog, FAQ & policies
Our Story, Blog, FAQ, Shipping, Returns, Privacy and Terms pages build trust.
Fast on every phone
Every page designed for small screens first.
Ongoing · Social media ads
Bringing shoppers to the store
Alongside the website, I run KIO's social media ads — product creatives and campaigns that send people straight to the product pages, where the fast checkout takes over.
- Ad creatives for honey, oils and ghee
- Campaigns linked to the right product pages
- Ongoing management and fresh creatives
Results
What changed for KIO
PaymentsCheck every UPI transaction ID by hand→Online payments confirm themselves — verified with Razorpay
ChoiceOne QR code→PhonePe, Google Pay, Paytm, cards, net banking, wallets and COD
Order updatesAsk customers for details over chat→Full order details arrive by email the moment an order is placed
Technology
Plain HTML, CSS and JavaScript for speed, with a small PHP and MySQL backend for orders, accounts and payments — on standard Hostinger hosting, with no expensive platform fees.
HTML5CSS3JavaScriptPHP 8MySQLRazorpay CheckoutGoogle Sign-InHostinger
Available for new projects
Have an idea? Let's make it move.
Find me
Doddaballapura, Bengaluru, Karnataka 561203
Studio in Bengaluru
3rd Phase, Apparel Park, Obadenahalli Industrial Area,Doddaballapura, Bengaluru, Karnataka 561203
● Satish Kumar — Creative Studio