> ## Documentation Index
> Fetch the complete documentation index at: https://developer.novacpayment.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WooCommerce

> Install and configure the Novac payment plugin for WooCommerce with build instructions for developers.

## Overview

The Novac WooCommerce plugin is the official payment gateway integration for WooCommerce stores. It enables you to accept payments directly at checkout using Novac's secure hosted checkout experience, with full support for cards, bank transfers, and mobile money.

## Prerequisites

<Accordion title="See details" defaultOpen={true}>
  Before you begin, ensure the following tools are installed on your machine:

  * **Node.js** v20 or higher, required to run the build scripts
  * **pnpm** the package manager used for all JavaScript dependencies
  * **WP-CLI** used to interact with WordPress from the command line
  * **Webpack** bundled via `wp-scripts` to compile and optimize plugin assets
</Accordion>

***

## Account Setup

Before accepting payments, you need to connect your Novac account to the plugin:

1. Navigate to the Novac Payments settings page in your WordPress admin.
2. Enter your **API key** from the [Novac Dashboard](https://dashboard.novacpayment.com).
3. Configure your **Checkout preferences** to match your store's requirements.

***

## Build Process

The plugin uses **Webpack** and **UglifyJS** as its core build tools to produce minified, production-ready JavaScript and CSS. This section is intended for developers who need to modify, debug, or reproduce the plugin build from source.

### Build Scripts

The following scripts define the full build pipeline. They are run in sequence to install dependencies, minify JavaScript, generate translation files, bundle assets, and produce the final plugin zip:

```json theme={null}
{
  "prebuild": "pnpm install && composer install",
  "build": "pnpm run preuglify && pnpm run uglify && composer run makepot && pnpm run build:webpack && pnpm run plugin-zip",
  "build:webpack": "wp-scripts build",
  "start": "pnpm run start:webpack",
  "start:webpack": "rimraf build/* && wp-scripts start",
  "preuglify": "rm -f $pnpm_package_config_assets_js_min",
  "uglify": "for f in $pnpm_package_config_assets_js_js; do file=${f%.js}; node_modules/.bin/uglifyjs $f -c -m > $file.min.js; done"
}
```

**What each script does:**

| Script          | Description                                                                       |
| --------------- | --------------------------------------------------------------------------------- |
| `prebuild`      | Installs all JavaScript and PHP dependencies before the build starts              |
| `build`         | Runs the full production build pipeline end to end                                |
| `build:webpack` | Compiles and bundles assets using `wp-scripts`                                    |
| `start`         | Starts the development server with file watching enabled                          |
| `start:webpack` | Clears the build directory and starts `wp-scripts` in watch mode                  |
| `preuglify`     | Removes any previously minified JavaScript files before minification runs         |
| `uglify`        | Minifies all JavaScript source files using UglifyJS with compression and mangling |

***

### Reproducing the Build

Follow these steps to clone the repository and produce a fresh plugin zip from source:

<Steps>
  <Step title="Clone the Repository">
    Clone the plugin source code from GitHub:

    ```bash theme={null}
        git clone https://github.com/Novac-Finance/novac-woocommerce-plugin
    ```
  </Step>

  <Step title="Run the Setup Script">
    The setup script configures the local environment, including any server-side dependencies needed for the build:

    ```bash theme={null}
        /bin/setup.sh
    ```
  </Step>

  <Step title="Install Dependencies">
    Install all JavaScript dependencies defined in `package.json`:

    ```bash theme={null}
        pnpm install
    ```
  </Step>

  <Step title="Run the Build">
    Execute the full production build. This minifies JavaScript, compiles assets via Webpack, generates translation files, and packages everything into a plugin zip:

    ```bash theme={null}
        pnpm build
    ```
  </Step>

  <Step title="Download the Plugin Zip">
    If you prefer not to build from source, you can download the latest prebuilt plugin zip directly from the [GitHub Releases page](https://github.com/Novac-Finance/novac-woocommerce-plugin/releases).
  </Step>
</Steps>

***

### Unminified Source Files

For debugging or auditing purposes, the following unminified source files are available in the repository. These are the raw files that get processed during the build:

| File                                                                                          | Description                               |
| --------------------------------------------------------------------------------------------- | ----------------------------------------- |
| [`assets/js/checkout.js`](https://github.com/Novac-Finance/novac-woocommerce-plugin)          | Handles the frontend checkout flow        |
| [`assets/blocks/index.js`](https://github.com/Novac-Finance/novac-woocommerce-plugin)         | Powers the WooCommerce blocks integration |
| [`assets/admin/settings/index.js`](https://github.com/Novac-Finance/novac-woocommerce-plugin) | Admin settings page interface             |
| [`assets/editor/index.js`](https://github.com/Novac-Finance/novac-woocommerce-plugin)         | Block editor (Gutenberg) integration      |