Solved

Thank you and order status page - need additional information

Luftwalk
Shopify Partner
13 0 1

Hi,

I'm building an extension that displays a button on the thank you page and on the order status page if a certain manual payment method is one of the selected payment options. The button should take the customer to a separate website sending the order name as one of the parameters.

 

The issues I'm facing is that on the thank you page there is a way of getting the selected payment option via (useApi and the selectedPaymentOptions property), but there is no useOrder API revealed to get the order.name)

On the order status page I can get the order.name but no way to get the selected payment method.

What am I missing?

 

Is there a way to get the missing information via a graphql call? If so, how? With which credentials? Is there a different way to achieve what I need?

 

I'd appreciate any help. Struggling to get this sorted.

Accepted Solution (1)

3node_vackam
Shopify Partner
13 2 1

This is an accepted solution.

Hey @Luftwalk 

I encountered this issue recently as well and unfortunately, you have to create a self hosted app for this.

1) Fetch your own app with the checkout_token (Thank-you page doesn't have access to the order ID)

2) From your app, use Rest Admin API to list all orders (Limit is 250 but it starts at the newest order so it's fine) and find the order which is associated with the same checkout token. (If I remember correctly, you have to use RestAPI, because GraphQL doesn't have access to the Checkout token through an order.)
3) That order has a financial_status attribute, so use that in the response.
4) Use it in the extension to determine whether you wanna draw the button or not.

I know this approach sucks but it's the only possibility so far. However, Shopify might fix this soon and add a financial status hook to the thank-you and order-status targets.
 

Kamil Václavek - Shopify Checkout Extensibility Specialist

View solution in original post

Replies 6 (6)

Luftwalk
Shopify Partner
13 0 1

I tried using graphQL for example on the order status page to fetch the selected method with that.

For example:

async function fetchPaymentInfo() {
      try {
        const endpoint = 'https://my-shopify-store.myshopify.com/api/graphql';
        const headers = {
          'Content-Type': 'application/json',
          'X-Shopify-Access-Token': process.env.SHOPIFY_API_KEY,
        };
        const response = await fetch(endpoint, {
          method: 'POST',
          headers: headers,
          credentials: 'include',
          body: JSON.stringify({
            query: GET_ORDER_PAYMENT,
            variables: { orderId },
          }),
        });
        const data = await response.json();
        setPaymentInfo(data.data.order.payment);
      } catch (error) {
        console.error('Error fetching payment info:', error);
      }
    }

 

 

But it now returns a CORS error....what can I do here?

3node_vackam
Shopify Partner
13 2 1

This is an accepted solution.

Hey @Luftwalk 

I encountered this issue recently as well and unfortunately, you have to create a self hosted app for this.

1) Fetch your own app with the checkout_token (Thank-you page doesn't have access to the order ID)

2) From your app, use Rest Admin API to list all orders (Limit is 250 but it starts at the newest order so it's fine) and find the order which is associated with the same checkout token. (If I remember correctly, you have to use RestAPI, because GraphQL doesn't have access to the Checkout token through an order.)
3) That order has a financial_status attribute, so use that in the response.
4) Use it in the extension to determine whether you wanna draw the button or not.

I know this approach sucks but it's the only possibility so far. However, Shopify might fix this soon and add a financial status hook to the thank-you and order-status targets.
 

Kamil Václavek - Shopify Checkout Extensibility Specialist
Luftwalk
Shopify Partner
13 0 1

Hi @3node_vackam 

 

Thank you for answering. I was thinking of such an idea but thought that I must be missing something...
So if I understand correctly...I need to have a separate app to get that order information I can then use in my extension app?

3node_vackam
Shopify Partner
13 2 1

@Luftwalk exactly

Kamil Václavek - Shopify Checkout Extensibility Specialist
Luftwalk
Shopify Partner
13 0 1

Wow, ok, thank you for pointing me in the right direction.

Very much hoping Shopify decide to add the relevant information...

Luftwalk
Shopify Partner
13 0 1

Just one more question @3node_vackam 

If I have multiple stores where the app is installed (both, the UI extension and the order details one), how would I go about calling the order details one from the extension?

Using the app proxy? The shop parameters I guess are attached to the call?