“code”:”woocommerce_rest_missing_nonce”,”message”:”Missing the X-WC-Store-API-Nonce header. This endpoint requires a valid nonce.”

You gonna see this error when you are using WooCommerce REST API. The error is self explanatory and easy to understand.

The API asking us to pass a nonce.

Here is a snippet of using JS including nonce in the header, we just gonna grab wp_create_nonce function, generate a string and pass the value via our headers to the API.

Why do we still see the error?

If you google around you will realise you are not alone.

The reason why you are seeing the error is due to API requiring a nonce with a specific name.

If you generate a nonce value using wp_create_nonce(‘my-string’) where ‘my-string’ is a string of your choosing, things won’t work, the value has to come from using expectd key, wp_create_nonce( ‘wc_store_api’ )

As it turns out the end point that I’m trying to use is: “/wp-json/wc/store/cart/add-item”

This endpoint is a part of the WooCommerce Products Block extension, so you need to refer to the WooCommerce Products Block extension documentation.

You can view the source code where the nonce is being verified.

To list all of the endpoints related to the cart, enter into your browser yourdomain.com/wp-json/wc/store

All of the shopping cart related endpoints are not a part of the WooCommerce REST API at this stage as it was pointed out by @wpnomad

Let build UI for our WordPress Plugin with ReactJS.

First we need to generate a package.json file. Open your terminal and run:

>npm init

Once the package.json has been generated, we can begin installing our dependencies.

Run these commands sequentially:

>npm install --save react

>npm install --save react-dom

Before React code can run in the browser, it must go through a transformation by compiling JSX into vanilla JavaScript.

Installing Babel

We are installing babel as a dev dependency:

>npm install --save-dev babel-core

We are also required to install two babel-related modules, named babel-loader and babel-preset-react.

>npm install --save-dev babel-loader

>npm install --save-dev babel-preset-react

All done.

Configuration

Create a file .babelrc and add { presets: [‘react’] }

Webpack

Lastly we need to install webpack and two modules webpack-dev-server and html-webpack-plugin.

>npm install --save-dev webpack

>npm install --save-dev webpack-dev-server

>npm install --save-dev html-webpack-plugin

Configure webpack

Create a file webpack.config.js

module.exports = {
    entry: __dirname + '/app/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    output:  {
        filename: 'wp-global-site-tag-admin.js',
        path: __dirname + '/build'
    }
};