Understanding the “Division of Roles” in Shopify Checkout Extensibility

Since 2022, Shopify has significantly updated the online store checkout experience to deliver the flexibility and extensibility required for enterprise-level ecommerce.

This has been gradually introduced as a new expansion model called Checkout Extensibility, greatly enhancing the flexibility and security required in enterprise environments.

At the core of this model are Checkout UI Extensions and Shopify Functions.

While both share the same goal—customizing Checkout—their execution environment, constraints, and responsibilities differ fundamentally. Choosing the wrong technology can break the entire architecture.

In this article, we break down the nature and appropriate use cases of Checkout UI Extensions and Shopify Functions based on their latest specifications (2024–2025), summarized in a comparison table.

1. Overview of Shopify Checkout Extensibility (Checkout Extensibility Guide)

Shopify Checkout Extensibility consists of the following technologies:

• Checkout UI Extensions (UI customization) *Available on Shopify Plus only

• Shopify Functions (logic customization)

• Branding API (branding customization)*Available on Shopify Plus only

• Web Pixel Extensions (analytics)

• Payments Extensions (payment method customization)

Among these, the core components for real project requirements are UI Extensions and Functions.

Important limitation: Within Checkout UI Extensions, the Information, Shipping, and Payment steps are exclusive to Shopify Plus. The Thank You page and Order Status page are available for all plans.

2. Checkout UI Extensions: Extending the Customer Experience

Checkout UI Extensions enable developers to expand the UI elements displayed on the checkout page.

■ Where does it run?

It runs within a secure, isolated environment (sandbox) in the browser. This ensures safe UI customization without affecting Shopify’s core checkout logic.

■ Technologies used

• Preact (JavaScript framework) is the standard

• Preact became Shopify’s recommended approach starting October 2025

■ Integrating with external services

You can call external APIs, but you must enable network_access = true in the shopify.extension.toml configuration file.

The external server must also support CORS.

Reference:Checkout UI Extensions Configuration

■ Security constraints

• Sensitive information such as API keys cannot be stored in the browser

• Customer data access requires the use of session tokens

■ Main use cases

• Adding additional information to shipping options
• Gift wrapping selection UI
• Estimated delivery date display
• Adding custom input fields

In short, UI Extensions handle anything related to “appearance” or “user input.”

3. Shopify Functions: Extending Business Logic

Shopify Functions extend backend logic within the checkout process.

■ Where does it run?

It runs on Shopify’s servers, not in the browser—providing high speed and security.

■ Technologies used

• Developed using Rust, JavaScript, or Go
• Shopify recommends Rust for maximum performance within the 5 ms execution limit
• Code is compiled into WebAssembly (Wasm) for fast execution

■ Why are there multiple Function APIs?

Each API is specialized based on the target of customization.

Changing shipping methods, computing discounts, controlling payment options—each requires different inputs and outputs, so separate APIs exist.

Examples:

• Discount Function: Returns discount amounts for eligible items
• Delivery Customization Function: Controls which shipping methods appear
• Validation Function: Returns whether an order is valid

Main Function APIs:

• Discount Function API: Unified management of product, order, and shipping discounts
• Delivery Customization API: Show/hide or reorder shipping methods
• Payment Customization API: Show/hide or reorder payment methods
• Cart and Checkout Validation API: Validate orders and block checkout if needed
• Cart Transform API: Modify how cart items are displayed (e.g., bundles)

These Functions run automatically during the checkout process and can be combined.

■ Integrating with external services

• External calls are generally not allowed (for security and performance)
• Only the Enterprise plan supports limited external calls
  • Exception: Pickup Point Delivery Option Generator is available to Plus users via early access (application required)   Details

■ Strict performance requirements

To ensure checkout remains fast, Shopify imposes strict limits:

• Execution: 5 ms or less
• Memory: up to 10 MB
• Program size: under 256 KB

These constraints ensure that even complex logic does not slow down checkout.

■ Main use cases

• Custom discount rules (e.g., Buy X Get Y)
• Conditional shipping method control
• Payment method restrictions
• Cart validation (e.g., minimum order amounts)

4. Comparison: UI Extensions vs Functions

5. Practical Examples

Examples using UI Extensions

Example 1: Adding a gift message input field

Adds a gift message field and wrapping selection. Saved as cart attributes; no Functions required.

Example 2: Displaying estimated delivery dates

Fetch delivery estimates via an external API and display them. No Functions required.

Examples using Functions

Example 1: Volume discount (Buy 3 Get 1 Free)

• API used: Discount Function API
• Logic: Detect qualifying products and automatically apply discounts
• Reason: Requires modifying price calculations on the server

Example 2: Minimum order amount validation

• API used: Cart and Checkout Validation API
• Logic: Validate customer tags and cart total; block checkout if below threshold
• Reason: Must enforce rules server-side without bypass

Example 3: Conditional shipping rules

• API used: Delivery Customization Function API
• Reason: Direct modification of shipping option logic is required

6. Which should you choose?

— The two technologies are not competitors, but complements —

In conclusion, UI Extensions and Functions serve entirely different roles.

• UI Extensions = customer experience
• Functions = business logic

For enterprise ecommerce, the key to success is combining both appropriately: “UI with Extensions, logic with Functions.”

At Flagship, we design balanced architectures that take UI, logic, and external integrations into account based on your specific requirements.

Contact us here

---

References

About network access for Shopify Functions

Shopify Function API Reference

Checkout UI Extensions Configuration

Shopify Unite Insights: What's coming next for your Shopify store?

Official Shopify UI Extensions React Package (@shopify/ui-extensions-react)