How to integrate WooComerceAPI into React? - woocommerce

Question

I wanted to receive data to my site on React through the API.I did everything as stated in the documentation, performed the installation of npm install --save woocommerce-api, created the object with parameters as in the documentation http://woocommerce.github.io/woocommerce-rest-api-docs/?javascript#pagination
import React, { Component } from 'react';
import '../App.css';
import WooCommerceAPI from 'woocommerce-api';
class Goods extends Component {
WooCommerce = new WooCommerceAPI({
url: 'http://portland.com/wp/', // Your store URL
consumerKey: '**KEY**', // Your consumer key
consumerSecret: '**KEY**', // Your consumer secret
wpAPI: true, // Enable the WP REST API integration
version: 'wc/v2' // WooCommerce WP REST API version
});
render() {
return(
<div className="GoodsMain">
<div className="Goods">
<img src="/images/photo.png" alt="appletv"/><br/>
<div className="TextAlign">
<span className="NameOfGood">{WooCommerce.get('products/1').name}</span><br/>
<span className="StyleOfGood">black</span><br/>
<span className="PriceOfGood">$49.99</span>
</div>
</div>
</div>
);
}
}
export default Goods;
But I get Line 20: 'WooCommerce' is not defined no-undef
Can u help me integrate correctly API in my site?

Answer 1

I Think you have to use the oauth authentication for getting the data from the woo-commerce rest api because your wordpress is on the server where there is no ssl certificate.

Answer 2

Try this way:
1). Use axios library (https://alligator.io/react/axios-react/) to call the WooCommerce Rest API.
2). To simplify the authentication process, make sure you enable SSL on your Wordpress hosting (I tried authenticate on the non SSL, it appears the process was not that easy, compared the SSL one).
3). Follow the steps from this link to generate the WooCommerce Rest API key
https://woocommerce.github.io/woocommerce-rest-api-docs/?javascript#authentication
4). Once everything setup, test retrieve list of products using Postman (https://www.getpostman.com/).
[GET]
https://{{host}}/{{wordpressFolder}}/wp-json/wc/v2/products/
[HEADER]
// Inside your React code, do this:
const basicToken = btoa(PRODUCTS_CONSUMER_KEY+':'+PRODUCTS_CONSUMER_SECRET)
Authorization: Basic ${basicToken}