Before we start, make sure you have installed Wordpress and Woocommerce and your website is up and running. If you have not installed Wordpress yet, start from here: https://wordpress.org

Required Plugins

Step 1: Configuration of your Wordpress website

If you’re using non-pretty permalinks in Woocommerce, the REST API will not work. Configure pretty permalinks in Settings > Permalinks so that the custom endpoints are supported.

Config permalinks link.

Step 2: Configuring WooCommerce

Pre-generated keys can be used to authenticate use of the REST API endpoints. New keys can be generated either through the WordPress admin interface or they can be auto-generated through an endpoint.

Generating API keys in the WordPress admin interface

Note: We not require WRITE permission READ is enough.

To create or manage keys for a specific WordPress user, go to WooCommerce > Settings > Advanced => REST API> Keys/Apps.

Generating API keys.

Click the "Add Key" button. In the next screen, add a description and select the WordPress user you would like to generate the key for. Use of the REST API with the generated keys will confirm to that user's WordPress roles and capabilities.

Choose the level of access for this REST API key, which can be Read access, Write access or Read/Write access. Then click the "Generate API Key" button and WooCommerce will generate REST API keys for the selected user.

Now that keys have been generated, you should see two new keys, a QRCode, and a Revoke API Key button.

If the WordPress user associated with an API key is deleted, the API key will cease to function. API keys are not transferred to other users.

Consumer Key and Consumer Secret will be used to configure our app and connect it with our Woocommerce.

Step 3: Install the Mobile Builder Plugin

  1. Install it using WordPress built-in Plugin installer, search with keyword (rnlab mobile builder), or Extract the zip file and drop the contents in the wp-content/plugins/ directory of your WordPress installation.

  2. Activate the plugin through the ‘Plugins’ menu in WordPress.

  3. Go to Mobile Builder > Create New Template

  4. Press the ‘Configure’ button.

  5. Now you can drag and drop components from the left panel onto the mobile editor area.

Update Wordpress Config File

Open file wp-config.php and add below configurations and don't forget to change xxxxxxxxxxx with your generated secret kys. The wp-config.php file is located in the root folder of your WordPress file directory and it contains your website’s base configuration details, such as database connection information.

define( 'MOBILE_BUILDER_JWT_SECRET_KEY', 'xxxxxxxxxxx' ); // It like password, type any string you own
define( 'MOBILE_BUILDER_FB_APP_ID', 'xxxxxxxxxxx' );
define( 'MOBILE_BUILDER_FB_APP_SECRET', 'xxxxxxxxxxx' );

Read more about JWT to undestand JWT_SECRET_KEY https://jwt.io/

Config Facebook App ID, App secret and JWT secret

Related

For more information on what to do next, we recommend the following article: