PUT Request in Javascript

Highlighted
New Member
2 0 0

Essentially what I'm trying to do is make the POST request found in the customers reference of the Shopify API:

POST /admin/customers.json
{
  "customer": {
    "first_name": "Steve",
    "last_name": "Lastnameson",
    "email": "steve.lastnameson@example.com",
    "phone": "+15142546011",
    "verified_email": true,
    "addresses": [
      {
        "address1": "123 Oak St",
        "city": "Ottawa",
        "province": "ON",
        "phone": "555-1212",
        "zip": "123 ABC",
        "last_name": "Lastnameson",
        "first_name": "Mother",
        "country": "CA"
      }
    ],
    "send_email_invite": true
  }
}

Here's what I currently am working with:

function download() {
    var info = [{
         "customer": {
         "first_name": "test",
         "last_name": "test",
         "email": "test@example.com",
         "phone": "+15142546011",
         "verified_email": true,
         "addresses": [{
             "address1": "123 Oak St",
             "city": "Ottawa",
             "province": "ON",
             "phone": "555-1212",
             "zip": "123 ABC",
             "last_name": "Lastnameson",
             "first_name": "Mother",
             "country": "CA" }],
         "metafields": [{
             "key": "new",
             "value": "newvalue",
             "value_type": "string",
             "namespace": "global" }]
         }
    }];

    var customer = new Blob(info, { type: 'application/json' });

    debugger;
    var xhr = new XMLHttpRequest();
	xhr.open("PUT",
         "http://site.myshopify.com/admin/customers.json",
         true,
         "username",
         "password" );
    xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));
    xhr.onreadystatechange = function (response) {
        console.log(xhr.responseText);
        };
    xhr.send(customer);
}

I have tried using Shopify's 'customer' and 'create_customer' forms, but they don't work how we would like. Currently, I continue to get the "No 'Access-Control-Allow-Origin' " error thrown. Is there really no other way to POST to customers/json without creating an app? It seems like too much of a hassle just to add a customer via code. What's my best option for actually making the POST request?

0 Likes
Highlighted
Shopify Expert
9928 104 1765

First question - why is this getting done through JavaScript? This makes me very nervous that you're not passing the key details in a secure way.

In any case, you won't be able to make a PUT call via the browser as anything that sends cookies in those requests are blocked (for security).

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
New Member
2 0 0

I'm using javascript because it seemed easier and I'm just trying to get this working. 

But for this situation, what's the best approach to get this working? I want to add a customer and I am gathering the information in a form.

0 Likes
Highlighted
Shopify Expert
9928 104 1765

Easier isn't a good reason to not do things securely. Exposed key details could reveal all manner of data on your store, including customer accounts, product data, orders, etc. Depending on the app scope someone could also purge your store of data.

You'll want to create an an to add a customer via the API. There's a tutorial that may give some inspiration for app dev.

What data do you need to capture that the existing customer signup form doesn't? 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Partner
7 0 0

+1

Have there been any updates on this? I am having difficulty completing a PUT request using JavaScript to modify an asset. I have created a private app and am using username, pw and token associated with it (has been anonymized in code snippet below).

Thanks!

Find bellow the request and the console output.

 

 

 

$.ajax({
  url: 'https://APIKEY:PASSWORD@bi83.myshopify.com/admin/themes/223641612/assets.json',
  type: 'PUT',
  contentType: 'application/json', //this changes status to 200 but response text sign in page
  headers:{
      "X-Shopify-Access-Token": "XXXXXXX",
  },
  data: {
  	"asset": {
      "key": "assets\/bg-body.gif",
      "src": "http:\/\/apple.com\/new_bg.gif"
    }
  },
  dataType:'json',
  success: function(data) {
    console.log("success");
    console.log(data);
  },
  error: function(data) {
    console.log("error");
    console.log(data);
  }
});

 

 

error
bismuth.js?7083265512612981015:50 {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
bismuth.js?7083265512612981015:51 {"error":"822: unexpected token at 'asset%5Bkey%5D=assets%2Fbg-body.gif\u0026asset%5Bsrc%5D=http%3A%2F%2Fapple.com%2Fnew_bg.gif'"}
bismuth.js?7083265512612981015:52 400

 

0 Likes
Highlighted
Tourist
6 0 2

You really should not invoke the Admin API via the browser - this means the keys to your data are PUBLIC. 

Please do this server side. 

You can use Javascript, but server side - use node.js for example.

0 Likes