jamesugbanu / react-native-woocommerce-api

A wrapper that connects react Native to the WooCommerce API

react-native-woocommerce-api

A wrappper that connects react Native to the WooCommerce API

Installation

To install the module using NPM:

npm install react-native-woocommerce-api --save

Setup

You will need a consumer key and consumer secret to call your store's WooCommerce API. You can find instructions here

Include the 'react-native-woocommerce-api' module within your script and instantiate it with a config:

import WooCommerceAPI from 'react-native-woocommerce-api';

const WooCommerceAPI = new WooCommerceAPI({
  url: 'https://yourstore.com', // Your store URL
  ssl: true,
  consumerKey: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your consumer secret
  consumerSecret: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your consumer secret
  wpAPI: true, // Enable the WP REST API integration
  version: 'wc/v3', // WooCommerce WP REST API version
  queryStringAuth: true
});

Instantiating a WooCommerceAPI instance without a url, consumerKey or secret will result in an error being thrown

Calling the API

Your WooCommerce API can be called once the WooCommerceAPI object has been instantiated (see above).

GET

WooCommerceAPI.get('products')
          .then(data => {
          	console.log(data);
          })
          .catch(error => {
          	console.log(error);
          });

GET WITH PARAMETER

WooCommerceAPI.get('orders', { customer: userID, per_page: 100 })
          .then(data => {
          	console.log(data);
          })
          .catch(error => {
          	console.log(error);
          });

POST

For this example you have a Order object.

WooCommerceAPI.post('products', {
  product: {
    title: 'Premium Quality',
    type: 'simple',
    regular_price: '21.99'
    }
  })
  .then(data => {
          	console.log(data);
          })
  .catch(error => {
          	console.log(error);
          });

PUT

WooCommerceAPI.put('orders/123', {
  order: {
    status: 'completed'
  }
  })
  .then(data => {
          	console.log(data);
          })
  .catch(error => {
          	console.log(error);
          });

DELETE

WooCommerceAPI.delete('coupons/123')
.then(data => {
          	console.log(data);
          })
  .catch(error => {
          	console.log(error);
          });
});

Testing

npm test

react-native-woocommerce-api's Issues

Error catching issue

Hi there!

When WooCommerce API return an error such as "Invalid email", the react native module doesn't catch the error and just returns an OK, but undefined object.

Therefore I cannot show the error in my interface, because I don't recieve any content.

TypeScript

Please add types for typescript.

How can I add query string params to the request?

I tried to make this request
WooCommerceAPI.get('products?featured=true') .then((data)=> { console.log(data) this.setState({data}); } )

and I got this error
Object { "code": "rest_invalid_param", "data": Object { "params" : Object { "featured": "true?consumer_key=ck_xxxxxxxxxxxx is not of type boolean.", }, "status": 400, }, "message": "Invalid parameter(s): featured",

Issue with params and subscriptions

I am using [email protected]

My API is declared as:

const WooCommerce = new WooCommerceAPI({ url: "https://www.abc.com", ssl: true, consumerKey: "xxxxxxxxxx", consumerSecret: "xxxxxxxxxxx", wpAPI: true, version: "wc/v1", queryStringAuth: true, });

Note it is v1 as v3 does not work with subscriptions.

I'm using this code:
await WooCommerce.get("subscriptions", { status: "active" }) .then((data) => { console.log(data); }) .catch((error) => { console.log(error); });

I get this error message in the logs:
'woocommerce_rest_cannot_view', message: 'Sorry, you cannot list resources.', data: { status: 401 } }

It does work without the param: await WooCommerce.get("subscriptions",)

Note subscription params can be found here: https://prospress.github.io/subscriptions-rest-api-docs/#list-all-subscriptions

Please advise how I should pass params with subscriptions. I would also like to pass a specific customer param as well using a variable.

Won't work over http

although the ssl option is set to false, calling an endpoint over http will just return "undefined"

I guess ssl: true option in the your usage example should be verifySsl: true,

woocommerce_rest_authentication_error

Hi, I've been getting the error thrown at:

if ( ! hash_equals( $signature, $consumer_signature ) ) { // @codingStandardsIgnoreLine
    return new WP_Error( '4woocommerce_rest_authentication_error', __( 'Invalid signature - provided signature does not match.', 'woocommerce' ), array( 'status' => 401 ) );
}

file: woocommerce/includes/api/class-wc-rest-authentication.php

My setup is what the documentation shows:

const Woocommerce = new WoocommerceAPI({
    url: AppConfig.siteURL, // Your store URL
    ssl: false,
    consumerKey: ck, // Your consumer secret
    consumerSecret: cs, // Your consumer secret
    wpAPI: true, // Enable the WP REST API integration
    version: "wc/v3", // WooCommerce WP REST API version
    queryStringAuth: true
});

ck and cs are valid. I run it using Postman and I get a good response.

Here is my request, looks fine, expect that it is using v2 even though I specified v3.

http://192.168.15.40/myproject/wp-json/wc/v2/products?oauth_consumer_key=###&oauth_nonce=###&oauth_signature_method=HMAC-SHA256&oauth_timestamp=1560772341&oauth_version=1.0&oauth_signature=###=&

Request from Postman:

http://localhost/myproject/wp-json/wc/v3/products?oauth_consumer_key=###&oauth_signature_method=HMAC-SHA256&oauth_timestamp=1560770416&oauth_nonce=###&oauth_version=1.0&oauth_signature=###&page=2

