×

Developed a
Multi-Step Solution

For E-commerce Success

React

Node.js

PostgreSQL

Heroku

Shopify

Integrating B2B pricing from SAP ERP system into existing Shopify store.  

Challenges

Companies put in considerable effort within ERP to define their price, shipping, and tax determination.

Shopify is suited for B2C businesses where B2C prices can be set up.

Being a SaaS based application Shopify has limitations on the changes that can be made eventually not allowing B2B store owners to integrate their ERP pricing on checkout.

Solutions

Retail buyers log into Shopify and navigate through the website.  

At this point of time the Shopify prices are shown with a disclaimer that prices can change at checkout.

The end customer adds items to the cart at this point of time.

When the user checks out API price simulation for is called.

The API details are explained in the section below.

The API will revise the item prices in the cart.

The API will revise the tax rate Shopify uses for calculation.  

The API may also add new goods to the cart or remove the quantities from the cart.  

The API will provide shipping charges to be used for checkout.  

 Shopify Development Details Requested by Our Client

 The client requested the creation of custom fields for “Sold to Number” and “Ship to Number,” a disclaimer about potential price changes at checkout, and changes to the checkout process to call a custom API with specific inputs and outputs.

 Shopify’s Actions During checkout

 Shopify will use this information and do the following:

Stores list prices for each SKU in the cart  

 Updates the tax rate based on the API response  

Won ClearlyRated’s Best of Staffing Talent Award

Calls the API to retrieve ERP prices  

Modifies the cart according to the API response  

Sets the prices back to list prices  

 Shopify’s Actions During checkout

 Shopify will use this information and do the following:

Stores list prices for each SKU in the cart  

Calls the API to retrieve ERP prices

Updates the tax rate based on the API response  

Modifies the cart according to the API response

Overrides the shipping amount as per the API response  

Sets the prices back to list prices

Example Scenario

If a customer adds an item listed at $23.00, the checkout process will update the price to $20.00 based on the SAP price, with shipping at $5.00 and a 10% tax rate, while the list price remains unchanged.

Integriti’s Approach and App Architecture  

 Our team leveraged the Node boilerplate provided by Shopify to gain in-depth understanding of its structure and database framework.  

Development Challenges

 Shopify Authentication

Maintaining application security through proper authentication was a significant challenge. We addressed this by implementing  Shopify Auth, strictly following Shopify’s developer guidelines for secure authentication.

Session Token Management

Managing session tokens for secure API calls to Shopify Admin APIs was another major hurdle.  

Offline Session Token

Used when the application needs resources without immediate user presence.  

 Online Session Token

Used when a user is actively using the application.

Proposed and Developed Solutions for Seamless Integration

Solution 1:

Webhook Integration

  • Utilized webhooks and data manipulation for B2B pricing at checkout.  

  • Triggered by Shopify webhook “CHECKOUT CREATE” to initiate checkout attempts.  

  • Data captured included customer and cart information for processing.

  • Products were transformed to meet SAP API requirements.  

  • Customer ID used to retrieve shipping and billing details via Shopify APIs.  

  • Aggregated data into JSON object, converted to XML format for SAP.

  • Error handling redirected users to standard checkout in case of SAP issues.

Outcome:

This solution technically achieved B2B pricing at checkout, but the client later opted for a different approach due to:

  • Utilized webhooks and data manipulation for B2B pricing at checkout.

  • Utilized webhooks and data manipulation for B2B pricing at checkout.

Solution 2:

Draft Order Integration

  • Similar to Solution 1 but utilized draft orders for pricing updates.

  • Webhook triggered on "CHECKOUT CREATE" to initiate checkout.

  • Customer and cart data processed for pricing updates.

  • Aggregated and converted data to XML format for SAP.

  • Upon SAP response, draft orders created with updated prices.

  • Customers received draft order URL for purchase completion.

Outcome:

This solution technically achieved B2B pricing at cheWhile this solution addressed the client's immediate requirement, they later reconsidered due to Shopify Webhook Delays, especially under high customer traffic.ckout, but the client later opted for a different approach due to:

    Solution 3:

    Frontend Price Change

    • Explored alternative methods due to Shopify webhook delays.

    • Leveraged App proxy and theme-app-extension for pricing updates.

    • Non-registered customers proceed through standard checkout.

    • Registered users' default address verified for completeness.

    • Customer data obtained via theme-app-extension for SAP interaction.

    • Upon SAP response, draft orders created with updated prices.

    • Draft order checkout URL sent to frontend for purchase completion.

    Outcome:

    This solution addressed the challenges of webhooks and fulfilled the client's requirements, making it the accepted solution.

    Deployment

    Deployment Approach

    Initially deployed on both Heroku and Fly.io for environment understanding. Eventually, opted for exclusive hosting on Heroku for the final deployment.

    Deployment Challenges

    Default SQLite database in Shopify Node app boilerplate lacks persistence. Addressed by migrating to PostgreSQL for robust data management.

    Deployment Procedure

    • Utilized webhooks and data manipulation for B2B pricing at checkout.  

    • Triggered by Shopify webhook “CHECKOUT CREATE” to initiate checkout attempts.  

    • Data captured included customer and cart information for processing.

    • Products were transformed to meet SAP API requirements.  

    Have a tech vision?

    Let us bring it to life

    Minneapolis

    7760 France Ave South
    Suite 1100 Bloomington,
    MN 55435

    Toronto

    2 Robert Speck Parkway
    Suite 750 Mississauga,
    Ontario L4Z 1H8, Canada

    Mexico

    Avenida Patriotismo 229
    Mexico City, Ciudad de
    Mexico, 03800