<aside class="note beta">
<h4>Early access:</h4>
<p>The Pickup Points Delivery Option Generator API is a feature that's available by request to merchants on the <a href="https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan">Shopify Plus plan</a>. Merchants must be enrolled in the Partner program in order to deploy custom solutions they have developed for themselves. To request access, contact <a href="mailto:pickup-point-generator-early-access@shopify.com">pickup-point-generator-early-access@shopify.com</a>. You can test the Pickup Points Delivery Option Generator API on Partner development stores without requesting access.</p>
</aside>


Customers can choose to have their order sent to a [pickup point](/docs/apps/build/checkout/delivery-shipping#pickup-points) instead of to their address.

In this guide, you'll learn how to generate custom pickup point options using [Shopify Functions](/docs/apps/build/functions). You'll create a starter function with some logic to support pickup points for a specific location. You'll also learn how to retrieve the pickup point that the customer selected, using the [GraphQL Admin API](/docs/api/admin-graphql).

> Tip:
> Explore an [end-to-end example](https://github.com/Shopify/function-examples/tree/main/order-routing/rust/pickup-point-delivery-option-generators/default), and consult the [Pickup Point Delivery Option Generator API reference](/docs/api/functions/reference/pickup-point-delivery-option-generator).

## What you'll learn

In this tutorial, you’ll learn how to do the following tasks:

- Generate starter code for Shopify Functions
- Use GraphQL to define the input of your function
- Test the delivery option generator and review function logs
- Retrieve the selected pickup point for an order, using the GraphQL Admin API
- Deploy your function to the Shopify platform.

## Requirements


> Shopify Plus:
> Only custom apps that are built for stores on the [Shopify Plus plan](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan) have access to the [Pickup Point Delivery Option Generator API](docs/api/functions/reference/pickup-point-delivery-option-generator). Public apps in the Shopify App Store and custom apps built for stores on non-Plus plans don't have access.





- You've created a [Partner account](https://www.shopify.com/partners).
- You've created a [development store](/docs/api/development-stores#create-a-development-store-to-test-your-app).
- You've [created an app that uses Shopify CLI 3.49.5 or higher](/docs/apps/build/scaffold-app). If you previously installed Shopify CLI, then make sure that you're using the [latest version](/docs/api/shopify-cli#upgrade).
  
  
- You've installed [Node.js](https://nodejs.org/en/download) 16 or higher.
- You've [installed your app](/docs/apps/build/scaffold-app#step-3-install-your-app-on-your-development-store) on the development store.




### Rust-specific requirements

The following requirements are specific to Rust-based development with Shopify Functions.

- You've installed [Rust](https://www.rust-lang.org/tools/install).

    On Windows, Rust requires the [Microsoft C++ Build Tools](https://docs.microsoft.com/en-us/windows/dev-environment/rust/setup). Make sure to select the **Desktop development with C++** workload when installing the tools.

- You've installed the [`wasm32-wasip1` target](https://doc.rust-lang.org/rustc/platform-support/wasm32-wasip1.html):

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTrustup target add wasm32-wasip1
    END_RAW_MD_CONTENT</script>

    </div>
    </p>




## Step 1: Create the pickup point delivery option generator function

Use Shopify CLI to [generate](/docs/api/shopify-cli/app/app-generate-extension) a pickup point delivery option generator starter function. Shopify CLI generates the function, specifies the function's inputs using an [input query](/docs/apps/build/functions/input-output/metafields-for-input-queries), and implements the function logic. [Learn more about the function that's generated](https://github.com/Shopify/function-examples/blob/main/order-routing/rust/pickup-point-delivery-option-generators/default).

1. Navigate to your app directory:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTcd <directory>
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


1. Create a new pickup point delivery option generator extension with the following command:

    <p>
        <div class="react-code-block" data-preset="terminal">
        <div class="react-code-block-preload ThemeMode-dim">
        <div class="react-code-block-preload-bar "></div>
        <div class="react-code-block-preload-placeholder-container">
        <div class="react-code-block-preload-code-container">
        <div class="react-code-block-preload-codeline-number"></div>
        <div class="react-code-block-preload-codeline"></div>
        </div>

        </div>
        </div>


        <script type="text/plain" data-language="bash">
        RAW_MD_CONTENTshopify app generate extension --template pickup_point_delivery_option_generator --name pickup-points-generator
        END_RAW_MD_CONTENT</script>

        </div>
        </p>


1. Choose the language to use. For this tutorial, you should select either **Rust** or **JavaScript**.

    For handling large data payloads, consider using Rust, as it may help avoid exceeding Shopify's instruction limit, potentially preventing an [InstructionCountLimitExceededError](/docs/apps/build/functions/monitoring-and-errors).

    > Tip:
> Shopify Functions support any language that compiles to WebAssembly (Wasm), such as Rust, AssemblyScript, or TinyGo. You specify the Wasm template option when you're using a language other than Rust and can conform to the Wasm API. [Learn more about the Wasm API](/docs/apps/build/functions/programming-languages/webassembly-for-functions).


1. Navigate to `extensions/pickup-points-generator`:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTcd extensions/pickup-points-generator
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


## Step 2: Preview the function on a development store

To test your function, you need to make it available to your development store.

1. If you're developing a function in a language other than JavaScript or TypeScript, ensure you have configured `build.watch` in your [function extension configuration](/docs/api/functions/configuration#properties).




1. Navigate back to your app root:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTcd ../..
    END_RAW_MD_CONTENT</script>

    </div>
    </p>



1. Use the Shopify CLI [`dev` command](/docs/api/shopify-cli/app/app-dev) to start app preview:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTshopify app dev 
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


    You can keep the preview running as you work on your function. When you make changes to a watched file, Shopify CLI rebuilds your function and updates the function extension's drafts, so you can immediately test your changes.

1. Follow the CLI prompts to preview your app, and install it on your development store.


> Note:
> If your app is already running, then you need to stop and restart it.

## Step 3: Set up shipping to pickup points

For pickup points to be available at checkout, your store needs to have at least one location with pickup points enabled.

1. In the Shopify admin, go to **Settings** > **Shipping and delivery**.
1. Under **Shipping to pickup points**, select a location.
1. Enable the option to ship to pickup points from the location.
1. Click **Edit rate**.
1. Under **Apply rate to pickup points provided by**, select your extension.
1. Click **Done**.
1. Click **Save**.

## Step 4: Test the pickup point delivery option generator

You can test your pickup point delivery option generator to ensure that it's working as expected.

1. In your development store, add a product to your cart and proceed to checkout.

    The product must be available from the configured location.
1. In checkout, select **Ship to pickup point**.
1. Type an address in Canada, and click **Search**. If you're in Canada, then you can use your location.
1. To view available pickup points, select either **Map** or **List**.
1. Select a location.
1. Click **Continue to payment**.

    The **Payment** page displays the address that you selected.

## Step 5 (Optional): Debug the function

To [debug your function](/docs/apps/build/functions/monitoring-and-errors#debug-a-function), or view its output, you can review its logs.

1. Log in to your [Partner Dashboard](https://partners.shopify.com/current/apps).
1. Navigate to **Apps** and select your app.
1. Click **Extensions** > **pickup-points-generator**.
1. Click on any function run to view its input, output, and any logs written to `STDERR`.

## Step 6: Retrieve the pickup point from an order

You can retrieve a pickup point from an order with the GraphQL Admin API.

To query the pickup point, you need to [request access to protected customer data](/docs/apps/launch/protected-customer-data#request-access-to-protected-customer-data) in the Partner Dashboard. Your app also needs to meet specific [requirements](/docs/apps/launch/protected-customer-data#requirements) to ensure customer privacy and security.

### Set access scopes

Add the `read_orders` and `read_merchant_managed_fulfillment_orders` [access scopes](/docs/apps/structure/configuration#access_scopes) to your app.

1. Stop your app if it's running.

1. In `shopify.app.toml`, update `scopes` to include the required access scopes. The following is an example:

    <p>
    <div class="react-code-block" data-preset="file">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>

    <script data-option="filename" data-value="shopify.app.toml"></script>

    <script type="text/plain" data-language="toml">
    RAW_MD_CONTENTscopes = "read_products,read_merchant_managed_fulfillment_orders,read_orders"
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


1. Deploy your changes with the following command:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTshopify app deploy 
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


1. When prompted, release the new version.

1. Restart your server for the changes to take effect:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="bash">
    RAW_MD_CONTENTshopify app dev 
    END_RAW_MD_CONTENT</script>

    </div>
    </p>


### Retrieve the pickup point

Request the pickup point from the GraphQL Admin API's `DeliveryMethod` object. You'll request data from the [`deliveryOptionGeneratorPickupPoint`](/docs/api/admin-graphql/unstable/objects/DeliveryMethod#field-deliverymethod-deliveryoptiongeneratorpickuppoint) field.

1. Complete [the order that you started](#step-4-test-the-pickup-point-delivery-option-generator).

1. In Shopify CLI, where your server is running, press `g` to open GraphiQL in your browser.

1. In GraphiQL, run the following query, with the ID of the order that you created.

    This example returns the IDs of the pickup point and the function that generated the pickup point option.

    <p>
    <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
    <script data-option="title" data-value="POST https://{shop}.myshopify.com/admin/api/{api_version}/graphql.json"></script>

    
    <p>
    <div class="react-code-block" data-preset="basic">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar basic-codeblock"></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>

    <script data-option="title" data-value="GraphQL query"></script>

    <script type="text/plain" data-language="graphql">
    RAW_MD_CONTENTquery {
      order(id: "gid://shopify/Order/{ORDER_ID}") {
        id
        fulfillmentOrders(first: 10, displayable: true) {
          edges {
            node {
              deliveryMethod {
                methodType
                deliveryOptionGeneratorPickupPoint {
                  externalId
                  functionId
                }
              }
            }
          }
        }
      }
    }
    END_RAW_MD_CONTENT</script>

    </div>
    </p>

    <p>
    <div class="react-code-block" data-preset="basic">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar basic-codeblock"></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>

    <script data-option="title" data-value="JSON response"></script>

    <script type="text/plain" data-language="json">
    RAW_MD_CONTENT{
      "data": {
        "order": {
          "id": "gid://shopify/Order/1",
          "fulfillmentOrders": {
            "edges": [
              {
                "node": {
                  "deliveryMethod": {
                    "methodType": "PICKUP_POINT",
                    "deliveryOptionGeneratorPickupPoint": {
                      "externalId": "1",
                      "functionId": "f0c17828-da1a-4748-810d-3c3cab2bc977"
                    }
                  }
                }
              }
            ]
          }
        }
      }
    }
    END_RAW_MD_CONTENT</script>

    </div>
    </p>

    
    </div>
    </p>


## Step 7 (Optional): Edit the selected pickup point

You can edit the selected pickup point option, either on the order or on the fulfillment page for a pickup order that's completed using pickup points functions.

1. In the Shopify admin, go to **Orders** page.

1. Click [the order you just completed using pickup points](#step-4-test-the-pickup-point-delivery-option-generator).

1. Next to **Pickup point address**, click the pencil icon.

    In the modal that displays, edit the pickup point address.

1. After you've edited the address, click **Search**.

    Installed pickup points functions will run and a list of pickup points will be returned.

1. Select a new pickup point delivery option.

1. Click **Done**.

To edit the selected pickup point option on the fulfillment page, fulfill the order and repeat the steps above.

## Next steps


- Review the [UX guidelines](/docs/apps/build/checkout/delivery-shipping/delivery-methods/ux-for-pickup-points) for pickup points, to seamlessly integrate your app into the checkout experience.
- Learn more about how [Shopify Functions](/docs/apps/build/functions) work and the benefits of using Shopify Functions.
- Learn how to use [variables](/docs/apps/build/functions/input-output/use-variables-input-queries) in your input query.
- Review the [developer tools and resources](/docs/apps/build/checkout/delivery-shipping#developer-tools-and-resources) to build for pickup points, including the Pickup Point Delivery Option Generator API reference.