Checkout UI extension usePhone inconsistent results

Extensions
,
1

Hi there, I am trying to make use of the customer phone number in a checkout ui extension. When an email is not provided, I’d like to use the phone number.

I am updated my customer protected data to reflect this and it has been approved.

What I have found is that when I use usePhone on the thank you page, I am returned a string, but in my case it is a UK mobile number starting with 0, e.g. 07000111222. I’d like to use this phone number as part of a graphql customer query in my app, but that only works with the full country code, e.g. +447000111222. I can’t see a way for me to find out in the checkout ui extension what the country code should be. Interestingly, when I use prevent_redirect=true and refresh the thank you page, on the second load I am given the phone number with the full country code.

Secondly, when I move to the order status page, usePhone just returns an empty string. Yet with useEmail, this works on both the thank you page and the order status page.

So my questions are:

  • How do I get a country code formatted phone number on the thank you page?
  • How do I get the phone number for the customer on the order status page?

Many thank in advance for any help here.

2

Hi @Alex_Dover

There’s no direct way via the Admin API to “convert” a local phone number to E.164 format if you only have the local number and no country context. If you have access to the order or customer ID, you can query the customer or order via the Admin API to get the phone number as stored in Shopify, which is typically in E.164 format. It would be something like this:

query GetOrderPhone {
  order(id: "gid://shopify/Order/1234567890") {
    id
    phone
    customer {
      id
      phone
    }
  }
}

However - the post-purchase extension itself cannot directly call the Admin API from the browser/extension context due to authentication and CORS restrictions, so you’ll need to proxy these requests through your app’s backend.

Similarly, to get the phone number on the order status page, you can use the Admin API to fetch the phone number using the order or customer ID.

3

Thanks, Liam.

It is a shame usePhone doesn’t work on the order status page, but as you say I can get around it because I do have an order id at that point.

What I am trying to do on the thank you page is use the phone number to look for an existing customer, I do this currently with the email address using a graphql query in my app backend and I’d like to try and do the same if the customer has just used a phone number to checkout.

My issue seems to be that if I use the non-country code formatted phone, the graphql query doesn’t return me anything, it only works with the country code formatted version, which I can’t get. Are you able to provide any guidance on how I might get this query to work with the phone number provided in the checkout extension…

This doesn’t work…

{
    customers(first: 20, query: "phone:07000111222") {
        edges {
            node {
                id,
                email,
                phone,
                firstName
                lastName
            }
        }
    }
}

but this does…

{
    customers(first: 20, query: "phone:+447000111222") {
        edges {
            node {
                id,
                email,
                phone,
                firstName
                lastName
            }
        }
    }
}

Thanks in advance!