Making API calls in JS with publicly visible API keys/secret keys. Wordpress/Woocommerce

I am currently trying to implement a frontend form on Wordpress, which will POST new products to my site using the Woocommerce API. My first stab at this was to send the data to the relevant API endpoint using JS/Jquery. This required me to add some JS which authenticates the API call by including the ClientKey and ClientSecret.

My questions are:

1. Tell me if and why this is bad security (as anyone will be able to see the API credentials)
2. What alternative's would you suggest?

I realise this may be quite a general JS/API question but have included the details of Wordpress/Woocommerce for context.

Here is the example code I was using, which worked, but i'm worried about the security if I were to use on a production site. :

const wooClientKey = 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxx';const wooClientSecret = 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';const wooUrl = 'https://localhost/my-site/wp-json/wc/v2/products';function basicAuth(key, secret) {    let hash = btoa(key +':'+ secret);    return "Basic "+ hash;}let auth = basicAuth(wooClientKey, wooClientSecret);function getData(url) {    jQuery.ajax({        url: url,        method: 'GET',        beforeSend: function (req) {            req.setRequestHeader('Authorization', auth);        }    })        .done(function (data) {            console.log(data);            return data;        });}getData(wooUrl);