Checkout UI Extensions | Thank You Page

Retired Boards Appdev Extensions
1

We are creating a checkout ui extension app (Remix) for our store. On the Thank You page we would like to be able to do one of the following actions:

  1. Grab the Order ID and attach that to a url for a button click event

  2. Grab the Order Status url and attach that to the button click event

  3. Reload the page on button click in order to load the order status page

Are any of these options possible? if so would someone mind sharing an example?

1 Like
2

Hey @jchops

I’d recommend running through this tutorial (~10 minutes) to see how the pieces fit together. From there, you have access to this information on the thank you page and this information on the order status page.

For #1. You can get the order ID like this:

const { order } = useApi()
console.log(order.current().id);

For #2. You could construct this URL by using the order ID and the Shop ID

const { shop } = useApi()
console.log(shop.current().id);

For #3. You’ll want to use the Button to prop.

Good luck!

3

Hi SBD_,

Thanks for replying. Unfortunately we need the order id on the thank you page and it’s not available in the Standard API. It would be great to have this order data available on the thank you page (at least the order id, number and maybe the orderstatus url) or provide a method to allow the user to advanced to the order status page via a button, link or pressable.

Thanks!

4

Hey @jchops

My mistake - it seems to only be available on the Order Status page https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/orderstatusapi

5

@SBD

Is it possible to interact with the admin api (REST or GraphQL) in a checkout ui extension. If yes, could you provide an example? I’m currently using the remix stack for our internal app and would like to see what the possibilities are here.

6

Hi you solved the problem of receiving an order id on the thank you page

7

Hi @buendio , Yes! The latest API includes an OrderConfirmationAPI which you can use to grab the order ID

8

Do you have an example?
orderConfirmation does not seem to be a valid keyword/function in Visual Code

fbritop_0-1717597033580.png
fbritop_0-1717597033580.png863×614 44.2 KB

9

I managed to do this:

import { OrderConfirmationApi } from '@shopify/ui-extensions/checkout';
import { useApi } from '@shopify/ui-extensions-react/checkout';

// ...

const { lines, shop } = useApi();
const { orderConfirmation } = useApi() as OrderConfirmationApi;

printObject(lines, 'lines');
printObject(orderConfirmation , 'orderConfirmation');

// ...

/**
 * Helper functions to print the complete object
 */
const printObject = (obj: any, name = '') => {
  console.log(name ? `${name}:` : '', JSON.stringify(obj, replacer, 2))
}

const replacer = (_key: string, value: any) => {
  if (typeof value === 'object' && value !== null) {
    return JSON.parse(JSON.stringify(value))
  }
  return value
}

It prints the complete data of lines and orderConfirmation to the browser’s console.

orderConfirmation contains something like this:

{
  "current": {
    "order": {
      "id": "gid://shopify/OrderIdentity/5881974834746"
    },
    "number": "HTL5X8LND"
  }
}

Not sure what to do with the OrderIdentity ID, though.

1 Like
10

Just realized that I can simply use the pure ID of gid://shopify/OrderIdentity/5881974834746, i.e., 5881974834746 and use it in a GraphQL query as Order. Like this:

query getOrder {
  node(id: "gid://shopify/Order/5881974834746") {
    id
    ... on Order {
      name
      customer {
        email
      }
      fulfillmentOrders(first: 30) {
        edges {
          node {
            fulfillments(first: 10) {
              edges {
                node {
                  displayStatus
                }
              }
            }
            lineItems(first: 10) {
              edges {
                node {
                  productTitle
                }
              }
            }
          }
        }
      }
    }
  }
}

So solved from my point of view. :slightly_smiling_face:

3 Likes