“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.
This is easy, we just gonna grab wp_create_nonce function, pass the value via our headers to the API. Submit.
Why do we see the same error again?
If I google around you will realise you are not alone.
The reason why you are seeing the error is due to API requiring not just any nonce, but a specific one.
Don’t just pass the value return from wp_create_nonce(‘my-string’), the value has to come from wp_create_nonce( ‘wc_store_api’ )
As it turns out the end point that I’m trying to use: “/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
>npm install --save-dev babel-loader
>npm install --save-dev babel-preset-react
All done.
Create a file .babelrc and add { presets: [‘react’] }
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'
}
};