Thank you and order status page - need additional information

[Luftwalk]

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.

[Luftwalk]

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 · 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.
 

[Luftwalk]

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]

@Luftwalk exactly

[Luftwalk]

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

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

[Luftwalk]

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? 

[3node_vackam]

Well you could use the proxy, but it can refuse to answer the request because of CORS, as the order-status-page can be hosted on the shopify.com url with the new customer accounts. So if you were to use the proxy, the merchants would be required to make sure their customer accounts use their domain and not the shopify.com one.

If you wanted to evade the proxy, you would have to write the OAuth stuff from scratch and create your own database of the registered stores and all that. This is a very sketchy solution so I tried requesting Shopify support to add a "financialStatus" hook to the thank-you and order-status targets. That would simplify this process a lot and allow this issue to be solved simply by a extension only app. Let's hope they do that.