For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
Hello Shopify Community,
I am currently working on a checkout UI extension using React in Shopify. In my extension, I
need to retrieve the customer ID during the checkout process. However, I do not have access
to customer emails and passwords for security reasons.
I have reviewed the Shopify documentation, and the recommended method to obtain the customer ID is by using the customerAccessTokenCreate mutation, which requires the customer's email and password. Unfortunately, this approach is not feasible for my use case.
I would like to know if there are any alternative methods or suggestions to retrieve the
customer ID without relying on customer emails and passwords. Is there any other API
endpoint or approach that I could use to achieve this?
Any guidance, insights, or examples would be greatly appreciated.
Thank you in advance for your help!
Hi there! 👋
If you are building a Checkout UI extension with React, I would recommend reviewing the available react hooks!
The `useCustomer` hook will return the logged in customer's information, including the ID!
We don't currently have a tutorial that uses the `useCustomer` hook, but this tutorial uses the `useOrder` hook, which is used in a similar way.
Hope that works for your use case!
To learn more visit the Shopify Help Center or the Community Blog.
It somewhat depends what stage of the checkout you're at, but I just figured out how to do this for a post-purchase extension. The props available at the app level came destructured, but I un-destructured them and logged out the results and found that this is what the props object looked like:
So I was able to access the customer ID in this way:
// Top-level React component
export function App({ extensionPoint, storage, inputData }) {
const initialState = storage.initialData;
const {
initialPurchase: { customerId },
} = inputData;
console.log("customerId: ", customerId);
Hope that helps!