Updating Shopify Customer Data via AJAX

Other Questions Shopify
1

I’m having trouble with the Shopify API. I want to change a customer’s info (email, phone, name) using AJAX. It works fine in Postman, but I get a 404 error in my code.

Here’s what I’m trying:

let userData = {
  firstName: $('#userFirstName').val(),
  lastName: $('#userLastName').val(),
  email: $('#userEmail').val(),
  phone: $('#userPhone').val(),
  id: $('#userId').val()
};

let jsonData = JSON.stringify({
  user: userData
});

$.ajax({
  url: 'https://my-store.myshopify.com/admin/api/2022-04/users/' + userData.id + '.json',
  type: 'PUT',
  data: jsonData,
  dataType: 'JSONP',
  contentType: 'application/json',
  success: (data) => console.log(data),
  error: (err) => console.error('Error:', err)
});

I’m using JSONP to avoid CORS issues. The API key and password are set up. What am I doing wrong?

2

I have seen similar issues with Shopify before and found that a few adjustments made the solution work. The main problem is that JSONP is not supported for PUT requests, so you need to rely on standard JSON requests. Also, the endpoint you used is not correct for customers; it should be ‘/admin/api/2022-04/customers/’ followed by the customer ID. Including the API token in the headers is crucial as well. Once you correct these points – using JSON, the proper endpoint, and appropriate headers – the request should work as expected.

3

I’ve dealt with similar Shopify API issues before. The main problem here is trying to use JSONP for a PUT request, which isn’t supported. Instead, you’ll need to handle CORS on your server-side.

First, update your endpoint to ‘/admin/api/2022-04/customers/’ + userData.id + ‘.json’. Then, set up a server-side proxy to forward your requests to Shopify. This way, you can include the necessary headers and API credentials securely.

On the client-side, your AJAX call should look something like this:

$.ajax({
  url: '/your-proxy-endpoint',
  type: 'PUT',
  data: JSON.stringify({ customer: userData }),
  contentType: 'application/json',
  success: (data) => console.log(data),
  error: (err) => console.error('Error:', err)
});

Your server then handles the actual API call to Shopify, including all necessary authentication. This approach solves both the CORS issue and ensures your API credentials remain secure.

4

hey there, ive run into this before. the problem is ur using JSONP for a PUT request, which doesn’t work. switch to regular JSON and fix ur endpoint to ‘/admin/api/2022-04/customers/’ + userData.id + ‘.json’. also, make sure ur including the API token in the headers. that should do the trick!

5

I encountered a similar issue when working with the Shopify API. The problem lies in your approach to handling CORS and the endpoint structure. Instead of using JSONP, you should set up a server-side proxy to handle the API requests. This way, you can avoid CORS issues altogether.

For the endpoint, ensure you’re using the correct path for customers: ‘/admin/api/2022-04/customers/’ + customerId + ‘.json’. Also, don’t forget to include your API key and access token in the request headers.

Here’s a simplified version of how your AJAX call should look:

$.ajax({
  url: '/your-proxy-endpoint',
  type: 'PUT',
  data: JSON.stringify({ customer: userData }),
  contentType: 'application/json',
  success: (data) => console.log(data),
  error: (err) => console.error('Error:', err)
});

Your server-side proxy should then forward this request to Shopify with the appropriate headers and authentication.