Skip to main content

Ecommerce & Retail · Checkout & Payments

Custom E-commerce Checkout Flow

We built a standalone application to integrate the NMI payment gateway, bypassing native Shopify checkout limitations for a direct-to-consumer retailer.

Custom E-commerce Checkout Flow
Focus
SHOPIFY, CUSTOM-WEB-APP, THIRD-PARTY-INTEGRATION
Delivered
21 Apr 2023
Location
USA

Outcome

42% of orders routed through NMI on a standalone checkout that honours Shopify discounts.

The Vision & Challenge

For direct-to-consumer brands, the Shopify platform offers a reliable foundation for growth. It provides a comprehensive suite of tools for managing products, inventory, and customer data. However, its structured ecosystem can present significant constraints for businesses with specific operational needs.

A promising e-commerce retailer faced a critical barrier. Their business model depended on using the NMI payment gateway, a processor not natively supported by Shopify. This incompatibility was not a minor inconvenience-it was a fundamental obstacle that prevented them from processing any online sales and launching their business.

Our team was brought in to engineer a direct solution. We designed and developed a custom Shopify application that operates outside the native checkout flow. This application provides the specific payment integration the client required while maintaining a cohesive and trustworthy user experience.

The challenge

  • Shopify's checkout process is a closed system. Bypassing it requires creating an entirely separate yet fully integrated application.
  • The custom checkout had to replicate essential Shopify logic, including real-time validation for discount codes and accurate, tiered shipping rate calculations.
  • Integrating a third-party payment gateway demands a secure, server-side architecture to handle sensitive transaction data correctly.

How we solved it

  • We built a standalone application using Laravel for the backend and React for the frontend, which intercepts the customer journey before the final payment step.
  • Our system connects directly to Shopify's APIs to pull and validate data. This ensures discount codes work as expected and shipping costs are calculated accurately based on the customer's cart and location.
  • A server-side integration with the NMI gateway was developed to manage all payment authorizations. This process ensures transaction data remains secure and is never exposed on the client side.
Sequence for a custom checkout. The buyer enters an address and a discount code in a standalone React and Laravel checkout that intercepts the journey before payment. Rather than reimplementing Shopify’s rules, that checkout calls the Shopify API for live shipping rates and discount validity and uses the totals it returns, so the numbers match what a native checkout would show. Card details go server-side to the NMI gateway, which was the processor the business required and Shopify does not natively support, and never touch the client.

Technologies

What we built it with

Front-end
  • JavaScript
  • ReactJS
  • HTML5
  • CSS3
Back-end
  • PHP
  • Laravel
DevOps
  • Linux
  • Digital Ocean
  • AWS
  • Github CI
Database
  • MySQL
Integrations
  • Shopify
  • NMI
Project screen

Independent Payment Processing

The application’s core function is its direct integration with the NMI payment gateway. The Laravel backend securely communicates with NMI’s API to authorize and process transactions. This architecture gave the client the freedom to use their required payment processor, the central objective of the project, and 42% of orders now run through NMI.

Dynamic Checkout Logic

To create a consistent user experience, the application makes real-time API calls to Shopify. When a customer enters an address or a discount code, our system instantly retrieves the correct shipping rates and confirms the code’s validity. This maintains the expected functionality of a native checkout and ensures order totals are always accurate.

How we built it

Built a standalone checkout that borrows Shopify's rules instead of reinventing them. Shopify checkout is closed, so taking payment through NMI meant a separate Laravel and React application that intercepts the journey before the final step. What made it safe was refusing to duplicate business logic: the checkout calls Shopify's APIs to revalidate discount codes and calculate tiered shipping for the real cart and address, so the two systems can never disagree. Payment authorisation runs server-side against NMI and card data never reaches the client. 42% of orders now go through that path.

In the client's words

“We needed NMI and Shopify wouldn't do it. About 42% of our orders go through the custom checkout and nobody has noticed.”

NDA - Signed

Have a project like this in mind?

Tell us what you're building. We'll show you how we'd approach it and what it would take to ship.