They look very similar, except... you know what, it's the URL I think. I just ran Postman hard coding my local IP address and I get the same error. When I try with localhost instead of my IP address in react native I get a response of undefined. React native fetch does't like localhost form some reason.

Still not sure what to do. I'll post this here, someone else might have a similar problem.

how to use the query params in react-native-woocommerce-api?

When I fetch the products, orders, product categories that works fine. But when passing the params, got the error. How to pass the param in react-native-woocommerce-api library?

error is authentication, invalid signature error. How to solve this??

Syntax Error "Identifier 'WooCommerceAPI' has already been declared"

I copied the code in the setup step and used my authentication. I get a syntax error saying "Identifier 'WooCommerceAPI' has already been declared".

import WooCommerceAPI from "react-native-woocommerce-api";

var WooCommerceAPI = new WooCommerceAPI({
  url: "MyURL", // Your store URL
  ssl: true,
  consumerKey: "MYCONSUMERKEY", // Your consumer secret
  consumerSecret: "MYCONSUMERSECRET", // Your consumer secret
  wpAPI: true, // Enable the WP REST API integration
  version: "wc/v2", // WooCommerce WP REST API version
  queryStringAuth: true,
});

export default WooCommerceAPI;

Custom headers

Hi, is it possible to add custom headers to the requests?

App device CORS Error

HI.
I have an error when using the plugin since a device!

my error is when i use!

this.WooCommerce.get('products',data).then(result => {
console.log(result);
})
.catch(error => {
console.log(error);
});

Config:

this.WordPress = new WooCommerceAPI({
url: Config.WORDPRESS_URLS, // Your store URL
ssl: true,
wpAPIPrefix : 'MYPREFIX',
consumerKey: 'MYKEY' // Your consumer secret
consumerSecret: 'MYCS', // Your consumer secret
wpAPI: true, // Enable the WP REST API integration
version: 'wc/v3', // WooCommerce WP REST API version
queryStringAuth: true,
});

if i running my project from a web, it works fine!
but when I compile the application and install it on an android device.
GET method never executes, only OPTIONS!

Thanks!

While trying to resolve module `react-native-woocommerce-api`

I have installed this recently and I am not able to import the package as it's throwing the bellow error. the packages and files exist and I tried restarting the metro client as well

error: Error: While trying to resolve module react-native-woocommerce-api
from file D:\REACT\wplogin\screens\DashBoard.js, the package D:\REACT\wplogin\node_modules\react-native-woocommerce-api\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (D:\REACT\wplogin\node_modules\react-native-woocommerce-api\lib\react-native-woocommerce-api.js. Indeed, none of these files exist:

Could not find a declaration file for module 'react-native-woocommerce-api'. 'd:/REACT/wplogin/node_modules/react-native-woocommerce-api/lib/react-native-woocommerce-api.js' implicitly has an 'any' type.

.catch never catching

Not sure if it's me but even when the site isn't running I can't get .catch to catch.

.then(data => ... just becomes undefined

I think the .catch blocks in the fetch() call need to throw an error

Login API

First of all thanks for this very useful tool. Can you please share how we can login / authenticate a user with the help of this NPM?

undefined is not an object (evaluating '_WooAPI.WooAPI.get')

I'm working in a local environement and my lcoalhost link is : http://127.0.0.1:81/wordpress/

I added the consumer key and consumer secret, but an error is handled

is it necessary to use a deployed wordpress website ?

or there is another issue ?

``
TypeError: undefined is not an object (evaluating '_WooAPI.WooAPI.get')

This error is located at:
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at `renderApplication.js:39)
``

Invalid signature - provided signature does not match

there isnt any way to pass signature, i use the exact same ky cs and ck
Object {
"code": "woocommerce_rest_authentication_error",
"data": Object {
"status": 401,
},
"message": "Invalid signature - provided signature does not match.",
}

woocommerce_rest_authentication_error

I am trying to use this but this is what is get as the response
Also, I tried the API with post man and seems to work just fine the issue arises when I call it using the app.
Key and Secret are correct.

i am getting error : woocommerce_rest_authentication_error

var WooCommerce = new WooCommerceAPI({
  url: 'http://www.mydomain.co/wc/v3/',
  ssl: true,
  consumerKey: 'myconsumerKey', // Your consumer secret
  consumerSecret: 'myConsumerSecret', // Your consumer secret
  wpAPI: true, // Enable the WP REST API integration
  version: 'wc/v3', // WooCommerce WP REST API version
  queryStringAuth: true
});

and getting product like this

getResponse = () => {
return WooCommerce.get('products/')
}

and getting this error
{"code": "woocommerce_rest_authentication_error", "data": {"status": 401}, "message": "Invalid signature - provided signature does not match."}

How to get total page count in result?

Hi,
I want to get x-wp-totalpages and x-wp-total header info, is there any way to get these values in response?

Use WpAPI

I try to implement the wc api and it works very well! But i don't understand how can i user wpAPi. For example i want to create a new user...how can i do? Thanks

CORS Error

I am using the examples in the documentation to setup my connection. It all seems to go well until I try and pull data (in my case products)

I get CORS errors.

Access to fetch at 'MY WOOSITE' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.

Is there a way around this? My app that is trying to access the API is on localhost:3000 still as I am in development.