The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
PayU Latam Payment Gateway Integrate
Developed a complete PayU Latam payment gateway integration for Walon Sport (Peru), enabling users to complete transactions directly within the website without any redirection.
The project included implementing multiple payment methods such as Credit/Debit Cards (Visa, Mastercard, Amex, Diners), Yape (mobile payment flow), and PagoEfectivo (CIP generation).
A custom accordion-style checkout UI was built to improve user experience and guide users through payment selection. Additionally, a fully customized Thank You page was developed to display CIP codes and provide voucher access for offline payments.
The integration was deployed in a production environment with AWS security layers (WAF), ensuring stable and secure payment processing.
This project involved real-world API handling, debugging payment flows, and optimizing checkout UX for better performance and reliability.
Skills
Debugging , Web development , Payment Gateway Integration , API integration , Backend Development , Frontend Development
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
ASPHALT is a landing page for a street skateboard brand — one long scroll with six sections: hero, the drop, the boards, the numbers, the culture, and a final call to action.
Live: https://asphalt-skate-culture.netlify.app/
The look is raw and bold: paper background, big chunky type, yellow and orange accents, 3D boards in the space. Almost everything moves : a spinning skate-wheel cursor, text that jumps up on scroll, a board that tilts to your mouse, a trick-name ticker, a counting year, and sparks on the last button.
How I used Stitch
https://stitch.withgoogle.com/projects/768150956399471213
I started with a design system. I wrote a DESIGN.md with the colors, type scale, spacing, and motion rules, then imported that into Stitch as the source of truth. From there Stitch generated each section straight onto the canvas, and because everything ran off the same system, the sections actually matched instead of drifting. The output was HTML-native too, so the motion and hover states were already in there.
Once the sections looked right, I exported the code and used Claude to merge them into one page: combining the duplicated cursor, consolidating the Tailwind config, and wiring up the scroll behavior between sections. Then I shipped it on Netlify.
Platform feedback
Starting from a design system was the best part the DESIGN.md kept all six sections consistent, which is usually the hard bit when you build piece by piece. Fast too, and the motion came baked in.
The one pain point was joining sections. Each exports on its own, so making one page meant cleaning up duplicates by hand. A "merge boards into one page" export would fix that.
Nice work! looks really polished 🔥
Timewell is a consumer platform where customers build hardbound photo books, record voice stories attached to individual photos, and then scan unique QR codes printed inside the book to listen back - reliably, years later. I architected and built the full stack: the QR generation and resolution system that maps each code to a specific page and user, the media upload pipeline for audio and images, the admin dashboard for order and content management, and the public-facing mobile experience optimized for a cold-open scan (no app install, instant load).
This is Timewell Books (QR-linked voice photobook platform)
Project Name: VertiCare
Tagline: A premium exterior service interface brought to life with Google Stitch.
Description:
VertiCare is an ultra-premium exterior maintenance and arboriculture landing page concept designed for the Bordeaux region. Starting with a static Tailwind CSS codebase, I leveraged Google Stitch's in-place AI editing capabilities to rapidly transform a flat layout into a living, high-converting prototype.
Key features built during the hackathon include:
Interactive Hero: A dynamic fluid canvas background that reacts smoothly to cursor movements.
Engagement Boosters: Modern 3D tilt effects on service cards to enhance visual feedback.
Functional Embeds: A fully interactive Leaflet.js & OpenStreetMap zone map centered on Bordeaux, complete with customized styling.
Conversion Anchors: Micro-animated floating widgets for instant contact (WhatsApp and a pulsing AI Assistant button) alongside an upgraded, premium footer featuring institutional trust markers like Garantie Décennale.
Stitch perfectly bridged the gap between static code and an immersive, premium user experience in just minutes.
Tech Stack: Google Stitch, Tailwind CSS, Leaflet.js, OpenStreetMap, HTML5, JavaScript.
Looked at this three times already and it gets better each time.
Challenges
View all
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?