Anyone Successfully Calling draftOrderCreate from a Checkout UI Extension?

Technical Q&A
1

Hi Shopify experts!

I’m currently developing a Checkout UI Extension and running into some confusion around calling the GraphQL Admin API (draftOrderCreate) from the extension. I’d really appreciate your expert insights!

What I’m trying to achieve:

Step 1. With the Checkout UI Extension, check the Credit Limit Remaining metafield on the checkout page, and if certain conditions are met:
:backhand_index_pointing_right: Display a “Create Draft Order” button.

Step 2. When the user clicks that button,
:backhand_index_pointing_right: Call the draftOrderCreate mutation to create a draft order via App Proxy or my app backend.

Step 3. After the draft order is successfully created, show a message like:
:backhand_index_pointing_right: “Your order has been saved as a draft.”

Right now, I’m running into an issue at step 2.

I attempted to use App Proxy on my development store, but I ran into CORS errors, even though I added “Access-Control-Allow-Origin: *” in the response headers. Also I read that “UI extension requests made to the App Proxy of password protected shops is not supported.” from this Shopify documentation. However, since I’m working in a development store, I can’t disable the storefront password.

Question 1: Is there any way to use App Proxy in a password-protected dev store, or do I need to use Shopify Plus store for developing Checkout UI Extension which accesses GraphQL Admin API?

So now I’m trying to find a way to avoid using App Proxy.

From the Checkout UI Extension, I call my app’s backend endpoint at “app/routes/api.draft_order.tsx”, which is set up to call draftOrderCreate mutation. The request from Checkout.tsx successfully reaches my endpoint, but when “authenticate.admin(request)” runs on the backend, I get a 500 error, and the following message appears in the console.

swatanabe_1-1743982531429.png
swatanabe_1-1743982531429.png1046×428 20.5 KB

//Checkout.tsx
const fetchUrl = `${process.env.APP_URL}/api/draft_order`;
const response = await fetch(fetchUrl, {      
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
          "Authorization": `Bearer ${token}`
        },
        body: JSON.stringify({ data: "test" })
      });

export const action: LoaderFunction = async ({request}) => {
    const { admin, cors } = await authenticate.admin(request); // Error here
    
     // App logic    
    return cors(json({data: 'success'}));
 };

Question 2: Could anyone tell me what I’m doing wrong regarding the authentication to call GraphQL Admin API?

Question 3: What’s the recommended way to call the GraphQL Admin API from a Checkout UI Extension in this case?

Thank you in advance!

1 Like