DOCSEARCHbyAlgolia
Submit Docs

Delivery Gateway Documentation

website·Indexed 33 days ago

https://deliverygateway.io/

An all-in-one logistics platform for simplifying and automating e-commerce shipping processes. Includes a GraphQL Merchant API for shipment creation and label management, as well as frontend integration guides for webshops.

Tokens
1.3K
Snippets
7
Records
12
Agent score
66%

What's inside Delivery Gateway

  1. Retrieve your Delivery Gateway Merchant ID

    The Merchant ID is required for all integrations. To find it:

    1. Log in to the Delivery Gateway Dashboard.
    2. Select your merchant from the top left corner.
    3. Navigate to the Merchant section.
    4. Copy the ID located under the merchant name.

  2. Initialize Delivery Gateway SDK in vanilla JavaScript

    To use Delivery Gateway features (such as delivery method selectors or pickup point maps), include the standalone DGW script in your HTML. The script is language-specific; for example, use en.js for English or nl.js for Dutch. The script provides a global DGW object on the window namespace. Because the script loads asynchronously, use the window.DGWOnLoad callback to ensure the object is available before attempting to use it.

    <!-- Include the script (example for English) --> <script src="https://api.deliverygateway.io/sdk/en.js" async></script>

    <script> function mountDeliveryGateway(DGW) { // Initialize Delivery Gateway using DGW.mount(...); }

    if (window.DGW) { mountDeliveryGateway(window.DGW); } else { window.DGWOnLoad = mountDeliveryGateway; } </script>

  5. Integrate the Delivery Gateway frontend widget

    To add a delivery method selector to your website, include the Delivery Gateway SDK script and mount the DGW object. This allows customers to select between home delivery or pickup point delivery via a modal interface.

    <!-- 1. Add the SDK script to your HTML --> <script src="https://api.deliverygateway.io/sdk/en.js" async></script>

    <!-- 2. Configure and mount the widget in JavaScript --> <script> function deliveryMethodSelector(DGW) { DGW.mount({ containerId: "delivery-gateway", // The HTML ID of the container element merchantId: "your-merchant-id", // Your unique merchant ID view: { type: "delivery-method-selection", openSelectedMethodInModal: true, operatorsAsSeparateMethods: true, }, }); }

    // Handle script loading: use window.DGW if already loaded, otherwise set the callback if (window.DGW) { deliveryMethodSelector(window.DGW); } else { window.DGWOnLoad = deliveryMethodSelector; } </script>

  6. Understand DGW frontend session constraints

    When using frontend initialization, certain session settings cannot be overridden via the SDK and are instead determined by the merchant configuration or the customer's browser settings:

    • Currency: Determined by Merchant configuration.
    • Language: Determined by Customer browser settings.
    • Authenticated customer addresses: Not available via frontend initialization.
    • Pickup point delivery settings (enablement, pricing): Determined by Merchant configuration.
    • Home delivery settings (enablement, pricing): Determined by Merchant configuration.

  7. Configure Merchant delivery options

    To determine which delivery types are available to your customers in the frontend widget, go to the Merchant configuration in the Dashboard and locate the Display section. Enable the specific delivery types you wish to offer.

  8. Execute GraphQL queries via the Merchant API

    The Merchant API uses GraphQL. All queries and mutations must be sent as POST HTTP requests to the environment-specific endpoint. Use the sandbox endpoint for testing and the production endpoint for live operations.
    # Sandbox Environment
curl -X POST https://api.sandbox.deliverygateway.io/graphql/merchant \
  -H "Authorization: Bearer <YOUR_TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{"query": "query { me { id name } }"}'

# Production Environment
curl -X POST https://api.deliverygateway.io/graphql/merchant \
  -H "Authorization: Bearer <YOUR_TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{"query": "query { me { id name } }"}'

  9. Mount a Delivery Gateway instance to an HTML container

    Use the DGW.mount(opts) method to render a DGW feature into a specific HTML element. The opts object must include the merchantId, the containerId (the ID of the HTML element), and the view configuration. The method returns a DgwInstance object used to manage the lifecycle of the mounted component.
    const instance = window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   containerId: "delivery-gateway",
   view: {
      type: "// specify view type here"
   }
});

  11. Handle Merchant API responses and errors

    The Merchant API follows GraphQL standards for responses. Most requests will return an HTTP 200 OK status code, even if the operation encountered errors. If an error occurs, the response body will contain an errors object with detailed information to help debug the operation or mutation.

  12. Manage a mounted DGW instance

    The DgwInstance object returned by DGW.mount() provides methods to control the state of the embedded UI component.
    interface DgwInstance {
  /** Immediately unmounts the instance, removing all content from the container */
  unmount(): void;
  /** Returns a boolean indicating whether the instance is still mounted */
  isMounted(): boolean;
}