Delivery and shipping Checkout UI extensions

[4mithpoojari]

I have a requirement where the delivery methods should come from my own nodejs backend, and locations will also come from my nodejs backend whenever   'pickup in store' or 'ship to pickup point.' is selected.   As far as I know, pickup points and delivery methods need to be set in the admin panel.In the delivery and shipping checkout UI extensions i didn't get anything about this . 

My question is: Is this even possible? If yes, what would be the solution and any reference would help me .

[DaisyVo]

Hi @4mithpoojari 

Yes, it is possible to use your own Node.js backend to provide custom delivery methods and locations for options like "pickup in store" or "ship to pickup point" during checkout. However, Shopify currently does not allow full customization of delivery options directly through the Delivery and Shipping Checkout UI Extensions. These extensions are designed primarily for UI modifications within the Shopify checkout process, not for overriding delivery logic. That said, here’s how you can approach the solution:

Solution Overview:

1-Use Shopify's APIs to Integrate Your Backend: Shopify's Carrier Service API (available for Shopify Plus or Advanced plans) allows you to provide custom delivery options from your backend. When customers reach the shipping step, Shopify will send a request to your Node.js backend, and you can respond with delivery rates and options dynamically based on their input.

• Reference: Shopify Carrier Service API Documentation

2-Manage Pickup Points via Metafields: If you want "pickup in store" or "pickup point" options, store those pickup locations as Metafields in your products or locations. Your Node.js backend can fetch these metafields using Shopify's Admin API and return them as options when customers select pickup.

• Reference: Shopify Metafields Documentation

3-Custom Logic for Pickup Points in Node.js: Your backend can manage custom logic for calculating available pickup points or delivery methods. For instance:

• Validate customer location.
• Check stock availability at nearby stores.
• Return pickup points dynamically to Shopify via the Carrier Service API.

4-Checkout UI Extensions for Display Customization: While you cannot override Shopify's delivery logic using Checkout UI Extensions, you can use them to customize the way your custom delivery methods or pickup options are displayed during checkout. For example, you can display additional details like pickup times or instructions.

• Reference: Checkout UI Extensions Documentation

Code Example for Carrier Service API Integration

Here’s an example Node.js endpoint for the Carrier Service API to provide dynamic delivery options:

const express = require('express');

const app = express();

app.use(express.json());

app.post('/custom-shipping', (req, res) => {

  const { destination } = req.body.rate;

  const rates = [

    {

      service_name: "Pickup in Store",

      service_code: "PICKUP",

      total_price: 0, // Free pickup

      currency: "USD",

    },

    {

      service_name: "Ship to Pickup Point",

      service_code: "SHIP_PICKUP",

      total_price: 500, // $5.00 shipping fee

      currency: "USD",

    },

  ];

  // Send response back to Shopify

  res.json({ rates });

});

app.listen(3000, () => console.log('Server running on port 3000'));

Steps to Implement:

1. Create a Carrier Service: Register your Node.js endpoint in Shopify Admin > Shipping Settings to integrate your custom service.
2. Add Pickup Logic: Use the Admin API or Metafields API to manage pickup point data dynamically.
3. Test with Shopify Checkout: Once integrated, test your checkout process to ensure your custom options appear and function as expected.

If you need any other assistance, feel free to reply and I will try my best to respond.

Best regards,
Daisy